\r\n```\r\n\r\n2. If you want to have `\u003CIcon>` load an **SFC** that is nested in folders - that's easy:\r\n\r\n```js\r\n// Assuming: `components/global/CoolStuff/MyIcon.vue`\r\n\r\n\u003CIcon name=\"CoolStuffMyIcon\" /> \r\n```\r\n\r\n3. However, if you have an elaborate set of custom icons (`.svg` extension) that are organized in folders, you would currently need an individual `.vue` icon to go along with every single one.\r\n\r\n```js\r\n// Assuming: `{public|assets}/icons/brand/MyIcon.svg\r\n// Assuming: `components/global/icons/brand/MyIcon.vue`\r\n\r\n// Assuming: `{public|assets}/icons/brand/MyOtherIcon.svg\r\n// Assuming: `components/global/icons/brand/MyOtherIcon.vue`\r\n\r\n\u003CIcon name=\"IconsBrandMyIcon\" />\r\n\u003CIcon name=\"IconsBrandMyOtherIcon\" />\r\n\r\n// etc.\r\n```\r\n\r\nThis means you need to manage a folder of SVGs as well as their matching SFCs. \r\n\r\nIs there a solution?",[1995],{"name":1996,"color":1997},"enhancement","a2eeef",75,"Feature request: A way to manage custom SVGs that are nested inside folders.","2023-08-07T11:42:42Z","https://github.com/nuxt/icon/issues/75",0.68541044,{"description":2004,"labels":2005,"number":2006,"owner":1985,"repository":1986,"state":2007,"title":2008,"updated_at":2009,"url":2010,"score":2011},"Is it possible to change the `/components/global` directory. I have checked the code of this module, but it seems to me that it could be something that's inside Nuxt 3?\r\n\r\nProposition:\r\n```js\r\n nuxtIcon: {\r\n size: \"16px\",\r\n source: '~/components/icons' // or an array with multiple values\r\n },\r\n```",[],18,"closed","Feature: Possible to change the icons directory","2023-01-19T16:59:35Z","https://github.com/nuxt/icon/issues/18",0.5873898,{"description":2013,"labels":2014,"number":2018,"owner":1985,"repository":1985,"state":2007,"title":2019,"updated_at":2020,"url":2021,"score":2022},"Hi there!\r\n\r\nI just experiencing an issue that `global components` that defined in `plugins/` directory doesn't seems to work on production build.\r\n\r\n\r\n\r\n> left : build & run on production mode\r\n> right : run development server\r\n\r\nI've assure that this issue only happened on client side rendering because i've check the server side rendering seems to work just fine.\r\n\r\n\r\n\r\nThe global component `\u003Capp-main />` is registered on `/plugins/global-components.js` file here\r\n\r\n\r\n\r\nand here my `nuxt.config.js` file\r\n\r\n```js\r\n'use strict'\r\n\r\nconst { resolve } = require('path')\r\nconst Env = use('Env')\r\n\r\nmodule.exports = {\r\n build: {\r\n publicPath: Env.get('CDN_URL', '/'),\r\n\r\n analyze: {\r\n analyzerMode: 'static',\r\n generateStatsFile: true,\r\n statsFilename: 'webpack-stats.json'\r\n },\r\n\r\n extractCSS: true,\r\n\r\n postcss: {\r\n plugins: {\r\n 'postcss-custom-properties': false\r\n }\r\n }\r\n },\r\n\r\n css: [\r\n '~assets/scss/main.scss'\r\n ],\r\n\r\n head: {\r\n htmlAttrs: {},\r\n\r\n meta: [\r\n {\r\n charset: 'utf-8'\r\n },\r\n {\r\n name: 'viewport',\r\n content: 'width=device-width,initial-scale=1'\r\n },\r\n {\r\n 'http-equiv': 'x-ua-compatible',\r\n content: 'ie=edge,chrome=1'\r\n },\r\n {\r\n name: 'theme-color',\r\n content: '#ffffff'\r\n }\r\n ],\r\n\r\n link: [\r\n {\r\n rel: 'shortcut icon',\r\n type: 'image/x-icon',\r\n href: '/favicon.ico'\r\n },\r\n {\r\n rel: 'apple-touch-icon',\r\n size: '192x192',\r\n href: '/mobile-icon.png'\r\n },\r\n {\r\n rel: 'icon',\r\n type: 'image/png',\r\n size: '192x192',\r\n href: '/mobile-icon.png'\r\n },\r\n {\r\n rel: 'icon',\r\n type: 'image/png',\r\n size: '32x32',\r\n href: '/favicon.png'\r\n },\r\n {\r\n rel: 'stylesheet',\r\n href: 'https://fonts.googleapis.com/css?family=Montserrat:300,400,600'\r\n }\r\n ],\r\n\r\n noscript: [{\r\n innerHtml: `\r\n \u003Ch1>Javascript Disabled\u003C/h1>\r\n \u003Cp>It appears that you do not have Javascript enabled. This application relies on Javascript for most of our features.\u003Cp>\r\n \u003Cp>Please enable Javascript and \u003Ca href=\".\">reload\u003C/a> in order to use this site.\u003C/p>\r\n `}]\r\n },\r\n\r\n loading: {\r\n color: '#589d8d'\r\n },\r\n\r\n plugins: [\r\n '~/plugins/global-components.js'\r\n ],\r\n\r\n router: {\r\n base: '/',\r\n linkActiveClass: '',\r\n linkExactActiveClass: 'is-active',\r\n\r\n scrollBehaviour: () => ({\r\n x: 0,\r\n y: 0\r\n }),\r\n\r\n extendRoutes: (routes) => {\r\n routes.forEach((route) => {\r\n route.meta = {\r\n title: route.name\r\n }\r\n })\r\n }\r\n },\r\n\r\n buildDir: resolve(__dirname, '..', 'public'),\r\n srcDir: resolve(__dirname, '..', 'resources')\r\n}\r\n```\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/c2492\">#c2492\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2015],{"name":2016,"color":2017},"2.x","d4c5f9",2868,"global components non rendered properly on production build?","2023-01-18T16:09:43Z","https://github.com/nuxt/nuxt/issues/2868",0.66385734,{"description":2024,"labels":2025,"number":2026,"owner":1985,"repository":1986,"state":2007,"title":2027,"updated_at":2028,"url":2029,"score":2030},"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,"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.66757584,{"description":2032,"labels":2033,"number":2035,"owner":1985,"repository":1985,"state":2007,"title":2036,"updated_at":2037,"url":2038,"score":2039},"In every component or page we create we end up having tons of `import \"components/component/SomeComponent.vue\"` states for basic elements like regions, layouts, grids & columns. Is there a way in nuxt to define those components globally so they are known in subcomponents? Something like `import \"components/frame/Frame.vue\"` that contains the imports for regions, layouts, grids & columns. \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/c363\">#c363\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2034],{"name":2016,"color":2017},421,"Define global components","2023-01-18T22:17:23Z","https://github.com/nuxt/nuxt/issues/421",0.6767521,{"description":2041,"labels":2042,"number":2047,"owner":1985,"repository":1985,"state":2007,"title":2048,"updated_at":2049,"url":2050,"score":2051},"### Reproduction link\n\n[https://github.com/meta7x/nuxt-global-components-bug](https://github.com/meta7x/nuxt-global-components-bug)\n\n### Steps to reproduce\n\n- Download reproduction repository\n- Run '$npm install' in the root directory\n- [optional] run $npm run dev: the page renders the expected result with the global component showing under the Nuxt logo.\n- '$cd functions' and run '$npm install' to install Nuxt inside the functions folder\n- '$cd .. $npm run dev': the page renders, but there is no global component and there is an error message in the console\n- run '$cd functions $npm remove nuxt' to get everything working again\n\n### What is expected ?\n\nNuxt is still expected to render the page the same way as before.\n\n### What is actually happening?\n\nInstead it registers the component correctly, which can be seen in the console logs, but at the same time it throws an error \"unknown custom element\". Local components still work fine, as can be seen with the Nuxt logo.\n\nPossibly global mixins don't work either, but I haven't tested that in an isolated environment, also because I'm not quite sure what the correct way to global mixins is in Nuxt.\n\n### Additional comments?\n\nThe reason I want to build to build into the functions directory is because I want to SSR with Firebase Functions, which needs to import the Nuxt-class in order to create a Nuxt-instance. Have a look at functions/index.js to see what exactly needs to happen for the app to SSR.\nI've been tracking down this error for some time now and it really seems to all come down to whether the second Nuxt-module is inside the functions folder.\nBuilding to any other folder works fine and the public path also doesn't seem to have a big influence.\n\nFiles of importance:\n- components/GlobalComponent.vue: an example component that I would like to use globally\n- plugins/global.js: for registering the global component\n- pages/index.vue: the global component is used there alongside a local component\n- functions/index.js: the code that is supposed to SSR the app\n- nuxt.config.js - obviously\n\nIf there's a workaround anyone can come up with, I'd be glad to hack my way around this problem as well. Just importing every component in every other component isn't a great solution though, especially since I have a hunch that my global mixin isn't working for the same reason.\n\n\u003C!--cmty-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c7179\">#c7179\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2043,2046],{"name":2044,"color":2045},"pending triage","E99695",{"name":2016,"color":2017},3397,"Nuxt fails to load global components when built to functions directory for Firebase Functions SSR","2023-01-22T15:30:04Z","https://github.com/nuxt/nuxt/issues/3397",0.6889169,{"labels":2053,"number":2057,"owner":1985,"repository":1985,"state":2007,"title":2058,"updated_at":2059,"url":2060,"score":2061},[2054],{"name":2055,"color":2056},"3.x","29bc7f",13342,"Nuxt config components dirs behavior","2023-01-19T17:03:04Z","https://github.com/nuxt/nuxt/issues/13342",0.68960893,{"description":2063,"labels":2064,"number":2075,"owner":1985,"repository":1985,"state":2007,"title":2076,"updated_at":2077,"url":2078,"score":2079},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.11.1\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.4\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\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-starter-jldudq?file=modules%2Fregister-component.js\r\n\r\n### Describe the bug\r\n\r\nI'm importing the \"@tabler/icons-vue\" library and I want to globally register some of the icons so I can show them using as dynamic components via `\u003Ccomponent :is=\"a\" />`\r\n\r\nIf global is set to false everything works as expected and i can render the component using it's name.\r\nSetting global to true throws this error:\r\n\r\n`Uncaught SyntaxError: The requested module '/_nuxt/node_modules/@tabler/icons-vue/dist/esm/tabler-icons-vue.mjs?nuxt_component=async&nuxt_component_name=IconAnalyze' does not provide an export named 'IconAnalyze' (at components.plugin.mjs:1:10)`\r\n\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_",[2065,2066,2069,2072],{"name":2055,"color":2056},{"name":2067,"color":2068},"bug","d73a4a",{"name":2070,"color":2071},"components","05B979",{"name":2073,"color":2074},"🔨 p3-minor","FBCA04",26471,"@nuxt/kit.addComponent fails when using external npm package + global = true","2024-04-03T09:15:37Z","https://github.com/nuxt/nuxt/issues/26471",0.69020164,{"labels":2081,"number":2082,"owner":1985,"repository":1985,"state":2007,"title":2058,"updated_at":2083,"url":2084,"score":2085},[],13605,"2023-01-19T17:02:40Z","https://github.com/nuxt/nuxt/issues/13605",0.6927336,["Reactive",2087],{},["Set"],["ShallowReactive",2090],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"tK6V5hngR0LrfmSnDnvLcyehiQ7EXqrifMqQ-1iIGW8":-1},"/nuxt/icon/60"]