Getting error when trying to use Nuxt font awesome 5 although I followed the official manual page

Question

I'm trying to use font awesome 5 in my Nuxt project following the official guide below. https://www.npmjs.com/package/nuxt-fontawesome

However, I'm getting a strange error and can't display what I want.

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Here is how my code looks like:

//index.vue
<template>
    <fa :icon="fas.faAddressBook"  />
    <fa :icon="faGithub" />
</template>
<script>
    import { fas } from '@fortawesome/free-solid-svg-icons'
    import { faGithub } from '@fortawesome/free-brands-svg-icons'
    computed: {
      fas () {
        return fas
      },
      faGithub () {
        return faGithub
      }
    },
and more.....


//nuxt.config.js
  modules: [
    [
      'bootstrap-vue/nuxt', { css: true },
      ['nuxt-fontawesome', {
        component: 'fa',

        imports: [
          //import whole set
          {
            set: '@fortawesome/free-solid-svg-icons',
            icons: ['fas']
          },
        ]
      }]
    ],
  ],
  fontawesome: {
    component: 'fa',
    imports: [
      {
        set: '@fortawesome/free-solid-svg-icons',
        icons: ['fas']
      },
    ],
  },

Please let me ask for your help. I have spent long enough time on this issue already. Thank you in advance!

Answer 1

Ok, I had a similar issue and found that the vue-fontawesome plugin worked although the nuxt-fontawesome one didn't. So, my steps:

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

create a fontawesome.js file in plugins folder and put this in it:

import Vue from 'vue'
import { library, config } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'

// This is important, we are going to let Nuxt.js 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)
library.add(fab)

// Register the component globally
Vue.component('font-awesome-icon', FontAwesomeIcon)

then in nuxt.config.js

 css: [
    '@fortawesome/fontawesome-svg-core/styles.css'
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    '~/plugins/fontawesome.js',

  ],

and then to use in any page:

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

That's pretty much all here