fontawesome with vue do not work - vue.js

Question

Is there a way to install fontawesome in Vue? I tried few tutorials but they are all useless and do not work or icons are empty or plugin does not render at all!!!! I don't want to import the font by script, I want to install it in my application. I tried this tutorial (https://github.com/FortAwesome/vue-fontawesome) but whatever I did the icons do not render, maybe someone can point me to the solution?
Here is my code but the icons even do not render:
import FontAwesomeIcon from '#fortawesome/vue-fontawesome';
export default {
name: 'App',
components:{FontAwesomeIcon}
}
<template>
<div id="app"><font-awesome-icon icon="spinner" /></div>
</template>
also, I get an error in the console:
Check not find one or more icon(s) {prefix: "fas", iconName:
"spinner"} {}

Answer 1

I think you might be missing some dependencies. Please try
<script>
import fontawesome from "#fortawesome/fontawesome";
import brands from "#fortawesome/fontawesome-free-brands";
// import 1 icon if you just need this one. Otherwise you can import the whole module
import faSpinner from "#fortawesome/fontawesome-free-solid/faSpinner";
import FontAwesomeIcon from "#fortawesome/vue-fontawesome";
fontawesome.library.add(brands, faSpinner);
// or .add(brands, solid) if you need the whole solid style icons library/module
export default {
name: "App",
components: {
FontAwesomeIcon
}
};
</script>
Working example: https://codesandbox.io/s/ov6o0xk23y

Answer 2

Remember to load each icon that you are using. My icons weren't rendering because I forgot to add them to the library.
Template:
<icon icon="lock" />
JS:
import Vue from 'vue';
import { library } from '#fortawesome/fontawesome-svg-core';
import {
// import icons here
faLock,
} from '#fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome';
import App from './App.vue';
// add icons to library here
library.add(faLock);
Vue.component('icon', FontAwesomeIcon);
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
}).$mount('#app');

Answer 3

Also, in the case that you are using multiple icons, it can be easier to import and load the whole set of icons e.g.
...
import { fas } from "#fortawesome/free-solid-svg-icons";
library.add(fas);
...

Answer 4

I had the same issue with:
package.json
"#fortawesome/fontawesome-svg-core": "^1.2.36",
"#fortawesome/free-brands-svg-icons": "^5.15.4",
"#fortawesome/free-solid-svg-icons": "^5.15.4",
"#fortawesome/vue-fontawesome": "^2.0.2",
Relying on a previous project where it worked, I upgraded #fortawesome/vue-fontawesome to ^3.0.0-4, which fixed the issue for me.

Answer 5

I was getting the following warning and not getting the icons displayed:
"export 'default' (imported as 'FontAwesomeIcon') was not found in '#fortawesome/vue-fontawesome'
Solution for me was to import an specific portion instead of going to default
changed from:
import FontAwesomeIcon from '#fortawesome/vue-fontawesome'
to
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'