\r\n \u003CNuxt />\r\n \u003CFooter/>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\nimport Footer from \"~/components/Footer\";\r\nimport Header from \"~/components/Header\";\r\n\r\nexport default {\r\n components: {\r\n Footer,\r\n Header\r\n }\r\n}\r\n\u003C/script>\r\n\r\n\u003Cstyle>\r\n body {\r\n margin: 0;\r\n }\r\n\u003C/style>\r\n```\r\n\r\n\r\n \"@nuxt/typescript-runtime\": \"^2.0.0\",\r\n \"@nuxtjs/axios\": \"^5.12.5\",\r\n \"@storefront-ui/vue\": \"^0.9.1\",\r\n \"axios\": \"^0.21.1\",\r\n \"core-js\": \"^3.6.5\",\r\n \"js-cookie\": \"^2.2.1\",\r\n \"nuxt\": \"^2.14.6\"",[1984,1987],{"name":1985,"color":1986},"pending triage","E99695",{"name":1988,"color":1989},"2.x","d4c5f9",8643,"nuxt","closed","Unknown custom element: \u003CSfHeader> - did you register the component correctly?","2023-01-22T15:38:40Z","https://github.com/nuxt/nuxt/issues/8643",0.63152164,{"description":1998,"labels":1999,"number":2001,"owner":1991,"repository":1991,"state":1992,"title":2002,"updated_at":2003,"url":2004,"score":2005},"Hello I am trying to convert my existing Vuejs app into nuxt.js.\r\n\r\nI am using buidcons and those are working in vuejs but with nuxtjs I am getting this error\r\n\r\n[Vue warn]: Unknown custom element: \u003Cbi> - did you register the component correctly? For recursive components, make sure to provide the \"name\" option.\r\n\r\nHere is my code\r\n\r\n```\r\n\u003Cnuxt-link to=\"/newuser\" @click=\"leftmenu\" class=\"head\">\r\n \u003Cbi class=\"budicon-cloud-download\"> \u003C/bi>\r\n\u003C/nuxt-link>\r\n```\r\nThis is my buidcons.css file\r\n\r\n```\r\n@font-face {\r\n font-family: 'budicon-classic';\r\n src: url('/static/fonts/Budicons/budicon-classic.eot?jdete2');\r\n src: url('/static/fonts/Budicons/budicon-classic.eot?jdete2#iefix') format('embedded-opentype'),\r\n url('/static/fonts/Budicons/budicon-classic.ttf?jdete2') format('truetype'),\r\n url('/static/fonts/Budicons/budicon-classic.woff?jdete2') format('woff'),\r\n url('/static/fonts/Budicons/budicon-classic.svg?jdete2#budicon-classic') format('svg');\r\n font-weight: normal;\r\n font-style: normal;\r\n}\r\n\r\nbi {\r\n font-family: 'budicon-classic' !important;\r\n font-style: normal;\r\n font-weight: 400;\r\n font-variant: normal;\r\n text-transform: none;\r\n margin-right: 4px;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n}\r\n```\r\n\r\nWould you please help me how I can solve this\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2504\">#c2504\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2000],{"name":1988,"color":1989},2877,"Unknown custom element","2023-01-18T16:09:43Z","https://github.com/nuxt/nuxt/issues/2877",0.6356974,{"description":2007,"labels":2008,"number":2013,"owner":1991,"repository":1991,"state":1992,"title":2014,"updated_at":2015,"url":2016,"score":2017},"### Environment\n\nNuxi 3.2.2 \r\n------------------------------\r\n- Operating System: `Windows_NT`\r\n- Node Version: `v18.14.1`\r\n- Nuxt Version: `3.2.2`\r\n- Nitro Version: `2.2.3`\r\n- Package Manager: `npm@9.3.1`\r\n- Builder: `vite`\r\n- User Config: `components`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\n\n### Reproduction\n\nReproduce Link: https://stackblitz.com/edit/github-tznxrd\r\n\r\n1. npx nuxi init demo\r\n2. cd demo\r\n3. npm install\r\n4. mkdir -p components/layouts\r\n5. edit nuxt.config.ts\r\n **nuxt.config.ts**\r\n ```\r\n export default defineNuxtConfig({\r\n components: [\r\n { path: '~/components/layouts', prefix: 'Special' },\r\n '~/components'\r\n ]\r\n })\r\n ```\r\n\r\n\r\n6. create **header.vue** under components/layouts\r\n ```\r\n \u003Ctemplate>\r\n \u003Cdiv>\r\n Header\r\n \u003C/div>\r\n \u003C/template>\r\n ```\r\n\r\n7. import header.vue in **app.vue**\r\n ```\r\n \u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CHeader />\r\n \u003CNuxtWelcome />\r\n \u003C/div>\r\n \u003C/template>\r\n \r\n \u003Cscript>\r\n import Header from '~/components/layouts/header.vue';\r\n \u003C/script>\r\n ```\r\n\r\n\r\n8. npm run dev\r\n\n\n### Describe the bug\n\n[Vue warn]: Failed to resolve component: Header\r\nIf this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. \n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2009,2012],{"name":2010,"color":2011},"3.x","29bc7f",{"name":1985,"color":1986},19310,"If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.","2023-02-27T12:15:17Z","https://github.com/nuxt/nuxt/issues/19310",0.65647894,{"description":2019,"labels":2020,"number":2023,"owner":1991,"repository":1991,"state":1992,"title":2024,"updated_at":2025,"url":2026,"score":2027},"### Environment\n\nStackblitz\r\n\r\n```\r\nWorking directory: /home/projects/github-vom1ml 10:32:25 AM\r\nNuxt project info: 10:32:25 AM\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.9.3\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n```\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-vom1ml?file=plugins%2Ffontawesome.ts,app.vue\n\n### Describe the bug\n\nI was following the installation guide of FontAwesome for Nuxt 3 at https://fontawesome.com/docs/web/use-with/vue/use-with#nuxt\r\n\r\nBasically, it says that to add a global `\u003CFontAwesomeIcon>` component, you need to register it using:\r\n\r\n```js\r\nexport default defineNuxtPlugin((nuxtApp) => {\r\n nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon)\r\n})\r\n```\r\n\r\nAnd yes, the component is working and the icon does show up. But VSCode does not recognize this component, it shows `unknown`. Which means it does not have autocomplete for props, type checking etc.\r\n\r\nScreenshot:\r\n\r\n\r\nThis happens with any 3rd party component that I want to register globally using `vueApp.component(...)`. I have Volar installed and my local auto-imported components are indeed recognized. Also I see that all Nuxt components are also recognized like `\u003CNuxtLayout>` and `NuxtLoadingIndicator` etc.\r\n\r\nSo why aren't my own custom-registered 3rd party components recognized? Is it the wrong approach to use `nuxtApp.vueApp.component()`?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2021,2022],{"name":2010,"color":2011},{"name":1985,"color":1986},25371,"Nuxt does not recognize globally registered components (type: unknown)","2024-01-22T17:23:26Z","https://github.com/nuxt/nuxt/issues/25371",0.66564244,{"description":2029,"labels":2030,"number":2033,"owner":1991,"repository":1991,"state":1992,"title":2034,"updated_at":2035,"url":2036,"score":2037},"### Environment\r\n\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.8.2\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.0\r\n- Package Manager: npm@9.4.2\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-starter-4byrfr?file=modules%2Fcode-block.ts,app.vue\r\n\r\n### Describe the bug\r\n\r\nI have installed a vue component from NPM and created a nuxt module for it:\r\n\r\n```javascript\r\nimport { defineNuxtModule, addComponent } from '@nuxt/kit'\r\n\r\nexport default defineNuxtModule({\r\n setup() {\r\n addComponent({\r\n name: 'VCodeBlock',\r\n export: 'VCodeBlock',\r\n filePath: '@wdns/vue-code-block',\r\n mode: \"client\",\r\n })\r\n },\r\n})\r\n```\r\n\r\nHowever, despite `mode: \"client\"` whenever I put it in a nuxt page, layout or component I still get an ssr related issue\r\n\r\n```\r\nIf this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.\r\n[Vue warn]: Component \u003CAnonymous> is missing template or render function.\r\n```\r\nI also have the same error if I just import the component without using nuxt modules \r\nIf I completely disable SSR, it works fine. \r\n\r\nIf I remove mode client, it's worse : it says window is undefined\r\n\r\nI would assume the problem is that the module is client side... but the component use it in isn't, therefore it's rendered before it should. \r\n\r\nIt does feel like a bug however because you'd assume mode client would work. What does `mode:client` do exactly ? \r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n```shell-script\r\nIf this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.\r\n[Vue warn]: Component \u003CAnonymous> is missing template or render function.\r\n```\r\n",[2031,2032],{"name":2010,"color":2011},{"name":1985,"color":1986},24478,"node_modules component in nuxt modules : I still get SSR related errors despite `mode:client`","2023-11-28T23:34:19Z","https://github.com/nuxt/nuxt/issues/24478",0.6745594,{"description":2039,"labels":2040,"number":2043,"owner":1991,"repository":1991,"state":1992,"title":2044,"updated_at":2045,"url":2046,"score":2047},"### Environment\n\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.9.0\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@9.4.2\r\n- Builder: -\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\n[StackBlitz](https://stackblitz.com/edit/nuxt-examples-7qpsts?file=pages%2Findex.vue) reproduction\n\n### Describe the bug\n\n[Vue Router warn]: No match found for location with path \"/assets/sprite/gen/svg-symbols.svg/\" in console\r\n\r\nUISvgIcon component that draw icon as svg sprite but after update version of nuxt it's broken. it looks like nuxt doesn't recognize this as a link because other files in the root are opening correctly.\r\n\r\nthis worked until the nuxt version 3.8.2\n\n### Additional context\n\nI'm sorry, I have one more question. After update appeared warn: \r\n`[nuxt] Your project has layouts but the `\u003CNuxtLayout />` component has not been used.`\r\n\r\nthis is also in the same stackblitz. Layout works fine.\r\nExplain me please is this way to do layouts is worng and i have to use App.vue ?\n\n### Logs\n\n_No response_",[2041,2042],{"name":2010,"color":2011},{"name":1985,"color":1986},25005,"Href use svg symbol","2024-01-02T14:01:38Z","https://github.com/nuxt/nuxt/issues/25005",0.67549556,{"description":2049,"labels":2050,"number":2056,"owner":1991,"repository":1991,"state":1992,"title":2057,"updated_at":2058,"url":2059,"score":2060},"### Environment\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v18.15.0`\r\n- Nuxt Version: `3.8.0`\r\n- CLI Version: `3.9.1`\r\n- Nitro Version: `2.7.2`\r\n- Package Manager: `yarn@1.22.19`\r\n- Builder: `-`\r\n- User Config: `modules`, `experimental`, `ssr`, `vue`, `runtimeConfig`\r\n- Runtime Modules: `@nuxt/content@2.9.0`, `@nuxt/ui@2.10.0`, `@nuxthq/studio@0.14.1`, `nuxt-headlessui@1.1.4`, `@nuxt/devtools@1.0.0`, `nuxt-monaco-editor@1.2.3`\r\n- Build Modules: `-`\r\n\r\n\r\n### Reproduction\r\n\r\n- Define a custom element in the nuxt.config.ts file using the isCustomElement configuration.\r\n```\r\nVue: {\r\n compilerOptions: {\r\n isCustomElement: (tag) => {\r\n return tag === 'mjml' || /^(Mj[A-Z]|mj-)/.test(tag);\r\n }\r\n }\r\n },\r\n```\r\n- Create a component in Nuxt.js, particularly an island component and use the h() function to create elements within the component with custom element tag.\r\n```\r\n\u003Cscript lang=\"ts\">\r\nimport { h } from 'vue'\r\nimport { ContentRendererMarkdown } from '#components'\r\n\r\nexport default defineComponent({\r\n props: {\r\n path: String,\r\n },\r\n async setup(props) {\r\n if (process.dev) {\r\n const { data } = await useAsyncData(() =>\r\n queryContent(props.path!).findOne()\r\n )\r\n return () => h(ContentRendererMarkdown, { value: data.value!, tag: 'mj-column' })\r\n }\r\n const value = await queryContent(props.path!).findOne()\r\n return () => h(ContentRendererMarkdown, { value, tag: 'mj-column' })\r\n },\r\n})\r\n\u003C/script>\r\n```\r\n(thanks @danielroe for this code https://roe.dev/blog/nuxt-server-components#case-study-nuxt-content)\r\n\r\nExpected Behavior:\r\nThe custom element should be recognized and rendered without any error.\r\n\r\nActual Behavior:\r\nThe error Failed to resolve component: MjColumn occurs, indicating that the isCustomElement configuration is not being utilized in this context.\r\n\r\n### Describe the bug\r\n\r\nWhen creating elements using Vue's h() function within a Nuxt.js component, specifically in an island component, the isCustomElement configuration in the nuxt.config.js file doesn't seem to be recognized. As a result, the following error is encountered:\r\n\r\n```\r\n[Vue warn]: Failed to resolve component: MjColumn\r\nIf this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.\r\n```\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2051,2052,2053],{"name":2010,"color":2011},{"name":1985,"color":1986},{"name":2054,"color":2055},"upstream","E8A36D",24104,"Custom Elements defined in isCustomElement configuration, but warning issued when used in h()\"","2023-11-29T00:21:46Z","https://github.com/nuxt/nuxt/issues/24104",0.6757111,{"description":2062,"labels":2063,"number":2071,"owner":1991,"repository":1991,"state":1992,"title":2072,"updated_at":2073,"url":2074,"score":2075},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v16.14.2\r\n- Nuxt Version: 3.5.0\r\n- Nitro Version: 2.4.1\r\n- Package Manager: npm@7.17.0\r\n- Builder: vite\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-jblieu-fynag4\n\n### Describe the bug\n\nNuxt can no longer resolve a component if its name starts with its containing folder's name, ex:\r\n\r\ncomponent path: `components/Icon/Icones`\r\n\r\napp.vue:\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CIconIcones />\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\nconsole output:\r\n```sh\r\n[Vue warn]: Failed to resolve component: IconIcones 21:27:18\r\nIf this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.\r\n```\n\n### Additional context\n\nThe above example works in Nuxt 3.4.x\n\n### Logs\n\n_No response_",[2064,2065,2068],{"name":2010,"color":2011},{"name":2066,"color":2067},"bug","d73a4a",{"name":2069,"color":2070},"🔨 p3-minor","FBCA04",20937,"Regression: Cannot resolve component if its folder's name is a prefix of the component's name","2023-05-19T11:23:25Z","https://github.com/nuxt/nuxt/issues/20937",0.6764103,{"description":2077,"labels":2078,"number":2079,"owner":1991,"repository":2080,"state":1992,"title":2081,"updated_at":2082,"url":2083,"score":2084},"In my own projects I want to name how I build the component \"Icon\".\r\n\r\nI think as a package it would make way more sense for the component name to be \"NuxtIcon\" with an \"icon\" class instead of just \"Icon\" with name.\r\n\r\nAlso see this:\r\nhttps://vuejs.org/style-guide/rules-essential.html#use-multi-word-component-names\r\n(not super relevant due to how I would use it probably lol)\r\n\r\nI'd like to look at my own codebase and make the icon component custom, like:\r\n\r\n```html\r\n\u003C!-- Icon.vue -->\r\n\u003Ctemplate>\r\n\u003Cdiv class=\"aspect-square rounded-full h-20 text-2xl flex items-center justify-center text-white\">\r\n \u003CNuxtIcon :icon=\"icon\" />\r\n\u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\ndefineProps({ icon: String })\r\n\u003C/script>\r\n```",[],174,"icon","Can the Base component be changed to \"NuxtIcon\" instead of \"Icon\" with the \"name\" attribute?","2024-06-26T16:45:07Z","https://github.com/nuxt/icon/issues/174",0.6784253,{"description":2086,"labels":2087,"number":2090,"owner":1991,"repository":1991,"state":1992,"title":2091,"updated_at":1994,"url":2092,"score":2093},"\u003C!-- 💚 Thanks for your time to make Nuxt better with your feedbacks 💚\r\n\r\n**IMPORTANT** Before reporting a bug:\r\n\r\n- Please make sure that you have read through Nuxt documentation: https://nuxtjs.org\r\n- If issue is related to a module please create the issue in corresponding repository\r\n- Ensure using latest version of nuxt dependencies using `yarn upgrade nuxt` or `npm upgrade nuxt`\r\n\r\n👍 A properly detailed bug report can save a LOT of time and help fixing issues as soon as possible.\r\n-->\r\n\r\n### Versions\r\n\r\n- nuxt: 2.14.12\r\n- node: v12.14.0\r\n\r\n### Reproduction\r\n\r\nI add native webcomponent ([custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)) to template:\r\n\r\n```html\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n {{ message }}\r\n \u003Cinstagram-widget username=\"@ptkdev\" grid=\"3x3\">\u003C/instagram-widget> \u003C!-- this is html5 custom element -->\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript lang=\"ts\">\r\nimport Vue from 'vue'\r\nimport '@ptkdev/webcomponent-instagram-widget'; // available on npm\r\n\r\nexport default Vue.extend({\r\n\r\n data () {\r\n const message: string = 'This is a message'\r\n\r\n return {\r\n message\r\n }\r\n }\r\n})\r\n\u003C/script>\r\n\r\n```\r\n\r\nNuxtjs go to loop and don't load the page on localhost. I see docs of vue and i need (imho) [Autonomous Custom Elements](https://v3.vuejs.org/guide/migration/custom-elements-interop.html#autonomous-custom-elements) but how i can add my custom element to ignoredElements? Where i find `ignoredElements` on nuxtjs?\r\n\r\n### Steps to reproduce\r\n- Install `npm install @ptkdev/webcomponent-instagram-widget --save`\r\n- Import custom element javascript\r\n- Add html tag ` \u003Cinstagram-widget username=\"@ptkdev\" grid=\"3x3\">\u003C/instagram-widget> ` to nuxtjs template\r\n\r\n### What is Expected?\r\nSee html5 custom element\r\n\r\n### What is actually happening?\r\nNuxtjs refresh page and stop working",[2088,2089],{"name":1985,"color":1986},{"name":1988,"color":1989},8666,"Autonomous Custom Elements for Nuxt","https://github.com/nuxt/nuxt/issues/8666",0.67961824,["Reactive",2095],{},["Set"],["ShallowReactive",2098],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"BE0Suk51jico_0x9MTw42jonyzhzg0LglrpM92aQ-nc":-1},"/nuxt/icon/74"]