I can't get fontawesome to work with nuxt 3. I get the following error:
This is my package.json right now:
{
"private": true,
"scripts": {
"dev": "nuxi dev",
"build": "nuxi build",
"start": "node .output/server/index.mjs"
},
"devDependencies": {
"@fortawesome/free-brands-svg-icons": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@nuxtjs/fontawesome": "^1.1.2",
"nuxt3": "latest",
"sass": "^1.49.9",
"sass-loader": "^10.2.1"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"normalize.css": "^8.0.1",
"saas": "^1.0.0"
}
}
and this is my Nuxt 3 config file:
import { defineNuxtConfig } from 'nuxt3'
export default defineNuxtConfig({
typescript: {
shim: false
},
css:['normalize.css/normalize.css'],
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData:
'@import "@/assets/css/_default.scss";'+
'@import "@/assets/css/pallete.scss";'+
'@import "@/assets/css/fonts.scss";'
},
},
},
},
buildModules: ['@nuxtjs/fontawesome'],
fontawesome:{
component: 'fa',
icons:{
solid:true,
}
},
})
Thanks. I hope you can help me.
The @nuxtjs/fontawesome package hasn't been updated since 2020, it doesn't look like it's compatible with nuxt 3. I've configured it by creating a plugin:
With this, you can now use the font-awesome-icon component anywhere without any problem.