How to Setup FontAwesome with Nuxt 3

I was trying to find some social icons for this website (lesterlambac.com) and ideally I would like to go with inline svg. However, I really can't find uniform designs with icons like Facebook, Email, Github. So, I decided to use fontawesome and they actually have a module for Nuxt 3.

In this guide, I'll just mainly share with you what I have done to setup fontawesome with Nuxt 3. You can confirm all the things I wrote here on this blog to the fontawesome module documentation. I'm just going to share my setup and how to eliminate a common error with running it on dev server.

Step 1: Install vue-fontawesome svg icon packages.

It's really important to include the fontawesome-svg-core but include also the package of the icons you are trying to use.

You can check their documentation for right packages to use and since I am using Facebook and LinkedIn icons, that falls to free-brands-svg-icons and an email icon which is in free-solid-svg-icons package category, I'm going forth on installing these packages.

  yarn add @fortawesome/fontawesome-svg-core 
  yarn add @fortawesome/free-brands-svg-icons
  yarn add @fortawesome/free-solid-svg-icons

You can do this oneline by just stacking all packages like this:
yarn add @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-solid-svg-icons

Step 2: Install vue-fontawesome vue component.

This is the Vue Component that we are just going to call and insert into our NuxtApp.

  yarn add @fortawesome/vue-fontawesome@latest-3

Step 3: Create a fontawesome Nuxt plugin.

Inside your plugins folder, create a file and name it fontawesome.js. Then you can copy this code setup inside that file.

  import { library, config } from '@fortawesome/fontawesome-svg-core'
  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
  import { faGithubSquare, faFacebookSquare, faLinkedin } from '@fortawesome/free-brands-svg-icons'
  import { faEnvelope } from '@fortawesome/free-solid-svg-icons'

  library.add(faEnvelope, faFacebookSquare, faGithubSquare, faLinkedin)

  config.autoAddCss = false

  export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.component('fontawesome', FontAwesomeIcon, {})
  })

QUICK OVERVIEW: In the firstimport lines we are exposing library, config from fontawesome-svg-core. (Let's not think about it as this is how this package work 😌) Then, import the FontAwesome vue component as well as the icons.

We then add the predefined icons to the library which is a FontAwesome logic we don't have to do anything about that. And also some CSS config that let's Nuxt handle the CSS of this plugin.

Finally, we can add the component inside our nuxt App which should be called inside the defineNuxtPlugin as per Nuxt documentation.

Step 4: Setup Nuxt Config.

Inside your nuxt.config.js, let's add the fontawesome styles. You might think what is the build: { transpile: ['@fortawesome/vue-fontawesome'] } is for?

We just add that because if not, when running on dev, the terminal will throw a message something like
Could not find one or more icon(s) { prefix: 'fab', iconName: 'facebook-square' } {}

  export default defineNuxtConfig({
    css: [
      '@fortawesome/fontawesome-svg-core/styles.css'
    ],

    build: {
      transpile: ['@fortawesome/vue-fontawesome']
    },
  })

Step 5: Use the Icons in the template.

Remember that we have registered the FontAwesome component as fontawesome? We'll use that naming convention in referencing it on our template.

  
    <fontawesome icon="fa-brands fa-facebook-square"></fontawesome>
    // string style

    <fontawesome :icon="['fab', 'facebook-square']"></fontawesome>
    // array style
  

You can choose whether to use the string or array syntax but I'm more on the sting one because I think that's how it is being used few years back. Cheers!