` 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_",[2930,2933],{"name":2931,"color":2932},"3.x","29bc7f",{"name":2934,"color":2935},"pending triage","E99695",25005,"closed","Href use svg symbol","2024-01-02T14:01:38Z","https://github.com/nuxt/nuxt/issues/25005",0.6981386,{"description":2943,"labels":2944,"number":2948,"owner":2904,"repository":2904,"state":2937,"title":2949,"updated_at":2950,"url":2951,"score":2952},"1. I import a svg component, like this\r\n\r\n\u003Ctemplate>\r\n \u003Csvg class=\"svg-icon\" aria-hidden=\"true\">\r\n \u003Cuse :xlink:href=\"iconName\">\u003C/use>\r\n \u003C/svg>\r\n\u003C/template>\r\n\u003Cscript>\r\n export default {\r\n name: 'icon-svg',\r\n props: {\r\n iconClass: {\r\n type: String,\r\n required: true\r\n }\r\n },\r\n computed: {\r\n iconName() {\r\n return `#icon-${this.iconClass}`\r\n }\r\n }\r\n }\r\n\u003C/script>\r\n\r\n2.export in 'components/common/index.js'\r\nexport { default as Iconsvg } from './Icon-svg'\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/c6867\">#c6867\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2945],{"name":2946,"color":2947},"2.x","d4c5f9",3203,"svg can't be used in nuxt.js","2023-01-18T16:23:47Z","https://github.com/nuxt/nuxt/issues/3203",0.69957143,{"description":2954,"labels":2955,"number":2957,"owner":2904,"repository":2904,"state":2937,"title":2958,"updated_at":2959,"url":2960,"score":2961},"Finally found a bug that was hiding from me for some months now 🔍\r\nPerhaps related to #1460.\r\n\r\nI have some SVG components like this, really just a pug SVG:\r\n\r\n```vue\r\n\u003Ctemplate lang=\"pug\">\r\nsvg.a(class='car', xmlns='http://www.w3.org/2000/svg', width='440', height='440', viewbox='0 0 440 440')\r\n style.\r\n .a{stroke:null;vector-effect:non-scaling-stroke;}.b{stroke:null;}.c{fill:#8e8e8e;stroke:null;}\r\n metadata.b image/svg+xml\r\n defs.b\r\n clippath.a(clippathunits='userSpaceOnUse')\r\n path.a(d='m0 2400 2400 0 0-2400-2400 0 0 2400z')\r\n g.b\r\n title.b background\r\n rect(height='442', width='442', y='-1', x='-1', style='fill:none;stroke:null')\r\n g.b\r\n title.b Layer 1\r\n g.b\r\n path.c(d='m72.2 72.9c-13.6 13.6-13.5 35.5 0 49.1 13.6 13.6 35.5 13.6 49.1 0 13.6-13.6 13.6-35.5 0-49.1-13.6-13.6-35.5-13.6-49.1 0m80.1-28.8 30.1 30.1c2.2 2.2 2.2 5.9 0 8.1-27.5 27.5 5.9 71.1 26.1 91.3l73.7 73.7c9.8 9.8 9.8 25.8 0 35.6-9.8 9.8-25.8 9.8-35.6 0l-73.7-73.7c-20.2-20.2-63.7-53.6-91.3-26.1-2.2 2.2-5.9 2.2-8.1 0l-30.1-30.1 5.6-5.6-2-2-5.6 5.6-29.8-29.8c-2.2-2.2-2.2-5.9 0-8.1l12-12c-2.3-20.2 4.3-41.3 19.9-56.8 15.5-15.5 36.6-22.1 56.8-19.9l12-12c2.2-2.2 5.9-2.2 8.1 0l29.8 29.8-5.6 5.6 2 2 5.6-5.6z')\r\n g.b\r\n path(d='m396.1 275.6-120.6 120.6c-1.5 1.5-4.1 1.5-5.6 0l-5.6-5.6c-1.5-1.5-1.5-4.1 0-5.6l120.6-120.6c1.5-1.5 4.1-1.5 5.6 0l5.6 5.6c1.5 1.5 1.5 4.1 0 5.6m-16.8-16.8-120.6 120.6c-1.5 1.5-4.1 1.5-5.6 0l-78.5-78.5c-1.5-1.5-1.5-4.1 0-5.6l120.6-120.6c1.5-1.5 4.1-1.5 5.6 0l78.5 78.5c1.5 1.5 1.5 4.1 0 5.6m39.3 39.3-120.6 120.6c-1.5 1.5-4.1 1.5-5.6 0l-11.2-11.2c-1.5-1.5-1.5-4.1 0-5.6l120.6-120.6c1.5-1.5 4.1-1.5 5.6 0l11.2 11.2c1.5 1.5 1.5 4.1 0 5.6', style='fill:#ff3232;stroke:null')\r\n g.b\r\n path.c(d='m281 248.6c-9.1-9.1-23.8-9.1-32.9 0-9.1 9.1-9.1 23.8 0 32.9 9.1 9.1 23.8 9.1 32.9 0 9.1-9.1 9.1-23.8 0-32.9')\r\n\u003C/template>\r\n\r\n\u003Cstyle lang=\"scss\" scoped>\r\nsvg.car {\r\n transform: rotate(-90deg) !important;\r\n margin-top: 2px !important;\r\n}\r\n\u003C/style>\r\n```\r\n\r\nThe problem occurs when the component gets inserted into the html. Some \"optimization engine\" changes the `viewBox` attribute of the SVG element to lowercase. The result: The `viewBox` attribute is ignored by the browser.\r\nThis issue sometimes disappears only to reappear again the next time I run `yarn dev`.\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/c2131\">#c2131\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2956],{"name":2946,"color":2947},2456,"SVGs generated by NUXT are broken (viewBox attribute)","2023-01-18T15:55:18Z","https://github.com/nuxt/nuxt/issues/2456",0.70018315,{"description":2963,"labels":2964,"number":2966,"owner":2904,"repository":2904,"state":2937,"title":2967,"updated_at":2968,"url":2969,"score":2970},"I am trying to integrate https://www.npmjs.com/package/vue-svg-loader for loading SVG icons inline as vue components.\r\n\r\nI have the following in my nuxt.config file:\r\n\r\n```\r\n{\r\n test: /\\.(svg)$/,\r\n loader: 'vue-svg-loader', // `vue-svg` for webpack 1.x \r\n }, {\r\n test: /\\.(png|jpe?g|gif|svg)$/,\r\n loader: 'url-loader',\r\n exclude: /(\\/icons)/,\r\n query: {\r\n limit: 10000, // 10KO\r\n name: 'img/[name].[hash].[ext]'\r\n }\r\n}\r\n```\r\n\r\nIt seems that the svg files are still being converted to base64 by the url-loader even though I have excluded the path to the svg directory.\r\n\r\nIs there a different way to overwrite the url-loader to ignore svg files?\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/c1182\">#c1182\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2965],{"name":2946,"color":2947},1332,"Nuxtjs + Vue-svg-loader","2023-01-18T15:41:42Z","https://github.com/nuxt/nuxt/issues/1332",0.7054589,{"description":2972,"labels":2973,"number":2976,"owner":2904,"repository":2904,"state":2937,"title":2977,"updated_at":2978,"url":2979,"score":2980},"### Version\n\n[v1.4.2](https://github.com/nuxt.js/releases/tag/v1.4.2)\n\n### Reproduction link\n\n[https://github.com/agrajak/nuxt_text_recruit](https://github.com/agrajak/nuxt_text_recruit)\n\n### Steps to reproduce\n\nnuxt generate.\nmy static website is hosted in https://agrajak-8d93e.firebaseapp.com/\n\n\n### What is expected ?\n\nIn pages/index.vue, When I see my site with Chrome Developer Tools, Every \u003Cfont-awesome-icon> should be rendered to \u003Csvg ~~~> \n\n\n\n\n\n### What is actually happening?\n\nsome of \u003Cfont-awesome-icon> are rendered to \u003Csvg ~>(in .sticky-nav, you can see it when you scroll down) \nand the others are still rendered to \u003Cfont-awesome-icon> and also show nothing. (in top component)\n\n\n\n\n\n\n### Additional comments?\n\nSite works pretty well in nuxt start.\nI also checked turning off SSR options in nuxt.config.js\n\n {src: '~plugins/fullpage', ssr: false}\nand font-awesome librarys are declared in plugins/fullpage.js\n\nIf this issue is not a bug, just let me know how to fix it.\nthank you.\n\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c7640\">#c7640\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2974,2975],{"name":2934,"color":2935},{"name":2946,"color":2947},3808,"nuxt generate doesn't render every components","2023-01-22T15:30:05Z","https://github.com/nuxt/nuxt/issues/3808",0.71510535,{"description":2982,"labels":2983,"number":2985,"owner":2904,"repository":2904,"state":2937,"title":2986,"updated_at":2987,"url":2988,"score":2989},"This isn't an issue with `Nuxt` core itself, but I want to highlight some critical problems with the `@nuxtjs/svg-sprite` module that could impact projects in the wild. It's advisable to profile and test your application to ensure it isn't affected by these issues.\n\n@danielroe I thought it would be helpful to post this in the `Nuxt` repository and leave it open until they are resolved, if you don't mind.\n\n### Issues\n\n1. **Memory Leak in Production**\n - Memory continuously grows without GC triggering\n - Results in JavaScript Heap Out of Memory errors\n - Occurs regardless of Node memory settings\n - Ocurrs even for a simple page with only a few icons and no content at all\n\n2. **Unnecessary Bundle Hash Regeneration**\n - All bundle file hashes change on every build, even when there are no modifications to the SVGs, although the svg sprite hash itself does not change.\n - Forces unnecessary client downloads on every deployment\n - Invalidates CDN caches unnecessarily\n\n3. **Hydration Mismatch Issues** (rare but happens)\n - Hydration mismatches with `\u003Csvg-icon>` component\n\n### Related Issues\n- Memory Leak: https://github.com/nuxt-modules/svg-sprite/issues/331\n- Bundle Hash: https://github.com/nuxt-modules/svg-sprite/issues/332\n\n### Workarounds\n1. For Memory Leak:\n - Wrap `\u003Csvg-icon>` components in `\u003Cclient-only>`\n\n2. For Bundle Hash: (not available)\n - Remove the module entirely (look for other solutions) because the module appears to be unmaintained.\n\n### Reproduction\nhttps://github.com/raminjafary/nuxt-svg-sprite-module-repro\n",[2984],{"name":2934,"color":2935},32246,"[Informative] Memory Leak & Bundle Hash Issues (Not a Nuxt Core Issue)","2025-05-31T07:52:39Z","https://github.com/nuxt/nuxt/issues/32246",0.7156792,{"description":2991,"labels":2992,"number":2994,"owner":2904,"repository":2904,"state":2937,"title":2995,"updated_at":2996,"url":2997,"score":2998},"I know this has been asked before but no matter what I try I can't seem to make it work. \r\nI want to use a component that will render my svg icons inline.\r\n\r\nThis is my nuxt.config.js\r\n```\r\nbuild: {\r\n /*\r\n ** Run ESLINT on save\r\n */\r\n extend (config, ctx) {\r\n if (ctx.isClient) {\r\n config.module.rules.push({\r\n enforce: 'pre',\r\n test: /\\.(js|vue)$/,\r\n loader: 'eslint-loader',\r\n exclude: /(node_modules)/\r\n },\r\n {\r\n test: /\\.svg$/,\r\n include: /assets\\/svg/,\r\n use: [\r\n {\r\n loader: 'svg-inline-loader'\r\n }\r\n ]\r\n },\r\n {\r\n test: /\\.(png|jpe?g|gif)$/,\r\n loader: 'url-loader',\r\n exclude: /assets\\/svg/,\r\n query: {\r\n limit: 1000, // 1KO\r\n name: 'img/[name].[hash:7].[ext]'\r\n }\r\n })\r\n }\r\n },\r\n }\r\n```\r\n\r\nand this is my component: \r\n\r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cspan :class=\"'icon-' + name\" class=\"icon\" v-html=\"url\">\u003C/span>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\n export default {\r\n props: ['name'],\r\n computed: {\r\n url () {\r\n return require(`~/assets/svg/${this.name}.svg`)\r\n }\r\n }\r\n }\r\n\u003C/script>\r\n```\r\nAnd this is what gets rendered:\r\n\u003Cimg width=\"452\" alt=\"screenshot 2017-08-07 21 15 42\" src=\"https://user-images.githubusercontent.com/5978397/29042046-a2b7b058-7bb5-11e7-9ba9-e0d33b5e7016.png\">\r\n\r\n\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/c1165\">#c1165\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2993],{"name":2946,"color":2947},1315,"Can't make svg-inline-loader work","2023-01-18T15:41:02Z","https://github.com/nuxt/nuxt/issues/1315",0.7181517,["Reactive",3000],{},["Set"],["ShallowReactive",3003],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fB_-DvW83LR4CeaPEKpzc6FEz8Zmf16svzkefYZvAxY8":-1},"/nuxt/icon/106"]