How to setup Font Awesome 5 as VueComponent in Nuxt.js
06 Jan 18 20:00
One minute read

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.

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']" />

« Back to posts