5

Been trying to add FontAwesome to a Nuxt 3 / Tailwind boilerplate. Everything works fine, the Facebook icon shows up! but the server console is giving this error:

✔ Vite server hmr 12 files in 446.295ms                                                        18:11:42
Could not find one or more icon(s) { prefix: 'fab', iconName: 'facebook' } {}

And in the browser console:

[Vue warn]: Hydration node mismatch:

- Client vnode: svg 
- Server rendered DOM: <!---->  
  at <FontAwesomeIcon icon= (2) ['fab', 'facebook'] > 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouteProvider key="/" routeProps= {Component: {…}, route: {…}} pageKey="/"  ... > 
  at <FragmentWrapper > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <Default > 
  at <LayoutLoader key="default" name="default" hasTransition=false > 
  at <FragmentWrapper > 
  at <NuxtLayout> 
  at <App key=2 > 
  at <NuxtRoot>

I followed instructions to the dot from here. It happens with other icons too, and they're all from the free font-awesome edition.

~/package.json:

{
  "private": true,
  "scripts": {
    "dev": "nuxi dev",
    "build": "nuxi build",
    "start": "node .output/server/index.mjs",
    "lint": "eslint --ext .ts,.js,.vue .",
    "test": "vitest",
    "coverage": "vitest run --coverage"
  },
  "devDependencies": {
    "@headlessui/vue": "^1.7.12",
    "@nuxt/devtools": "^0.2.5",
    "@nuxtjs/color-mode": "^3.2.0",
    "@nuxtjs/eslint-config-typescript": "^12.0.0",
    "@pinia/nuxt": "^0.4.7",
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "@tailwindcss/container-queries": "^0.1.0",
    "@tailwindcss/forms": "^0.5.3",
    "@tailwindcss/line-clamp": "^0.4.2",
    "@tailwindcss/typography": "^0.5.9",
    "@vitest/coverage-c8": "^0.29.2",
    "@vueuse/nuxt": "^9.13.0",
    "eslint": "^8.35.0",
    "nuxt": "^3.2.3",
    "nuxt-headlessui": "^1.1.1",
    "nuxt-icon": "^0.3.2",
    "nuxt-vitest": "^0.6.6",
    "pinia": "^2.0.33",
    "tailwindcss": "^3.2.7",
    "typescript": "^4.9.5"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.3.0",
    "@fortawesome/free-brands-svg-icons": "^6.3.0",
    "@fortawesome/vue-fontawesome": "^3.0.3",
    "pnpm": "^7.29.1",
    "vitest": ">=0.29.0 <1",
    "vue": "3.2.47"
  }
}

~/plugins/fontawesome.js:

import { library, config } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faFacebook } from '@fortawesome/free-brands-svg-icons'
library.add(faFacebook)

// This is important, we are going to let Nuxt worry about the CSS
config.autoAddCss = false

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

~/nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    '@vueuse/nuxt',
    '@pinia/nuxt',
    '@nuxtjs/color-mode',
    'nuxt-icon',
    'nuxt-headlessui',
    'nuxt-vitest'
    // '@nuxt/devtools'
  ],
  experimental: {
    reactivityTransform: true
  },
  css: [
    '~/assets/css/tailwind.css',
    '@fortawesome/fontawesome-svg-core/styles.css'
  ],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {}
    }
  },
  colorMode: {
    classSuffix: ''
  },
  headlessui: {
    prefix: ''
  },
  plugins: [
    { src: "~/plugins/fontawesome.js", ssr: false} 
  ]
})

Then showing in template:

<font-awesome-icon :icon="['fab', 'facebook']" />

What am I doing wrong?

Thanks

Neurus
  • 657
  • 4
  • 27

1 Answers1

8

Ended up being a one liner in nuxt.config.ts:

build: {
  transpile: ['@fortawesome/vue-fontawesome']
},

Source: https://github.com/FortAwesome/vue-fontawesome/issues/215

That took care of the error...

Neurus
  • 657
  • 4
  • 27