There were a couple of things that I needed to understand in Nuxt.js so hopefully this will make it quicker for other people as well
To have a global component in Nuxt, just create a plugin. Even if the documentation isn't very clear on setting that up it works well if you look around the Github issue list
Font Awesome 5's VueJS integration works well, but you need to keep in mind to install the icon categories.
-
Update: It got fixed in 1.1.3
Currently there's an issue withFontawesome 5 SSR, follow toadkicker's advice and go back a version.
SSR issue with @forawesome/fontawesome 1.1.0
#11984
juhaelee posted onI'm receiving the following error when trying to SSR with fontawesome:
Cannot read property 'doScroll' of undefined as node_modules/@fortawesome/fontawesome/index.js:192:39Looks like this line is being executed when DOCUMENT is undefined:
var loaded = (DOCUMENT.documentElement.doScroll ? /^loaded|^c/ : /^loaded|^i|^c/).test(DOCUMENT.readyState);
That being said let's create a plugin, I've called it font-awesome.js
import Vue from 'vue'
// the component
import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
// the library
import fontawesome from '@fortawesome/fontawesome'
// add more icon categories as you want them, even works with pro packs
import brands from '@fortawesome/fontawesome-free-brands'
// asociate it to the library, if you need to add more you can separate them by a comma
fontawesome.library.add(brands)
Vue.component(FontAwesomeIcon.name, FontAwesomeIcon)
Now we just need to add the plugin in nuxt.config.js
module.exports = {
...
plugins: [
...
{ src: '~/plugins/font-awesome' }
]
}
And this allows us to use the component in our page
<font-awesome-icon :icon="['fab', 'linkedin']" />
Top comments (9)
Hi Alexandru
How to only add some icons? Because i do not want to add full set, i want to use different icons in different categories.
Thanks.
Edited:
Got it, with this for example:
import { faAngleDoubleDown } from '@fortawesome/fontawesome-pro-regular'
Thanks Alexandru, but the content lack of important things like.
You have to install fontawesome libray, something obvious but all need explicity.
2) Where is the vue-component?, do you create it?, it is implicit?.
And what is brand, never hear of it.
3) If i use vuetify, how do i use it?
Got this errors,
Cannot read property 'name' of undefinedfrom this line
Vue.component(FontAwesomeIcon.name, FontAwesomeIcon)If I removed the name the icon wont show
@protokol0 they've changed the setup a little bit on newer versions.
Thanks for sharing this!!
I prefer to use in this way:
Any idea how to add my own custom icons to the library?
Just keep them separate from font-awesome. I don't see why you would need to add them to the library itself.
Hi Sir, how do I assign the font awesome under the tag for example { icon: 'fas fa-drafting-compass', text: 'Custom Order'}, </p>
Not sure what you mean unfortunately.