// 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).",[1984],{"name":1985,"color":1986},"pending triage","E99695",28316,"nuxt","closed","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.70334667,{"description":1995,"labels":1996,"number":2003,"owner":1988,"repository":1988,"state":1989,"title":2004,"updated_at":2005,"url":2006,"score":2007},"Hi, I am trying to get this awesome framework to work with [vue-awesome](https://github.com/Justineo/vue-awesome) but I can't manage to do it.\r\n\r\nI added this to my nuxt.config.js\r\n`build: {\r\n\t\tvendor: ['vue-awesome']\r\n\t}`\r\n\r\nI added this to my default.vue\r\n\r\n`import Icon from \"vue-awesome/components/Icon.vue\"; \r\n\timport \"vue-awesome/icons\"; `\r\n\r\n`\r\n\texport default {\r\n\t\tcomponents: {\r\n\t\t\tIcon\r\n\t\t}\r\n\t}`\r\n\r\nHowever when I put icon components in my pages, it does not show, but is visible in the chrome dev tools.\r\n\r\nIs there a proper way to do this?\r\n\r\nI am new to Nuxt.\r\nThanks for your help.\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/c147\">#c147\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[1997,2000],{"name":1998,"color":1999},"question","cc317c",{"name":2001,"color":2002},"2.x","d4c5f9",174,"Work with vue-awesome","2023-01-18T15:38:32Z","https://github.com/nuxt/nuxt/issues/174",0.7065119,{"description":2009,"labels":2010,"number":2017,"owner":1988,"repository":1988,"state":1989,"title":2018,"updated_at":2019,"url":2020,"score":2021},"### 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```",[2011,2014],{"name":2012,"color":2013},"bug","d73a4a",{"name":2015,"color":2016},"🔨 p3-minor","FBCA04",30638,"ClientOnly issue with fallback","2025-01-20T06:50:12Z","https://github.com/nuxt/nuxt/issues/30638",0.7091817,{"description":2023,"labels":2024,"number":2025,"owner":1988,"repository":2026,"state":1989,"title":2027,"updated_at":2028,"url":2029,"score":2030},"\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.71374625,{"labels":2032,"number":2043,"owner":1988,"repository":1988,"state":1989,"title":2044,"updated_at":2045,"url":2046,"score":2047},[2033,2036,2037,2040],{"name":2034,"color":2035},"3.x","29bc7f",{"name":2012,"color":2013},{"name":2038,"color":2039},"vite","3574D1",{"name":2041,"color":2042},"upstream","E8A36D",12050,"Don't work with class-style component","2023-01-19T15:54:28Z","https://github.com/nuxt/nuxt/issues/12050",0.7192323,{"description":2049,"labels":2050,"number":2058,"owner":1988,"repository":2059,"state":1989,"title":2060,"updated_at":2061,"url":2062,"score":2063},"### 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```",[2051,2052,2055],{"name":2012,"color":2013},{"name":2053,"color":2054},"v3","49DCB8",{"name":2056,"color":2057},"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.7196071,{"description":2065,"labels":2066,"number":2067,"owner":1988,"repository":2026,"state":1989,"title":2068,"updated_at":2069,"url":2070,"score":2071},"I am using this module and when I use it with RC10s full static mode. It does not render the icon, adds the icon name as a string.\r\n\r\n\r\n\r\nAs you can see, it is just using the fallback as the icon name instead of rendering the svg `\u003Cspan v-else class=\"icon\" :style=\"{ fontSize: sSize, lineHeight: sSize, width: sSize, height: sSize }\">{{ name }}\u003C/span>`\r\n\r\nCC: @Atinux ",[],8,"Bug: Icons do not render in full static mode in RC10","2022-09-21T08:43:38Z","https://github.com/nuxt/icon/issues/8",0.7211535,{"description":2073,"labels":2074,"number":2077,"owner":1988,"repository":1988,"state":1989,"title":2078,"updated_at":2079,"url":2080,"score":2081},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Windows_NT\r\n- Node Version: v20.6.1\r\n- Nuxt Version: -\r\n- CLI Version: 3.10.0\r\n- Nitro Version: -\r\n- Package Manager: npm@10.1.0\r\n- Builder: -\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-starter-f3bfuh?file=app.vue\r\n\r\n1. Open the reproduction in a new window\r\n2. Open the console\r\n3. TestComp.vue prints the div element, TestComp.client.vue prints undefined.\r\n\r\n### Describe the bug\r\n\r\nTemplate Refs are undefined in onMounted hook in client components.\r\n\r\n```vue\r\n// TestComp.client.vue\r\n\u003Cscript setup lang=\"ts\">\r\nconst divRef = ref();\r\nonMounted(() => {\r\n console.log('onMounted');\r\n console.log(divRef.value); // undefined\r\n});\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cdiv ref=\"divRef\" />\r\n\u003C/template>\r\n```\r\n\r\nThis components prints undefined in the console if its clientonly (it works if wrapped in ClientOnly but not if the file is .client.vue)\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2075,2076],{"name":2034,"color":2035},{"name":1985,"color":1986},24398,"Template Refs are undefined in onMounted hook in *.client.vue components","2023-11-22T00:04:50Z","https://github.com/nuxt/nuxt/issues/24398",0.7215177,{"description":2083,"labels":2084,"number":2091,"owner":1988,"repository":1988,"state":1989,"title":2092,"updated_at":2093,"url":2094,"score":2095},"### 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",[2085,2088,2089,2090],{"name":2086,"color":2087},"good first issue","fbca04",{"name":2034,"color":2035},{"name":2012,"color":2013},{"name":2015,"color":2016},26137,"Component \"ClientOnly\" does not work correctly with template lang=\"pug\"","2024-03-09T12:38:09Z","https://github.com/nuxt/nuxt/issues/26137",0.72280407,{"description":2097,"labels":2098,"number":2101,"owner":1988,"repository":1988,"state":1989,"title":2102,"updated_at":2103,"url":2104,"score":2105},"\u003Cclient only>, if you want to get the dom through $refs in mounted, it has not been defined\r\n\r\n\r\n \"nuxt\": \"^2.15.8\",\r\n \"vue\": \"^2.6.14\",\r\n\r\n\r\n\r\n```\r\n\u003Ctemplate>\r\n \u003Cclient-only>\r\n \u003Cdiv id=\"r\" ref=\"r\" style=\"width: 100px;height: 100px;\">\u003C/div>\r\n \u003C/client-only>\r\n\u003C/template>\r\n\u003Cscript>\r\n export default {\r\n name: \"test\",\r\n methods:{\r\n },\r\n mounted() {\r\n this.$nextTick(()=>{\r\n console.log(\"输出r1\",this.$refs[\"r\"])\r\n console.log(\"输出r2\",this.$refs.r)\r\n })\r\n }\r\n }\r\n\u003C/script>\r\n\r\n\u003Cstyle scoped>\r\n\r\n\u003C/style>\r\n\r\n```",[2099,2100],{"name":1985,"color":1986},{"name":2001,"color":2002},10763,"\u003Cclient only>, if you want to get the dom through $refs in mounted, it has not been defined","2023-12-24T00:16:36Z","https://github.com/nuxt/nuxt/issues/10763",0.72483665,["Reactive",2107],{},["Set"],["ShallowReactive",2110],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"VmPrNKsj6-NgJsIJ9MnHxWITVxzw3z6H7vVU9Hu0vVg":-1},"/nuxt/icon/129"]