CODEWITHSUNDEEP
vue.jsfont-awesomenuxt.js
Jsfids
Jsfids

Reputation: 1

How can I integrate fontawesome with nuxt.js?

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?

Upvotes: 0

Views: 2177

Answers (3)

shtse8
shtse8

Reputation: 1365

Add this plugin:

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faSms } from '@fortawesome/free-solid-svg-icons'
import { faFacebook, faTwitter } from '@fortawesome/free-brands-svg-icons'

export default defineNuxtPlugin((nuxtApp) => {
  console.log('[Plugin]', 'Font Awesome')
  library.add(faTwitter)
  library.add(faFacebook)
  library.add(faSms)
  nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon)
})

Upvotes: 0

Lema
Lema

Reputation: 79

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

Upvotes: 2

sintj
sintj

Reputation: 814

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)

Upvotes: 1

Related Questions