search

nuxt-community / fontawesome-module

Module to use Font Awesome icons in Nuxt.js
MIT License
110 stars 12 forks source link

Unknow custom element: <fa> #21

Open Sebastiangperez opened 3 years ago

Sebastiangperez commented 3 years ago

hi guys, i got this error and i did everything that you said in the docs

Im using the latest version of nuxt.js

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

found in

---> <Pages/index.vue> at pages/index.vue

at layouts/default.vue Any tougths ?
josh-unwin commented 3 years ago

I'm getting the same thing. Finding the docs quite confusing.

Sebastiangperez commented 3 years ago

@josh-unwin , yes, is not very helpfull, they need to change a little bit the documentation, i have to install another package for node "@fortawesome/fontawesome-free": "^5.15.1",

and i have this in the nuxt

'@nuxtjs/fontawesome',

and this in nuxt.config.js 

fontawesome: {
    component: 'fa',
    icons: {
      solid: true,
      brands:true

    }
  },

Maybe this will help you. and i uses like this :

<fa icon="film" />

Sebastiangperez commented 3 years ago

@josh-unwin did it work ??

josh-unwin commented 3 years ago

Hey thanks @Sebastiangperez, I only just went back to this project, yep that's working now! Thanks!

pimlie commented 3 years ago

@Sebastiangperez They includes you, you are part of the nuxt-community too! ;)

Could you please have a look at submitting a PR with changes to make the docs more understandable?

JoseFortunato commented 3 years ago

Hello,

I have similar issue. I have working perfectly in pages, but when a try to use in components and layouts, i have de same message: Unknown custom element: <fa> - did you register the component correctly?

I tried the suggestion of @Sebastiangperez, but didn't work to me.

schneefux commented 3 years ago

See the component option:

component Default: FontAwesomeIcon

Installing another package is not necessary. You need to use <FontAwesomeIcon> instead of <fa>. <fa> is only available if you set component: 'fa' in the options. The readme examples mix both styles.