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

   

   juhaelee posted on Dec 22, 2017

   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);
   
   

   View on GitHub

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