DEV Community

Alexandru Bucur
Alexandru Bucur

Posted on • Updated on

How to setup Font Awesome 5 as VueComponent in Nuxt.js

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

  1. 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

  2. Font Awesome 5's VueJS integration works well, but you need to keep in mind to install the icon categories.

  3. 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

    I'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:39
    

    Looks 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)
Enter fullscreen mode Exit fullscreen mode

Now we just need to add the plugin in nuxt.config.js

module.exports = { 
  ...

  plugins: [
    ...
    { src: '~/plugins/font-awesome' }
  ]
}

Enter fullscreen mode Exit fullscreen mode

And this allows us to use the component in our page

<font-awesome-icon :icon="['fab', 'linkedin']" />
Enter fullscreen mode Exit fullscreen mode

Discussion (9)

Collapse
phouvanhkcsv profile image
Phouvanh Kongchansavath • Edited on

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'

Collapse
goviedo profile image
Gonzalo Oviedo Lambert

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?

Collapse
mandaputtra profile image
Manda Putra

Got this errors,

Cannot read property 'name' of undefined

from this line
Vue.component(FontAwesomeIcon.name, FontAwesomeIcon)

If I removed the name the icon wont show

Collapse
coolgoose profile image
Alexandru Bucur Author

@protokol0 they've changed the setup a little bit on newer versions.

Collapse
joselo profile image
Jose Carrion • Edited on

Thanks for sharing this!!

I prefer to use in this way:



<font-awesome-icon icon="plus"/>
Collapse
sabahang profile image
Saba Ahang

Any idea how to add my own custom icons to the library?

Collapse
coolgoose profile image
Alexandru Bucur Author

Just keep them separate from font-awesome. I don't see why you would need to add them to the library itself.

Collapse
creativiousa profile image
Amirul Asyraf Mohamed Azam

Hi Sir, how do I assign the font awesome under the tag for example { icon: &#39;fas fa-drafting-compass&#39;, text: &#39;Custom Order&#39;}, </p>

Collapse
coolgoose profile image
Alexandru Bucur Author

Not sure what you mean unfortunately.