Nuxt 3 Fontawesome how to fix ERROR Failed to resolve import "@fortawesome/free-solid-svg-icons" from "plugins\fontawesome.js". Does the file exist?

Question

I followed the docs from fontawesome to include them into my nuxt 3 project. https://fontawesome.com/docs/web/use-with/vue/use-with

I installed it with npm i --save @fortawesome/vue-fontawesome@latest-3

I also ran npm i --save @fortawesome/free-brands-svg-icons and npm i --save @fortawesome/fontawesome-svg-core

then I created a plugins/fontawesome.js file (I quadruple checked the names here) and put the following code in it:

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 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)

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon, {})
})

I also added the neccesary code to the nuxt.config.ts so it looks like:

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['@nuxtjs/tailwindcss'],
  app: {
    head: {
      title: "PAN-Biotech",
      meta: [
        {name: 'description', content: 'Your Cellculture stuff'}
      ],
      link: [
        {
          rel: 'stylesheet',
          href: 'https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap'
        }
      ]
    }
  },
  css: [
    '@fortawesome/fontawesome-svg-core/styles.css'
  ]
})

Now the problem is when I start it with npm run dev I get the following ERROR:

 ERROR  Failed to resolve import "@fortawesome/free-solid-svg-icons" from "plugins\fontawesome.js". Does the file exist?       

What can I do here? I checked the name of the folder and file multible times and they do in Fact exist.

Answer 1

Install these other packages:

For npm:

npm install @fortawesome/vue-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

For yarn:

yarn add @fortawesome/vue-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons