Posted onJan 12, 2022 • Originally published atfrostbutter.com onJan 12, 2022

Setup font awesome in Vue and NuxtJS

If you have been living under a rock for several years and don't know, Fontawesome a wonderful icon library. It's open source, SVG based, and can be used on any website like utility classes.

Two different options to get awesome

Before the setups steps you should know, there are two ways to use Fontawesome icons in a Vue or Nuxt project:

"component" based icons
or utility "class" based icons

Both options work well, and are really just a matter of preference. But they have very similar setups, so I'll show both methods here.

With "component" based icons, you can add icons like this:

<font-awesome-icon:icon="['fas', 'user']"/>

With utility "class" based icons, you can icons like this

<iclass="fa fas fa-user"></i>

With Vue being a componentized framework, some people really love being able to use Fontawesome icons just like any other component. Personally, I do not.

I really like the utility class method. I find it easier, and I can use otherTailwind utility classes or regular CSS to style icons further when I want to.

Install the "fortawesome" packages

That's right. The package is actuallyfortawesome. Not fontawesome. Don't ask me why...

Using your favorite package manager, install thefortawesome dependencies.

npminstall @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

This will install the "core" package which you must add. As well as the "solid" icon pack. This will allow us to use the solid icons from Fontawesome.

If you want to add more icons into your project, then you can also install the "brands" and "regular" icon packs. (I end up using the same brand icons, likeTwitter and GitHub a lot.)

npminstall @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons

You can see the official NPM package here:@fortawesome/fontawesome-svg-core

Setup Fontawesome in Vue JS

If you are using a regular Vue JS project, then open up your _main.js _ project file, add add the following code to it:

/* Import all the font awesome goodness */import{library}from'@fortawesome/fontawesome-svg-core'// loads all the "solid" iconsimport{fas}from'@fortawesome/free-solid-svg-icons'// loads only the "twitter" brand icon// import { faTwitter } from '@fortawesome/free-brands-svg-icons'// add each of the imported icons into the applibrary.add(fas);// can be a list of all the icons e.g. (fas, fab, faTwitter, etc)// to use component based icons//import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'// to use class based iconsimport{dom}from'@fortawesome/fontawesome-svg-core'dom.watch();

Note: Specifically, you should add this code before you create your "app" object.

Here we are importing thelibrary object from thefortawesome core. The library will allow us to specify which icons we want to use in our project. More on

Next, I importfas from thesolid icon pack. This is how you import all of the solid icons from the solid icon pack. The same way works for the brand icons. To import all the brand icons, importfab from thebrand icon pack.

Make sense?

If you want to only use a specific icon in your project, you can import only the desired icons from the each icon pack. For example, to only import that twitter icon from the brand pack, use this line:

import { faTwitter } from '@fortawesome/free-brands-svg-icons'

Note: the icon names are written in Pascal case. (e.g. "faTwitter",not"fa-twitter")

After importing all the icons you want for your project, we add them to the library.

library.add(fas); // can be a list of all the icons e.g. (fas, fab, faTwitter, etc)// addd all solid icons and twitterlibrary.add(fas, faTwitter);

In theadd function, you can pass the list of all the icons you imported and want to use in your project.

To use component based icons:

Import theFontAwesomeIcon component on each of your.vue pages you want to use the component. This way, you can use font awesome icons like any other vue component. Like this:

<font-awesome-icon:icon="['fas', 'user']"/>

Just pass in an array into theicon prop. The first item in the array is the library you imported, the second item is the icon name itself.

To use the utility class icons:

We importdom from the fortawesome core. Thedom will allow us to use the utility class method of using the icons. thedom.watch() function is where the magic happens for Vue to enable the normal font awesome classes to work properly.

Using this way, you will be able to add fontawesome icons like regular html:

<iclass="fa fas fa-user"></i>

If you are going to use the component method for the icons, then you do not need to importdom or usedom.watch()

But like I said earlier, this is the method that IREALLY prefer. It seems cleaner.

Setup Fontawesome in NuxtJS

If you are trying to add Fontawesome icons into a Nuxt JS app, the setup is very similar. The only difference is that in order to actually tell Nuxt to use Fontawesome icons, you must create a plugin with the code from the section above, then load the plugin in yournuxt.config.js file.

Create the Fontawesome plugin

From inside your Nuxt app's root directory, create the new file~/plugins/fontawesome.js.

If you do not already have aplugins folder, just create it now 🙂

In the exact way I explained above, import and add all the Fortawesome icons you want to use in your project:

/* Import all the font awesome goodness */import{library,dom}from'@fortawesome/fontawesome-svg-core'import{fas}from'@fortawesome/free-solid-svg-icons'import{faTwitter}from'@fortawesome/free-brands-svg-icons'library.add(fas,faTwitter);dom.watch();