What's the current state of FontAwesome 6 + Nuxt 3?

[Krystus]

It's hard to find good example of implementation of FontAwesome 6 and Nuxt 3. Is it possible right now?

[Pinnokkio]

+1
I really need FontAwesome 6 icons.

[KonradDRAST]

Those are 2 different projects. Fortawesome is not providing Nuxt specific solutions.

As for the Nuxt plugin, it looks like it's on hold until v3 is production-ready. Creating plugins for unstable versions is not the best idea, so no earlier than June 2022.

[jasonlundien]

Hey there @Krystus ---

Our next release will include an updated version of our Vue 3.x package which will support Nuxt 3 (with Font Awesome 6 icons) along with documentation to help get you started.

[jasonlundien]

@Krystus ---

We have now released our official Vue 3 package along with updated docs. Our Vue 3 package does support Nuxt 3 (docs here). I will go ahead and close this issue... if you have any other issues just let us know.

[SHxKM]

@Krystus ---

We have now released our official Vue 3 package along with updated docs. Our Vue 3 package does support Nuxt 3 (docs here). I will go ahead and close this issue... if you have any other issues just let us know.

Hi, it seems like things broke in the last few months?

Nuxt3 can find the icons and they display fine, but I see this in the logs:

Could not find one or more icon(s) { prefix: 'fab', iconName: 'spotify' } {}
Could not find one or more icon(s) { prefix: 'fas', iconName: 'kiwi-bird' } {}
Could not find one or more icon(s) { prefix: 'fab', iconName: 'spotify' } {}
Could not find one or more icon(s) { prefix: 'fas', iconName: 'kiwi-bird' } {}

[jasonlundien]

@SHxKM ---

Do you have a website or a repo I can look at for reproducible test case?

[SHxKM]

@SHxKM ---

Do you have a website or a repo I can look at for reproducible test case?

Hey thanks for trying to help, I don't but my issue is exactly this (Although I'm not sure if the user there is getting the same kind of warning).

[jasonlundien]

@SHxKM ---

ok gotcha, so your console error is
[Vue warn]: Hydration node mismatch:

and not
Could not find one or more icon(s) { prefix: 'fab', iconName: 'spotify' } {}

We are looking into the "Hydration node mismatch". If I am wrong about the above just let me know.

[SHxKM]

@SHxKM ---

ok gotcha, so your console error is [Vue warn]: Hydration node mismatch:

and not Could not find one or more icon(s) { prefix: 'fab', iconName: 'spotify' } {}

We are looking into the "Hydration node mismatch". If I am wrong about the above just let me know.

I’m using Nuxt 3 and that’s the console error there when the server is running, even though the icons are showing properly.

in the browser console, it’s the “node mismatch”.

These two messages may be unrelated, but client-only hides away both messages.

[jasonlundien]

@SHxKM --

Then for the Could not find one or more icon(s) error:
can you verify for me that our "brands" npm package is installed in your project (package.json should show something like "@fortawesome/free-brands-svg-icons": "^6.1.1", in your dependencies.

Also, verify that the "brand" icons have been imported (import { fab } from '@fortawesome/free-brands-svg-icons') and added to the library (library.add(fas, fab)) in the the plugins/fontawesome.js file. (Inside your Nuxt project add a plugins/fontawesome.js file).

[SHxKM]

@jasonlundien thanks for insisting on helping.

Here's what npm list gives me:

├── @fortawesome/fontawesome-free@6.2.0
├── @fortawesome/fontawesome-svg-core@6.2.0
├── @fortawesome/free-brands-svg-icons@6.2.0
├── @fortawesome/free-solid-svg-icons@6.2.0
├── @fortawesome/vue-fontawesome@3.0.1
├── @nuxt/postcss8@1.1.3
├── @nuxtjs/eslint-config-typescript@10.0.0
├── @nuxtjs/fontawesome@1.1.2
├── @pinia/nuxt@0.3.1
├── @typescript-eslint/eslint-plugin@5.36.1
├── @typescript-eslint/parser@5.36.1
├── autoprefixer@10.4.8
├── eslint-plugin-vue@9.4.0
├── eslint@8.23.0
├── nuxi@3.0.0-rc.8
├── nuxt@3.0.0-rc.8
├── nuxt3@3.0.0-rc.8-27697980.11e537d
├── pinia@2.0.21
├── postcss@8.4.16
├── prettier-plugin-tailwindcss@0.1.13
├── prettier@2.7.1
├── tailwindcss@3.1.8
├── typescript@4.8.2
└── vue@3.2.38

My plugins/fontawesome.js file: (I was importing fas and fab previously, and only tried single-icon imports when I saw the error - the results are the same)

import { library, config } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faKiwiBird } from '@fortawesome/free-solid-svg-icons'
import { faSpotify } from '@fortawesome/free-brands-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(faKiwiBird)
library.add(faSpotify)

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

And nuxt.config.ts:

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  buildModules: ['@pinia/nuxt'],
  css: [
    '@fortawesome/fontawesome-svg-core/styles.css',
    '@/assets/css/output.css'
  ],
  build: {
    postcss: {
      postcssOptions: {
        plugins: {
          tailwindcss: {},
          autoprefixer: {}
        }
      }
    }
  }
})

[christophheich]

@SHxKM ---

ok gotcha, so your console error is [Vue warn]: Hydration node mismatch:

and not Could not find one or more icon(s) { prefix: 'fab', iconName: 'spotify' } {}

We are looking into the "Hydration node mismatch". If I am wrong about the above just let me know.

The „could not find error“ seems to be related with the hydration mismatch error, even though the icons are shown on the client side while the server is showing: „ Could not find one or more icon(s)“