Use Vue with...

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

Nuxt

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

Then install the vue-fontawesome component:

npm yarn 
npm i --save @fortawesome/vue-fontawesome@latest-3

yarn add @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.

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

<template>
  <div>
    <!-- Reminder to bind the icon property with ":" -->
    <font-awesome-icon :icon="['fas', 'user-secret']" />

    <NuxtWelcome />
  </div>
</template>
    No results