\n \u003CClient class=\"bg-red-400\" /> \u003C!-- here --->\n \u003C/div>\n\u003C/template>\n```\n\nThe class \"bg-red-400\" is not applied to the component after rendering: \n```html\n\u003Cdiv id=\"__nuxt\">\n \u003Cdiv class=\"index\" data-v-938b83b0=\"\">\n \u003Ch1 data-v-938b83b0=\"\">Index page\u003C/h1>\n \u003Cdiv data-v-938b83b0=\"\" class=\"bg-red-400\">Im client & server\u003C/div>\n \u003Cdiv>Im client only\u003C/div> \u003C!-- here not present--->\n \u003C/div>\n\u003C/div>\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2865],{"name":2866,"color":2867},"🔨 p3-minor","FBCA04",32108,"nuxt","closed","Component with ClientOnly do not have $attrs from parent applied correctly (like class)","2025-05-17T09:42:11Z","https://github.com/nuxt/nuxt/issues/32108",0.6826114,{"description":2876,"labels":2877,"number":2878,"owner":2869,"repository":2879,"state":2870,"title":2880,"updated_at":2881,"url":2882,"score":2883},"\r\n\r\n\r\n\r\n",[],78,"icon","Excuse me, when v-for performs list rendering, the icon name will appear. May I ask what may be the problem. Thanks","2023-05-10T09:55:26Z","https://github.com/nuxt/icon/issues/78",0.702058,{"description":2885,"labels":2886,"number":2890,"owner":2869,"repository":2869,"state":2870,"title":2891,"updated_at":2892,"url":2893,"score":2894},"### Describe the feature\r\n\r\nWe have a component that renders different data server-side and client-side, so hydration mismatch is intentional. Currently we should do this:\r\n```vue\r\n\u003Cclient-only>\r\n \u003CCmsContent/> // renders FOO\r\n \u003Ctemplate #fallback>\r\n \u003CCmsContent /> // renders BAR\r\n \u003C/template>\r\n\u003C/client-only>\r\n``` \r\nI suggest extending the \u003Cclient-only> `fallback` option, to support `true` value, that will render same component on the server (but ignoring the hydration mismatch errors).\r\n```vue\r\n\u003Cclient-only fallback>\r\n \u003CCmsContent/> // renders FOO client-side and BAR server-side\r\n\u003C/client-only>\r\n``` \r\n\r\n### Additional information\r\n\r\n- [ ] Would you be willing to help implement this feature?\r\n- [ ] Could this feature be implemented as a module?\r\n\r\n### Final checks\r\n\r\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\r\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2887],{"name":2888,"color":2889},"pending triage","E99695",28316,"Allow `:fallback=\"true\"` for \u003Cclient-only> to render same component server side ignoring the \"hydration mismatch\"","2024-07-26T12:59:18Z","https://github.com/nuxt/nuxt/issues/28316",0.7041037,{"labels":2896,"number":2909,"owner":2869,"repository":2869,"state":2870,"title":2910,"updated_at":2911,"url":2912,"score":2913},[2897,2900,2903,2906],{"name":2898,"color":2899},"3.x","29bc7f",{"name":2901,"color":2902},"bug","d73a4a",{"name":2904,"color":2905},"vite","3574D1",{"name":2907,"color":2908},"upstream","E8A36D",12050,"Don't work with class-style component","2023-01-19T15:54:28Z","https://github.com/nuxt/nuxt/issues/12050",0.7099425,{"description":2915,"labels":2916,"number":2924,"owner":2869,"repository":2925,"state":2870,"title":2926,"updated_at":2927,"url":2928,"score":2929},"### Environment\n\nOperating System: Darwin\nNode Version: v20.18.0\nNuxt Version: 3.14.1592\nPackage Manager: pnpm@9.14.4\nBuilder: -\nUser Config: default\nRuntime Modules: @nuxt/ui@3.0.0-alpha.10\nBuild Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.10\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/nifty-ride-lx6qlg\n\n### Description\n\nThe same problem occurs in official documents. https://ui3.nuxt.dev/components/toast\n1. Open the Toast component of the document.\n2. Click the \"Show toast\" button to show toast.\n3. Click X to close the toast when it appears.\n4. Click the \"Show toast\" button again, and the toast that appears does not have a progress bar and does not automatically close.\n\nMy production environment project also has this problem, I hope it can be solved as soon as possible.\nAlso, the progress bar sometimes flashes, so i can expect new configurations to setting the progress bar showing is true or false.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2917,2918,2921],{"name":2901,"color":2902},{"name":2919,"color":2920},"v3","49DCB8",{"name":2922,"color":2923},"triage","ffffff",3003,"ui","The Toast component loses the progress bar and does not automatically close","2025-03-24T13:48:53Z","https://github.com/nuxt/ui/issues/3003",0.71070385,{"description":2931,"labels":2932,"number":2940,"owner":2869,"repository":2869,"state":2870,"title":2941,"updated_at":2942,"url":2943,"score":2944},"### Describe the feature\r\n\r\nWhen you have a component whose \u003Ctemplate> is globally wrapped by a \u003CClientOnly> you don't get it's first child element to inherit attributes (i.e. classes) from the parent template.\r\n\r\nParent component:\r\n`\u003Ctemplate>\r\n \u003CSubComponent class=\"nice-class\" />\r\n\u003C/template>`\r\n\r\nChild component with \u003CClientOnly>\r\n`\u003Ctemplate>\r\n \u003CClientOnly>\r\n \u003Cdiv id=\"sub-component\">\r\n ...\r\n \u003C/div>\r\n \u003C/ClientOnly>\r\n\u003C/template>`\r\n\r\nWhat I expect from my rendered SubComponent is:\r\n`\u003C div id=\"sub-component\" class=\"nice-class\">\r\n ...\r\n\u003C /div>`\r\nInstead the \"nice-class\" is lost.\r\nIf I remove the `\u003CClientOnly>` it works.\r\n\r\nThe quick solution would be to put the \u003CClientOnly> in the parent component wrapping the sub component inclusion, but sometimes is useful to have the client-only logic built-in in the components but with the possibility to quickly personalize them (i.e. classes) without having to use custom props.\r\n\r\n### Additional information\r\n\r\n- [ ] Would you be willing to help implement this feature?\r\n- [ ] Could this feature be implemented as a module?\r\n\r\n### Final checks\r\n\r\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\r\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2933,2934,2935,2937],{"name":2898,"color":2899},{"name":2888,"color":2889},{"name":2936,"color":2867},"needs reproduction",{"name":2938,"color":2939},"closed-by-bot","ededed",24194,"Component template wrapped in \u003CClientOnly> doesn't inherit attributes on first element","2023-11-19T01:50:30Z","https://github.com/nuxt/nuxt/issues/24194",0.7140457,{"description":2946,"labels":2947,"number":2951,"owner":2869,"repository":2869,"state":2870,"title":2952,"updated_at":2953,"url":2954,"score":2955},"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>",[2948],{"name":2949,"color":2950},"2.x","d4c5f9",1315,"Can't make svg-inline-loader work","2023-01-18T15:41:02Z","https://github.com/nuxt/nuxt/issues/1315",0.7142548,{"description":2957,"labels":2958,"number":2965,"owner":2869,"repository":2869,"state":2870,"title":2966,"updated_at":2967,"url":2968,"score":2969},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v20.10.0\r\n- Nuxt Version: 3.10.3\r\n- CLI Version: 3.10.1\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: typescript, devtools, modules, css, app, imports, vite, i18n\r\n- Runtime Modules: @nuxtjs/tailwindcss@6.11.4, @nuxtjs/i18n@8.1.1, @vueuse/nuxt@10.8.0, nuxt-swiper@1.2.2, @pinia/nuxt@0.5.1\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-xnzjj4?file=app.vue\r\n\r\n### Describe the bug\r\n\r\nThe error is reproduced if you use an existing component inside \"ClientOnly\". Doesn't play when using template lang=\"html\"\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n[nitro] [unhandledRejection] ReferenceError: _component_AppIcon is not defined",[2959,2962,2963,2964],{"name":2960,"color":2961},"good first issue","fbca04",{"name":2898,"color":2899},{"name":2901,"color":2902},{"name":2866,"color":2867},26137,"Component \"ClientOnly\" does not work correctly with template lang=\"pug\"","2024-03-09T12:38:09Z","https://github.com/nuxt/nuxt/issues/26137",0.71728796,{"description":2971,"labels":2972,"number":2975,"owner":2869,"repository":2869,"state":2870,"title":2976,"updated_at":2977,"url":2978,"score":2979},"### Environment\n\n------------------------------\n- Operating System: Windows_NT\n- Node Version: v20.17.0\n- Nuxt Version: 3.15.2\n- CLI Version: 3.20.0\n- Nitro Version: 2.10.4\n- Package Manager: npm@11.0.0\n- Builder: -\n- User Config: compatibilityDate, devtools\n- Runtime Modules: -\n- Build Modules: -\n------------------------------\n\n### Reproduction\n\nRepo: https://github.com/KirillTregubov/nuxt-repro\n\nDevelopment: https://codesandbox.io/p/github/KirillTregubov/nuxt-repro/main?import=true\n\nProduction: https://nuxt-repro-ten.vercel.app/\n\n### Describe the bug\n\nI was using the `\u003CClientOnly>` component and everything was going great until I tried to deploy my project to production. I noticed a bug that if the parent tags of both the client and fallback component match, and both have more than just textContent, then the nuxt page will break in production on a fresh navigation with two separate errors:\n- Cannot set properties of null (setting 'textContent')\n- Cannot read properties of null (reading 'parentNode')\n\nLooking at my repro, you will notice four routes:\n- `/` - The index route shows what happens when either the client or fallback component just have a single parent component with some textContent.\n- `/broken` - This route shows that when both client and fallback have the same parent element tag and a child element. It works in dev and in prod when loaded by a client navigation, but as soon as you reload the page (fresh prod load), it breaks with a 500 related to setting textContent.\n- `/different-broken` - This route shows a similar scenario where both client and fallback have the same parent element tag and have children elements, but the client child is wrapped with a Vue `\u003CTransition>` element. This also works in dev and in a prod client navigation, but breaks on a fresh prod navigation (refresh). In this situation, it loads the page but keeps showing the fallback and outputs errors to the console. This is the error I ran into while working on my app, and the other one is what I found after some debugging. I believe these are related.\n- `/fixed` - This route shows an identical scenario to `/broken`, but doesn't break in prod. The only change is that one of the parent elements uses a different tag. In this case, I used a `span` instead of `div`. Both children are still elements. This approach solves both issues, but the fact that this error only surfaces in production sucks.\n\n### Additional context\n\nThis is my second real dive back into Nuxt after moving from Nuxt 2 -> React in 2021. It has been interesting learning how much has changed in Nuxt 3. I'm enjoying using `script setup` and the composition API. I'm telling you this because if this is a fundamental misunderstanding of modern Vue/Nuxt, I encourage you to comment and perhaps updating the \u003CClientOnly> docs, since this is a possible pitfall other users can stumble across. But the fact that this only happens in prod makes me think this is not desired behaviour.\n\n### Logs\n\n```shell-script\nOn /broken:\n[nuxt] error caught during app initialization TypeError: Cannot set properties of null (setting 'textContent')\n at setElementText (CAK1fELc.js:19:781)\n at W (CAK1fELc.js:15:22577)\n at I (CAK1fELc.js:15:19356)\n at b (CAK1fELc.js:15:18117)\n at v (CAK1fELc.js:15:17496)\n at gt (CAK1fELc.js:15:23027)\n at W (CAK1fELc.js:15:22595)\n at I (CAK1fELc.js:15:19356)\n at b (CAK1fELc.js:15:18117)\n at v (CAK1fELc.js:15:17496)\n\nOn /different-broken:\n[nuxt] error caught during app initialization TypeError: Cannot read properties of null (reading 'parentNode')\n at remove (CAK1fELc.js:19:371)\n at P (CAK1fELc.js:15:25268)\n at Dt (CAK1fELc.js:15:25421)\n at ke (CAK1fELc.js:15:25055)\n at gt (CAK1fELc.js:15:23730)\n at W (CAK1fELc.js:15:22595)\n at I (CAK1fELc.js:15:19356)\n at b (CAK1fELc.js:15:18117)\n at v (CAK1fELc.js:15:17496)\n at gt (CAK1fELc.js:15:23027)\nUncaught (in promise) TypeError: Cannot destructure property 'bum' of 'p' as it is null.\n at Gn (CAK1fELc.js:15:25500)\n at ke (CAK1fELc.js:15:24835)\n at De (CAK1fELc.js:15:25824)\n at ke (CAK1fELc.js:15:25042)\n at De (CAK1fELc.js:15:25824)\n at ke (CAK1fELc.js:15:25042)\n at Gn (CAK1fELc.js:15:25587)\n at ke (CAK1fELc.js:15:24835)\n at De (CAK1fELc.js:15:25824)\n at ke (CAK1fELc.js:15:24999)\n```",[2973,2974],{"name":2901,"color":2902},{"name":2866,"color":2867},30638,"ClientOnly issue with fallback","2025-01-20T06:50:12Z","https://github.com/nuxt/nuxt/issues/30638",0.7198001,{"description":2981,"labels":2982,"number":2991,"owner":2869,"repository":2869,"state":2870,"title":2992,"updated_at":2993,"url":2994,"score":2995},"### Environment\r\n\r\n```\r\n❯ npx nuxi info\r\nNuxi 3.0.0\r\n\r\nRootDir: /home/projects/github-dpyktf-owfxvw\r\nNuxt project info: \r\n\r\n------------------------------\r\n- Operating System: `Linux`\r\n- Node Version: `v16.14.2`\r\n- Nuxt Version: `3.0.0`\r\n- Nitro Version: `1.0.0`\r\n- Package Manager: `npm@7.17.0`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\r\n```\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-dpyktf-owfxvw?file=app.vue\r\n\r\n### Describe the bug\r\n\r\n[Template refs](https://vuejs.org/guide/essentials/template-refs.html) are not available on [client-side only components](https://nuxt.com/docs/guide/directory-structure/components#client-components) defined in `.client` files.\r\n\r\nIt works as expected on components not having `.client` in their file name. It makes no difference if SSR is enabled or not. As long as a components file name ends with `.client` the ref is not set as expected on `onMounted`.\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n\r\nConsole logs from the linked StackBlitz example:\r\n\r\n```\r\n{component: 'FocusInput', ref: input}\r\n{component: 'FocusInputBroken', ref: null}\r\n```\r\n",[2983,2986,2987,2988],{"name":2984,"color":2985},"documentation","5319e7",{"name":2898,"color":2899},{"name":2901,"color":2902},{"name":2989,"color":2990},"🍰 p2-nice-to-have","0E8A16",15551,"Template refs in .client components not available at `onMounted()`","2023-01-19T17:54:02Z","https://github.com/nuxt/nuxt/issues/15551",0.7209031,["Reactive",2997],{},["Set"],["ShallowReactive",3000],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fVmPrNKsj6-NgJsIJ9MnHxWITVxzw3z6H7vVU9Hu0vVg":-1},"/nuxt/icon/129"]