How can I integrate fontawesome with nuxt.js?

Question

I have been trying to use fontawesome icons inside nuxt.js, but whenever I run npm run dev I get this error ERROR in ./node_modules/@fortawesome/free-solid-svg-icons/index.es.js Module build failed: Error: ENOENT: no such file or directory

I think that the problem is there is not a free-solid-svg-icons directory, but when I tried to install it with npm, it didn't appear.

Can anybody help?

Answer 1

I use it like this: in nuxt.config.js add this:

    script:[
      {src: "https://kit.fontawesome.com/xxxxxxx.js", crossorigin: "anonymous"},
    ],

Where xxxxxxx is the ID of your kit (created on FA website)

Answer 2

Late but might help, create plugins folder if not created in root folder, add fontawesome.js file and import all the necessary icons, the sample file below;

import Vue from 'vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
import { faBuilding } from '@fortawesome/free-regular-svg-icons'
import { faTwitter } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faUserSecret,faTwitter,faBuilding)

Vue.component('fai', FontAwesomeIcon)

integrate the icons through nuxt.config.js, sample below;

plugins: [
  { src: '@/plugins/fontawesome.js', mode: 'client' }
]

Using the icons? see the sample below;

<div>
 <fai :icon="['fab', 'twitter']" />
</div>

Few things to Note;

1. <fai... /> is the component name, can name anything, needs to decide the name during component creation - Vue.component('fai', FontAwesomeIcon)
2. you import as faTwitter but you use as twitter, ommit fa and twitter starts small letter. If faUserSecret, then ommit fa and use user-secret.

Find vue-fontawesome full reference below; https://github.com/FortAwesome/vue-fontawesome