nuxt / icon

The <Icon> component, supporting Iconify, Emojis and custom components.
https://stackblitz.com/edit/nuxt-icon-playground?file=app.vue
MIT License
874 stars 38 forks source link

Unknown custom element: <Icon> - did you register the component correctly? #74

Closed ricvillagrana closed 11 months ago

ricvillagrana commented 1 year ago

Installed following the steps here.

npm install --save-dev nuxt-icon

Added to my nuxt.config.ts

  modules: [
    // https://go.nuxtjs.dev/bootstrap
    'bootstrap-vue/nuxt',
    // https://go.nuxtjs.dev/pwa
    '@nuxtjs/pwa',
    // https://go.nuxtjs.dev/content
    '@nuxt/content',
    // https://nuxt.com/modules/icon
    'nuxt-icon'
  ],

Used on a component

<Icon name="logos:instagram-icon" />

The page rendered without the icon and got this on the console.

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

found in

---> <Layouts/default.vue> at layouts/default.vue
       <Root>

My dependencies

  "dependencies": {
    "@nuxt/content": "^1.0.0",
    "@nuxtjs/pwa": "^3.3.5",
    "bootstrap": "^4.6.2",
    "bootstrap-vue": "^2.22.0",
    "bootswatch": "^5.2.3",
    "core-js": "^3.25.3",
    "nuxt": "^2.15.8",
    "nuxt-icon": "^0.4.0",
    "vue": "^2.7.10",
    "vue-server-renderer": "^2.7.10",
    "vue-template-compiler": "^2.7.10"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.19.1",
    "@nuxtjs/eslint-config": "^11.0.0",
    "@nuxtjs/eslint-module": "^3.1.0",
    "eslint": "^8.24.0",
    "eslint-plugin-nuxt": "^4.0.0",
    "eslint-plugin-vue": "^9.5.1",
    "sass": "^1.62.1",
    "sass-loader": "^10.4.1"
  }
Atinux commented 1 year ago

Could you try disabling some modules and see if it works?

adnane-ka commented 1 year ago

i'm facing the same issue, i hope you solve this problem

Atinux commented 11 months ago

Please provide a reproduction and re-open.