Setup Font Awesome with Nuxt.js in 59secs

Adding Font Awesome to your Nuxt.js project can be a quick and easy way to add style to your Vue project but the setup can be a little confusing but you’re not here to read a long introduction so without further ado, we have 51 seconds left to add Font Awesome to your Nuxt.js project.

Installation:

Yarn:

$ yarn add @nuxtjs/fontawesome -D
// optional
$ yarn add @nuxtjs/fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons -D

NPM:

npm i @nuxtjs/fontawesome --save-dev

nuxt.config.js

buildModules: [
  ...,
  [
    '@nuxtjs/fontawesome', {
      icons: {        
        solid: ['faCheck'],
      }
    }
  ]
]

It is recommended to only add the icons you require to the project instead of adding the whole lot. If you do want to import them all because you want to throw an icon wherever you can you can set:

solid: true

Note: We’re using camelCase to add the icons we need to the project.

MyAwesomeVueComponent.vue

<font-awesome-icon :icon=”['fas', 'check']” />

Note: ‘fas’ is short for font awesome solid, so we’re importing the check icon as a solid icon here. You can check https://www.npmjs.com/package/@nuxtjs/fontawesome#icons for the other options.

3…2…1 phew. Just in time. There you go.