How can I include Fontawesome 6 in Nuxt 3 project?

Question

first of all my configuration:

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
    // if you want to use static HTML generation (SSG)
    target: 'static',

    // if you want to use server-side rendering (SSR)
    ssr: true,

    css: [
        'assets/scss/main.css',
        'assets/scss/header.css',
        '@fortawesome/fontawesome-svg-core/styles.css'
    ],

    build: {
        transpile: [
            '@fortawesome/vue-fontawesome',
            '@fortawesome/fontawesome-svg-core',
            '@fortawesome/pro-solid-svg-icons',
            '@fortawesome/pro-regular-svg-icons',
            '@fortawesome/free-brands-svg-icons'
        ]
    }

})

/plugins/fontawesome.js

import { defineNuxtPlugin } from '#app';

/** Fontawesome for Nuxt 3
 * https://fontawesome.com/docs/web/use-with/vue/use-with#nuxt 
 * 
*/

// import the fontawesome core
import { library, config } from '@fortawesome/fontawesome-svg-core'

// import font awesome icon component 
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

// import specific icons 
import { fas } from '@fortawesome/free-solid-svg-icons'

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


export default defineNuxtPlugin((nuxtApp) => {
  console.log('[Plugin]', 'Font Awesome')
  
  // 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);

  nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon)
})

<template>
  <header class="header">
    <Logo />

    coffee <font-awesome-icon icon="fas coffee" /> 
    flag <font-awesome-icon icon="fas fa-flag" />
    search <font-awesome-icon icon="fas fa-magnifying-glass" />
    search 2 <font-awesome-icon icon="fa-solid fa-magnifying-glass" />

    <nav>
      <nuxt-link :to="{ path: '/' }">
        Home
      </nuxt-link>
      <nuxt-link :to="{ path: '/getting-started' }">
        Getting Started
      </nuxt-link>
      <nuxt-link :to="{ path: '/faq' }">
        FAQ
      </nuxt-link>
      <nuxt-link :to="{ path: '/search' }">
        <font-awesome-icon icon="fas fa-magnifying-glass" />
      </nuxt-link>
    </nav>

  </header>
</template>

Problem When I start npx nuxi dev and look at the page via localhost, the icons appear for 1 second and then are no longer visible. I have been searching for a solution for quite some time because I could not find an error right away.

Warning - console

[Vue warn]: Hydration node mismatch:
- Client vnode: font-awesome-icon 
- Server rendered DOM: <svg class="svg-inline--fa fa-magnifying-glass" style aria-hidden="true" focusable="false" data-prefix="fas" data-icon="magnifying-glass" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">…</svg>  
  at <Navigation> 
  at <Default > 
  at <AsyncComponentWrapper > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="layout" mode="out-in" > 
  at <Anonymous> 
  at <App key=1 > 
  at <NuxtRoot>

I still recommend this one as of today: https://stackoverflow.com/a/72055404/8816585 — kissu, Aug 16 '22 at 14:16

score 8 · Answer 1 · answered Oct 28 '22 at 13:56

8

You can wrap the component in a <client-only>, so it only renders client-side.

<client-only>
 <font-awesome-icon icon="fas fa-flag" />
</client-only>

answered Oct 28 '22 at 13:56

Rodolfo Santos

81
1
2

1

works fine, but is the best solution? – fabiovaz Mar 13 '23 at 22:40

score 0 · Answer 2 · answered Feb 21 '23 at 19:55

0

Maybe you need to add '@fortawesome/free-solid-svg-icons' to your transpiler. You're using the free package, but transpile only the pro.

answered Feb 21 '23 at 19:55

Yoji Kojio

11
3

How can I include Fontawesome 6 in Nuxt 3 project?

2 Answers2