Include external CSS library in only one Vue component

Viewed 10740

I have a Vue app with many components. Currently I have Font-Awesome included in the head of the index.html file however only ONE page, or component, actually needs it. Is it possible to move it to the component itself so that it only loads when it's needed?

MOVE THIS

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

TO THIS

<template></template>
<link rel="stylesheet" href="../../static/css/font-awesome-4.7.0/css/font-awesome-min.css"></link>
<script>
    export default {
        name: 'SingleComponent',
        data: function() {
            return{}
        }
    }
</script>
<style scoped>
</style>

I've tried downloading Font-Awesome and adding a link tag in the component like above ^^^^ I don't get any errors but the icons still don't work.

3 Answers

Import css file in style tag of App.js

<style>
@import './static/css/style.css';
</style>

If you have just one page or component, isn't it easier to create what you need in a <template /> and <html /> tag?

Instead of trying to include Font-Awesome directly in the component, I discovered there is already a Vue wrapper for it called vue-awesome so I used that.

Related