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

Advertisement

Nuxt.js

Install @fortawesome/[email protected] and @fortawesome/[email protected] and any icon packages you plan to use.

Then, inside your Nuxt.js (opens new window) project add a plugins/fontawesome.js file.

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'
]

PurgeCSS

If you use PurgeCSS (opens new window) - or use the nuxt.js 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.

In your nuxt.config.js, add a purgeCSS config object. You may adjust the regex to your liking:

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

Web Components with vue-web-component-wrapper

The Vue project provides a wrapper (opens new window) that will register your Vue components as Web Components (opens new window).

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>

You're viewing the Version 6 Beta

It's all the awesome of 5, but now more six-y! Version 6 brings over 13,000 icons across 5 styles – including the new Thin style! – and includes more and faster services.

Get the Deets on Version 6

Head Back to Our Current Version 5 Release

Need a Hand?

If you’re stuck or have a question, check our Troubleshooting docs, all of the Font Awesome threads on Stack Overflow, or contact our community on GitHub.

Or get Real Human Support™ with a Pro Subscription!