When I was working on my personal project with Nuxt.js and Chakra UI Vue I wanted to use FontAwesome Icons. I did struggle a bit to get the icons working in Chakra UI Vue inside my Nuxt.js project. Due to the fact that the Nuxt.config.js object looks a little different then the normal Vue.config.js object.

Getting started 🏃‍♂️

This small blog is all about Nuxt.js and Chakra UI Vue, meaning we have to start with creating a new Nuxt.js project.

Let's start quickly by using the create-nuxt-app.

npx create-nuxt-app <my-project>

Inside our terminal, we will have to answer a few questions. The only thing that's really important is that we select the Chakra UI option.

Personally, I've chosen for Yarn as 'package manager', but feel free to pick what you prefer. After going inside the project folder we can launch our project.

cd <project-name>
yarn dev

✅ The first step is done! We have our project running! Chakra UI is kind enough to change the Index.vue page to let us know everything is running correctly.

🎁 Adding the Icons

In this post, I'll be using FontAwesome Icons, here again, pick your favorite icon pack if you want.

We can add it to our project using the following yarn command.

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

The first package @fontawesome-free are the free icons from the Font Awesome library. The other package @free-brands-svg-icons are the free icons from brands like Twitter etc. from the Font Awesome library.

For this project, I'm using the brands-svg-icons to make a list as shown below.

The next big step is to import the icons we wish to use, for example, the Twitter icon.

Inside the nuxt.config.js file we have to add an import at the top for the icons.

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

Then we have to add the icons to the Chakra plugin inside the config object.

There it is! 🎉 Now we are ready to use the icons inside our templates!

We will use the CIcon component of Chakra UI to easily render the SVG Icons in our template.

In the name prop we have to pass the icon key. Which is is the icon name (faTwitter) without fa and lower case for Font Awesome icons.

I would suggest to check out the documentation here for more info on the props.

I really love how easy it is to use Icons in Chakra UI Vue and Nuxt.js. Thanks for reading and I do hope it will help you with your next project!

❤️ Contribute to this blog

Having any questions, caught a mistake, or have tips? Please reach out to me!