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?

  • Declare once, use globally.
  • Smallest boilerplate
  • All styles available, if needed.


//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


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.


<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:

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.