Include external CSS library in only one Vue component

Question

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.

Solution

Import css file in style tag of App.js

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

Comments

[josue]

how to add this in vue? <link rel="stylesheet" href="maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/…">

[Linx]

No I have many components but only one that needs Font-Awesome

[Hybrid web dev]

This isn't an answer.