Use Vue with...

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

Nuxt

Which version of Nuxt are you using?

The vue-fontawesome version and setup will be different depending on whether you are using Nuxt 2 or Nuxt 3.

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

Then install the vue-fontawesome component:

npm

# for Nuxt 2
npm i --save @fortawesome/vue-fontawesome@latest-2

# for Nuxt 3

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

yarn

# for Nuxt 2
yarn add @fortawesome/vue-fontawesome@latest-2

# for Nuxt 3
yarn add @fortawesome/vue-fontawesome@latest-3

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

Nuxt 2.x

// For Nuxt 2
import Vue from 'vue'
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.js 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)

// Register the component globally
Vue.component('font-awesome-icon', FontAwesomeIcon)

// Modify nuxt.config.js adding to the `css` and `plugins` sections.
css: [
'@fortawesome/fontawesome-svg-core/styles.css'
]

plugins: [
'~/plugins/fontawesome.js'
]

Nuxt 3.x

// For Nuxt 3
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

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

Array

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

    <NuxtWelcome />
  </div>

</template>

Mind Your 2's and 3's!

The below usage of Font Awesome with PurgeCSS and Web Components with vue-web-component-wrapper applies to Nuxt 2 and Vue 2 projects only!

PurgeCSS

If you use PurgeCSS with Nuxt 2 - or use the Nuxt tailwindcss module which comes with PurgeCSS prebundled - you need to add fontawesome CSS classes to the whitelist, Otherwise, PurgeCSS will treat them as unused and remove them since the classes only get inserted on rendering.

  // For Nuxt 2 (Nuxt 3 is NOT supported by PurgeCSS at the time of writing this doc)
  // In your `nuxt.config.js`, add a purgeCSS config object.
  // You may adjust the regex to your liking:

export default {
  purgeCSS: {
    whitelistPatterns: [/svg.*/, /fa.*/]
  }
}

Web Components with vue-web-component-wrapper

The Vue project provides a wrapper that will register your Vue components as Web Components.

This project and all Font Awesome SVG icons will work just fine in these components but we need to take an additional step to add the CSS correctly.

To take advantage of encapsulation that the Shadow DOM provides and to keep other areas of the DOM clean we need to add the Font Awesome CSS to the root of the Shadow DOM.

Here is an example that leverages the mounted() lifecycle hook to insert the CSS.

<script>
import { config, dom } from '@fortawesome/fontawesome-svg-core'
import { faCoffee, faStroopwafel, faDragon } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

// Make sure you tell Font Awesome to skip auto-inserting CSS into the <head>
config.autoAddCss = false

const component = {
name: 'MyCustomElement',

template: `<font-awesome-icon icon="icon" />`,

components: {
  FontAwesomeIcon
},

mounted () {
  // This will only work on your root Vue component since it's using $parent
  const { shadowRoot } = this.$parent.$options
  const id = 'fa-styles'

  if (!shadowRoot.getElementById(`${id}`)) {
    const faStyles = document.createElement('style')
    faStyles.setAttribute('id', id)
    faStyles.textContent = dom.css()
    shadowRoot.appendChild(faStyles)
  }
},

computed: {
  icon () {
    const icons = [faCoffee, faStroopwafel, faDragon]

    return icons[Math.floor(Math.random() * 3)]
  }
}
}

export default component
</script>