\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```",[2887],{"name":2888,"color":2889},"pending triage","E99695",31512,"unable to reference element of server component","2025-03-23T21:01:09Z","https://github.com/nuxt/nuxt/issues/31512",0.71769565,{"description":2896,"labels":2897,"number":2901,"owner":2877,"repository":2877,"state":2879,"title":2902,"updated_at":2903,"url":2904,"score":2905},"### Describe the feature\n\nThe current documentation for Nuxt.js does not include information on how to create and use templates. Specifically, there is no information on how to save templates to GitLab and install them from there.\r\n\r\nAlthough the documentation does mention using the npx nuxi init --template command to create a new project from a template, it does not provide instructions on how to create a custom template or how to use an existing own.\r\n\r\nAdditionally, the documentation refers to the https://github.com/unjs/giget as a resource for creating templates, but this repository also lacks information on how to save templates to GitLab and install them from there.\r\n\r\nThis lack of documentation can be a hindrance for teams looking to streamline their development process by utilizing Nuxt.js templates. We suggest updating the documentation to include instructions on how to create and use templates in a team environment, including how to save templates to GitLab and install them from there.\n\n### Additional information\n\n- [ ] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2898],{"name":2899,"color":2900},"documentation","5319e7",20685,"Lack of documentation for creating and using Nuxt.js templates","2024-06-30T11:08:51Z","https://github.com/nuxt/nuxt/issues/20685",0.7181731,{"description":2907,"labels":2908,"number":2914,"owner":2877,"repository":2915,"state":2879,"title":2916,"updated_at":2917,"url":2918,"score":2919},"we'd love to have the nuxt.com docs available in translations for users across the world\n\nalthough this has been a plan for some time, and was indeed the case in nuxt v2, we're still not there with v3 docs\n\nRelated issues: https://github.com/nuxt/nuxt/issues/19926, https://github.com/nuxt/nuxt/issues/21926, https://github.com/nuxt/nuxt/discussions/16054, https://github.com/nuxt/nuxt.com/issues/1448 and https://github.com/nuxt/translations/discussions/4 (private repo - relevant content copied into this issue).\n\n## Key requirements\n\n- needs to be performant and not regress performance of the documentation\n- translations need to remain always in sync, falling back to english text if required\n- needs to allow community contribution\n\n## Translation and sync automation\n\nDocumentation sources currently come from https://github.com/nuxt/nuxt.com, https://github.com/nuxt/nuxt and https://github.com/nuxt/examples. upstream changes need to be localisable, and trigger call for updates for translators, without blocking the documentation.\n\nIt would be nice to consider exploring LLM triggers for translation (see for example the way https://github.com/formkit uses ai in the process of building their documentation website) - at least for 'fallback' content.\n\n👉 See https://github.com/nuxt/nuxt/discussions/29949 for a proposal\n\n## Building a team\n\nWe've had many offers of help for translating the docs, and we'll need to build a team - but first we need to add the infrastructure to make updating translations possible.\n\nSo initially I would love for someone or a small group to take on the task of building up the automation + integration into the [nuxt/nuxt.com](https://github.com/nuxt/nuxt.com) repository, before we move ahead to create a bigger team of translators.",[2909,2911],{"name":2868,"color":2910},"1ad6ff",{"name":2912,"color":2913},"roadmap","ff7a1a",1711,"nuxt.com","internationalisation for nuxt.com","2025-01-18T03:00:02Z","https://github.com/nuxt/nuxt.com/issues/1711",0.7263013,{"description":2921,"labels":2922,"number":2925,"owner":2877,"repository":2878,"state":2879,"title":2926,"updated_at":2927,"url":2928,"score":2929},"### Description\n\n### 🚀 Feature Request\nI’d like to suggest adding a built-in `\u003CDynamicRenderer>` component to Nuxt UI that renders dynamic, nested components based on a configuration object.\n\n### 📋 Motivation\nThis component would be ideal for:\n\n- Form builders\n\n- CMS-driven UIs\n\n- Low-code tools\n\n- Declarative UI rendering\n\nIt simplifies the process of rendering deeply nested structures without hardcoding components in the template.\n\n### 💡 Proposal\nThe DynamicRenderer would accept a config prop that defines:\n\n- The component to render\n\n- Props to bind\n\n- Slot content (including nested component trees)\n\nIt would recursively render components and their slots. Here's an example implementation:\n\n\n#### `DynamicRenderer.vue`\n```vue\n\u003Cscript setup lang=\"ts\">\ndefineProps\u003C{ config: any }>()\n\u003C/script>\n\n\u003Ctemplate>\n \u003Ccomponent :is=\"config.component\" v-bind=\"config\">\n \u003Ctemplate\n v-for=\"(slotContent, slotName) in config.slots\"\n #[slotName]\n >\n \u003Ctemplate v-if=\"typeof slotContent === 'string'\">\n {{ slotContent }}\n \u003C/template>\n\n \u003Ctemplate v-else-if=\"Array.isArray(slotContent)\">\n \u003CDynamicRenderer\n v-for=\"(nested, index) in slotContent\"\n :key=\"index\"\n :config=\"nested\"\n />\n \u003C/template>\n\n \u003Ctemplate v-else>\n \u003CDynamicRenderer :config=\"slotContent\" :key=\"slotContent.name || slotName\" />\n \u003C/template>\n \u003C/template>\n \u003C/component>\n\u003C/template>\n```\n\n\n\n#### `index.vue`\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { UButton, UCard, UContainer, UForm, UFormField, UInput } from '#components'\n\nconst config = {\n component: UContainer,\n class: 'h-screen flex justify-center items-center',\n slots: {\n default: [\n {\n component: UCard,\n slots: {\n default: [{\n component: UForm,\n class: 'space-y-4',\n slots: {\n default: [\n {\n component: UFormField,\n label: 'Username',\n name: 'username',\n required: true,\n slots: {\n default: [\n {\n component: UInput,\n placeholder: 'Enter Username',\n value: 'hh'\n }\n ]\n }\n },\n {\n component: UFormField,\n label: 'Password',\n name: 'password',\n required: true,\n slots: {\n default: [\n {\n component: UInput,\n type: 'password',\n placeholder: 'Enter Password',\n value: 'hh'\n }\n ]\n }\n },\n {\n component: UButton,\n label: 'Login',\n icon: 'i-lucide-user',\n variant: 'soft',\n type: 'submit',\n block: true\n }\n ]\n }\n }]\n }\n }\n ]\n }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003CDynamicRenderer :config=\"config\" />\n\u003C/template>\n```\n\n### Result \n\n\nIt would also be great if using this approach could eliminate the need to manually import components like:\n\n```ts\nimport { UButton, UCard, UContainer, UForm, UFormField, UInput } from '#components'\n```\n\nand instead rely on automatic resolution by the renderer itself.\n\nThanks for your work on Nuxt UI – it’s a fantastic toolkit!\n\n### Additional context\n\n_No response_",[2923,2924],{"name":2868,"color":2869},{"name":2874,"color":2875},4138,"✨ Feature Request: Add `\u003CDynamicRenderer>` component for config-driven UI rendering","2025-05-12T16:36:30Z","https://github.com/nuxt/ui/issues/4138",0.7265475,{"description":2931,"labels":2932,"number":2937,"owner":2877,"repository":2878,"state":2938,"title":2939,"updated_at":2940,"url":2941,"score":2942},"### 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```",[2933,2936],{"name":2934,"color":2935},"bug","d73a4a",{"name":2871,"color":2872},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.69127876,{"description":2944,"labels":2945,"number":2949,"owner":2877,"repository":2878,"state":2938,"title":2950,"updated_at":2951,"url":2952,"score":2953},"### Environment\n\nI just use the demo component on nuxt ui page\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.12\n\n### Reproduction\n\nI recorded it, you can see my vid:\n\nhttps://github.com/user-attachments/assets/82b444d5-473f-43b3-b26f-55b30cc61184\n\n### Description\n\nIt happens when a select box is opening.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2946,2947,2948],{"name":2934,"color":2935},{"name":2871,"color":2872},{"name":2874,"color":2875},3261,"I saw some flickering with the select boxes in a form","2025-03-08T13:57:49Z","https://github.com/nuxt/ui/issues/3261",0.6938043,{"description":2955,"labels":2956,"number":2961,"owner":2877,"repository":2877,"state":2938,"title":2962,"updated_at":2963,"url":2964,"score":2965},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.8.2\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@9.4.2\r\n- Builder: -\r\n- User Config: devtools, vue\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nYou can change the v-if from true to false to see the actual rendering failing:\r\n\r\nhttps://stackblitz.com/edit/nuxt-starter-gd1iaq?file=components%2FRichTextRenderer.vue\r\n\r\n### Describe the bug\r\n\r\nI am trying to render custom elements loaded from a CMS, example, I am trying to render responses like this:\r\n\r\n```\r\n\u003Cdiv>\r\n \u003Ccomponent :is=\"custom-element\">\u003C/component>\r\n \u003Ccomponent :is=\"custom-accordion\">\u003C/component>\r\n\u003C/div>\r\n```\r\n\r\nI was expecting to be able to do this by configuring the vue runtimeCompiler to true and using something like:\r\n\r\n```h({template: receivedHtml})```\r\n\r\n\r\n### Additional context\r\n\r\nOn the provided example, the three first options work, the fourth one fails:\r\n\r\n```\u003Cscript setup lang=\"ts\">\r\nconst CoolComponent = resolveComponent('CoolComponent')\r\n\r\nconst render1 = h({ template: '\u003Cspan>Hellow render 1\u003C/span>' })\r\nconst render2 = h({ template:`\u003Ccomponent :is=\"${CoolComponent}\">\u003C/component>` })\r\n\u003C/script>\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cdiv>\u003Cb>Basic test:\u003C/b> \u003CCoolComponent>\u003C/CoolComponent>\u003C/div>\r\n\r\n \u003Cdiv>\u003Cb>Test without components:\u003C/b> \u003Crender1>\u003C/render1>\u003C/div>\r\n\r\n \u003Cdiv>\u003Cb>Test with component:\u003C/b> \u003Ccomponent :is=\"CoolComponent\">\u003C/component>\u003C/div>\r\n\r\n \u003Cdiv v-if=\"true\">\u003Cb>Broken test:\u003C/b> \u003Crender2>\u003C/render2>\u003C/div>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\n### Logs\r\n\r\n```shell-script\r\nmissing ] after element list\r\n\r\non esm-bundler.js\r\n```\r\n",[2957,2960],{"name":2958,"color":2959},"3.x","29bc7f",{"name":2888,"color":2889},24758,"Unable to dynamically add components via string","2023-12-14T20:36:50Z","https://github.com/nuxt/nuxt/issues/24758",0.7114711,{"description":2967,"labels":2968,"number":2971,"owner":2877,"repository":2878,"state":2938,"title":2972,"updated_at":2973,"url":2974,"score":2975},"### Description\n\n I wanted to ask if you have considered implementing a server-side table feature in Nuxt UI v3, similar to the functionality provided by Vuetify's DataTable component.\n\nVuetify's DataTable offers built-in support for server-side pagination, filtering, and sorting, which makes it an excellent solution for handling large datasets efficiently. It would be fantastic to see a similar feature integrated into Nuxt UI v3. \nI would love to hear your thoughts on this feature and whether it's something that could be considered for future releases.\n\nThank you for your time and attention!",[2969,2970],{"name":2868,"color":2869},{"name":2871,"color":2872},3023,"I would like to ask, have you considered making a server side table in v3?","2025-01-13T10:43:59Z","https://github.com/nuxt/ui/issues/3023",0.7143556,{"labels":2977,"number":2980,"owner":2877,"repository":2877,"state":2938,"title":2981,"updated_at":2982,"url":2983,"score":2984},[2978,2979],{"name":2899,"color":2900},{"name":2958,"color":2959},14195,"Customizing html template","2024-07-31T07:45:19Z","https://github.com/nuxt/nuxt/issues/14195",0.7160312,["Reactive",2986],{},["Set"],["ShallowReactive",2989],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f8DaG9iMC2avLOn_mrkITkJrXsQYxddIgBJ8bLL2_QtY":-1},"/nuxt/ui/3179"]