How to use FontAwesome 5 in Nuxt

1. Nuxt FontAwesome

Make sure to install the nuxt-fontawesome module for Nuxt.

yarn add nuxt-fontawesome

2. FontAwesome Icons

Install your preferred FontAwesome icon packages. You can stick to all, or just one.

yarn add @fortawesome/fontawesome @fortawesome/fontawesome-free-brands @fortawesome/fontawesome-free-solid

3. Setup Nuxt

Inside your nuxt.config.js file setup nuxt-fontawesome as a module.

// ...
  
modules: [
    ['nuxt-fontawesome', {
        component: 'fa',
        imports: [
          {
            set: '@fortawesome/free-solid-svg-icons',
            icons: ['faDollarSign']
          }
        ]
      }]
  ],

// ...

The config above is using just a single icon and sets up the FontAwesome component name as fa. This means that inside your components you will be able to use the following FontAwesome component:

<fa :icon="['fas', 'dollar-sign']" />

If you’d like to access all icons (from the package that you have installed), make sure to edit your Nuxt config to use the nuxt-fontawesome as follows:

// ...
  
modules: [
    'nuxt-fontawesome'
  ],

// ...

That’s it! You should now be able to use the FontAwesome component and programatically use icons inside your Nuxt-powered app.