Use font-awesome in a Vue app created with vue-cli webpack

With the FontAwesome-5 release some exclusive things are done by FontAwesome team for vue and other libraries:

Kinda outdated solution but still works, check the updated solution below:

• Check fontawesome advance options here
• For npm package and doc check here

Anyhow, here is what I did to integrate it, first installed these packages:

npm i --save @fortawesome/fontawesome
npm i --save @fortawesome/vue-fontawesome
npm i --save @fortawesome/fontawesome-free-solid

Create a file called fa.config.js and included this code:

import Vue from 'vue';
import fontawesome from '@fortawesome/fontawesome';
import FontAwesomeIcon from '@fortawesome/vue-fontawesome';
import {
  faSpinner,
  faAngleLeft,
  faAngleRight,
} from '@fortawesome/fontawesome-free-solid';

fontawesome.library.add(
  faSpinner,
  faAngleLeft,
  faAngleRight,
);

Vue.component('font-awesome-icon', FontAwesomeIcon); // registered globally

And import it in main.js

import './path/to/fa.config';

And in my components I am using it like this:

<template>
  <div>
    <font-awesome-icon icon="angle-left"></font-awesome-icon> Hey! FA Works
  </div>
</template>

By now you guys might have figured it out what's the advantage of doing as I have done it above?

Using an explicit icon offers the advantage of only bundling the icons that you use in your final bundled file. This allows us to subset Font Awesome's thousands of icons to just the small number that are normally used.

Hope this helps!

UPDATE - Friday, 22 June 2018
The above solution still works but now things are done in different way, first install these packages:

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons // if "regular" icon package needed
npm i --save @fortawesome/vue-fontawesome

Then create a file called fa.config.js and included this code:

import Vue from 'vue';
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

import { faUser, faBuilding } from '@fortawesome/free-solid-svg-icons'
import { faUserCircle, faCheckCircle } from '@fortawesome/free-regular-svg-icons'

library.add(
  faUser,
  faBuilding,
  faUserCircle,
  faCheckCircle,
);

Vue.component('font-awesome-icon', FontAwesomeIcon); // registered globally

Say that you like you use faUser icon of both the kind regular and solid, then do this change:

import { faUser as fasUser, faBuilding } from '@fortawesome/free-solid-svg-icons'
import { faUser as farUser, faCheckCircle } from '@fortawesome/free-regular-svg-icons'

library.add(
  fasUser,
  farUser,
  faBuilding,
  faCheckCircle,
);

And import it in main.js

import './path/to/fa.config';

And in my components I am using it like this:

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

    // If you like to use Font Awesome Regular, then:
    <font-awesome-icon :icon="['far', 'user']"></font-awesome-icon>
    <font-awesome-icon :icon="['far', 'check-circle']"></font-awesome-icon>

  </div>
</template>

I use simple solution webpack:

webpack.config.js:

const path = require('path')

module.exports = {
    resolve: {
        alias: {
            '@': path.resolve('resources/js')
        }
    }
}

webpack.mix.js

mix.js('resources/js/app.js', 'public/js').vue()
    .sass('resources/sass/app.scss', 'public/css')
    .webpackConfig(require('./webpack.config'))

if (mix.inProduction()) {
    mix.version()
}

use sass, in app.scss

@import '~@fortawesome/fontawesome-free/scss/brands.scss';
@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-free/scss/regular.scss';
@import '~@fortawesome/fontawesome-free/scss/solid.scss';

install all dependency i use in package.json:

"@fortawesome/fontawesome-free": "^5.15.4",
"@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/free-regular-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4",

don't break your main and invok it

<i class="fa fa-icon> </i>
<i class="fas fa-icon> </i> // for solid
<i class="far fa-icon> </i> // for Regular

and imaginated how is brands.!

for fa and fab icons

use npm :

npm install --save @fortawesome/fontawesome-free-brands
npm install --save @fortawesome/fontawesome-free-solid
npm install --save @fortawesome/fontawesome

in Main.js :

// font awesome 5 
import fontawesome from "@fortawesome/fontawesome";
import solid from "@fortawesome/fontawesome-free-solid";
import brands from "@fortawesome/fontawesome-free-brands";

fontawesome.library.add( brands , solid);

and call icons as you normally would on website development

in home.vue :

<a href="#!" class="text-white me-4">
    <i class="fab fa-facebook-f" />
 </a>