\n \u003Cdiv>{{ componentRef?.$el }}\u003C/div>\n \u003C/div>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nconst componentRef = ref\u003CInstanceType\u003Ctypeof MyServerComponent>>();\n\u003C/script>\n```\n\n### Additional context\n\nmy workaround was to wrap the server component and lookup `data-island-uid`, but I don't know if that's the recommended solution\n```vue\n\u003Ctemplate>\n \u003Cdiv>\n \u003Cdiv :style=\"{ display: 'contents' }\" ref=\"containerRef\">\n \u003CMyServerComponent />\n \u003C/div>\n \u003Cdiv>{{ containerRef?.querySelector('[data-island-uid]') }}\u003C/div>\n \u003C/div>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nconst containerRef = ref\u003CHTMLDivElement>();\n\u003C/script>\n```\n\n### Logs\n\n```shell-script\n\n```",[2054],{"name":2055,"color":2056},"pending triage","E99695",31512,"unable to reference element of server component","2025-03-23T21:01:09Z","https://github.com/nuxt/nuxt/issues/31512",0.7334318,{"description":2063,"labels":2064,"number":2067,"owner":1994,"repository":1994,"state":1996,"title":2068,"updated_at":2069,"url":2070,"score":2071},"### Describe the feature\r\n\r\nI'm currently trying to rename components from vee-validate (ones like Form, Field and etc) to something more unique since I'm experiencing [this issue](https://github.com/nuxt/nuxt.js/issues/14990) (in my particular case component in sub-folder named \"Form\" clashes with auto-imported one)\r\n\r\nIt would be awesome if `addComponent` utility could function in the same way as `addImports`, so maybe something like:\r\n```ts\r\n// Import component \"Form\" from \"vee-validate\" and rename it to \"VeeForm\"\r\naddComponent({\r\n name: 'Form',\r\n as: 'VeeForm',\r\n filePath: 'vee-validate',\r\n})\r\n```\r\n\r\nThere might be a way to do this via `components:extend` hook, but that seems convoluted and very counter-intuitive\r\n\r\n### Additional information\r\n\r\n- [X] 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://v3.nuxtjs.org/community/contribution).\r\n- [X] Check existing [discussions](https://github.com/nuxt/framework/discussions) and [issues](https://github.com/nuxt/framework/issues).",[2065,2066],{"name":2005,"color":2042},{"name":2044,"color":2045},15153,"feat(kit): allowing renaming components with `addComponent`","2024-06-30T11:10:07Z","https://github.com/nuxt/nuxt/issues/15153",0.7339939,{"description":2073,"labels":2074,"number":2077,"owner":1994,"repository":1995,"state":1996,"title":2078,"updated_at":2079,"url":2080,"score":2081},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.15.1\n- Nuxt Version: 3.14.159\n- CLI Version: 3.17.2\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.14.3\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n\n### Version\n\nv2.18.6\n\n### Reproduction\n\nGo here:\n\nhttps://ui.nuxt.com/components/tabs#default-index\n\nReload the page\n\n### Description\n\nWhen tabs have an initial index other than `0` they visually transition from the left tab to the index / v-model # tab.\n\nHappy to PR this.\n\n### Additional context\n\n\n\n### Logs\n\n```shell-script\n\n```",[2075,2076],{"name":1985,"color":1986},{"name":1991,"color":1992},3084,"[Tabs] non-0 `index` / `v-model` always transitions from 0","2025-01-13T13:45:29Z","https://github.com/nuxt/ui/issues/3084",0.734521,{"description":2083,"labels":2084,"number":2087,"owner":1994,"repository":1995,"state":2088,"title":2089,"updated_at":2090,"url":2091,"score":2092},"### Environment\n\n.\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.13\n\n### Reproduction\n\nGo to https://ui3.nuxt.dev/getting-started and change the theme to dark and the neutral color to neutral.\n\n### Description\n\nI just entered the site and had the preference to see the docs with neutral colors and in dark mode and now seems that the last update on the docs brokes the dark mode with neutral color. I tested it in multiple browsers and looks the same.\n\n### Additional context\n\nhttps://github.com/user-attachments/assets/f79b85ea-a40a-4f97-9c81-f36735d1eebb\n\n### Logs\n\n```shell-script\n\n```",[2085,2086],{"name":1985,"color":1986},{"name":1988,"color":1989},3399,"closed","Dark mode with neutral color seems to be broken in the v3 UI docs","2025-03-22T15:51:05Z","https://github.com/nuxt/ui/issues/3399",0.69051784,{"description":2094,"labels":2095,"number":2099,"owner":1994,"repository":1994,"state":2088,"title":2100,"updated_at":2101,"url":2102,"score":2103},"I am trying to create a faq page on nuxt js.\r\nThe template below which I got from veautify does not show up on my localhost. I get these errors instead. It works if I replace v-for \"(item,i) in 5\" : key=\"i\" as shown in the template source code but I want to pass a list of questions from object(listquestions)into the array from MapState.\r\n\r\n[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside \u003Cp>, or missing \u003Ctbody>. Bailing hydration and performing full client-side render.\r\nv-toolbar-logo> - did you register the component correctly? For recursive components, make sure to provide the \"name\" option.\r\n\r\nfound in\r\n\r\n---> \u003CDefault> at layouts/default.vue\r\n \u003CRoot>\r\n**faq.vue file**\r\n```\r\n\u003Ctemplate>\r\n \u003Cv-expansion-panel>\r\n \u003Cv-expansion-panel-content v-for=\"quest in listquestions\" :key=\"quest.id\">\r\n \u003Cdiv slot=\"header\"> Question \u003C/div>\r\n \u003Cv-card>\r\n \u003Cv-card-text class =\"grey lighten-3\">\r\n This is a test answer.\r\n \u003C/v-card-text>\r\n \u003C/v-card>\r\n \u003C/v-expansion-panel-content>\r\n \u003C/v-expansion-panel>\r\n\u003C/template>\r\n\r\n\u003Cstyle>\r\n\r\n\u003C/style>\r\n\u003Cscript>\r\n\r\nimport {mapState, mapGetters, mapActions} from 'vuex'\r\n\r\nexport default {\r\n computed: mapState({\r\n listquestions:'allQuestions'\r\n })\r\n}\r\n\u003C/script>`\r\n```\r\n```\r\n**questions.js file**\r\nexport const state = () => ({\r\n list :['Question 1','Question 2','Question 3','Question 4','Question 5'],\r\n allQuestions: state => state.list \r\n \r\n})\r\n``` \r\nAccordian template source code which I got from veautify.\r\n```\r\nhttps://vuetifyjs.com/components/expansion-panels#example-1\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/c2383\">#c2383\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2096],{"name":2097,"color":2098},"2.x","d4c5f9",2743,"Accordian template on veutify not showing up because of v-for loop on nuxt js ","2023-01-18T16:02:37Z","https://github.com/nuxt/nuxt/issues/2743",0.7121302,["Reactive",2105],{},["Set"],["ShallowReactive",2108],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"8DaG9iMC2avLOn_mrkITkJrXsQYxddIgBJ8bLL2_QtY":-1},"/nuxt/ui/3179"]