Btukfyl

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!

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

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