Skip to content
Font Awesome Docs

Use Vue with...

You can integrate Font Awesome + Vue with other tools and frameworks. Here are some common integrations and how they work.

Nuxt

Section titled “Nuxt”

Install @fortawesome/fontawesome-svg-core and any icon packages you plan to use.

Then install the vue-fontawesome component:

Terminal window
npm i --save @fortawesome/vue-fontawesome@latest-3

Inside your Nuxt project add a plugins/fontawesome.js file:

import { library, config } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { fas } from '@fortawesome/free-solid-svg-icons'


// This is important, we are going to let Nuxt worry about the CSS
config.autoAddCss = false


// You can add your icons directly in this plugin. See other examples for how you
// can add other styles or just individual icons.
library.add(fas)


export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon)
})


// Modify the `nuxt.config.ts` file by adding to the `export default defineNuxtConfig()`
export default defineNuxtConfig({
  css: [
  '@fortawesome/fontawesome-svg-core/styles.css'
  ]
})

Now you can add the icons using the syntax below wherever you want them to appear in your project.

<template>
  <div>
    <font-awesome-icon icon="fa-solid fa-user-secret" />
  </div>
</template>