2 Minute guide to Fontawesome with Nuxt.js

(Paywall? Try Readium)
It took quite some time to figure out, also this is my preferred way of doing it:

Why this way?

Install:

//fontawesome nuxt module
npm install nuxt-fontawesome --save-dev
//the icon packages.
npm install @fortawesome/free-brands-svg-icons --save-dev
npm install @fortawesome/free-solid-svg-icons --save-dev
npm install @fortawesome/free-regular-svg-icons --save-dev

nuxt.config.js

First import, will become “default” style. See below.

buildModules: [
['nuxt-fontawesome', {
component: 'fa', //customize component name
imports: [{
set: '@fortawesome/free-solid-svg-icons',
icons: ['faLightbulb']
},
{set: '@fortawesome/free-brands-svg-icons',
icons: ['faGithub']
},
{set: '@fortawesome/free-regular-svg-icons',
icons: ['faLightbulb']
},
]
}]
],

From the thousands of icons in de module, we imported the Github icon and the Lightbulb icon in two different styles.

template.vue

<fa :icon="['far','lightbulb']" /> // regular style
<fa :icon="['fas','lightbulb']" /> // solid style
<fa :icon="['fab','github']" />
<fa icon="lightbulb" /> //will use style from first import

The component has the tag “fa”, because it was declared as such in the nuxt-config under components.

Thanks to Hanna, whos post explained alot:
https://medium.com/@kozyreva.hanna/nuxt-js-fontawesome-integration-7ec56b1a41c8

This Blogpost explains the use of Fontawesome 5 in Nuxt.js.
Using the nuxt-fontawesome module. It shows how to import individual icons in Fontawesome 5, making use of Treeshaking. It also allowes global use of Fontawesome icons in your vue app.