\n\u003C/template>\n```\n\nApparently, you have to pass the component itself, but I'm unable to import components from Nuxt UI:\n\n```vue\n\u003Cscript setup>\n// This doesn't work\nimport { UCheckbox, UInput } from '@nuxt/ui';\n\u003C/script>\n\n\u003Ctemplate>\n \u003Ccomponent :is=\"typeof value === 'boolean' ? UCheckbox : UInput\" />\n\u003C/template>\n```\n\nI can use `v-if` as a workaround, but it forces me to duplicate a lot of props (class, listeners, model ...) on each component.",[3079],{"name":3048,"color":3049},2891,"Export of every components","2025-01-13T16:32:50Z","https://github.com/nuxt/ui/issues/2891",0.7151978,{"description":3086,"labels":3087,"number":3095,"owner":3025,"repository":3026,"state":3051,"title":3096,"updated_at":3097,"url":3098,"score":3099},"### Environment\n\n------------------------------\n- Operating System: Windows_NT\n- Node Version: v20.10.0\n- Nuxt Version: 3.13.2\n- CLI Version: 3.16.0\n- Nitro Version: 2.9.7\n- Package Manager: yarn@4.5.0\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/content@2.13.4, @nuxt/ui-pro@3.0.0-alpha.9, @pinia/nuxt@0.5.5, @nuxt/image@1.8.1, @nuxt/test-utils/module@3.14.4, @nuxtjs/i18n@9.1.0, @nuxtjs/seo@2.0.2, @nuxtjs/turnstile@0.9.11, nuxt-security@2.1.4, @nuxt/scripts@0.9.5\n- Build Modules: -\n------------------------------\n\n### Version\n\nv3.x\n\n### Reproduction\n\n```vue\n\u003CUButton v-show=\"true\" />\n```\n\n### Description\n\nAssuming it's because of the primitives, using v-show triggers a warning for every Nuxt UI (and Nuxt UI Pro) component, stating a runtime directive was used on a component with a non-element root node. This makes it impossible to apply conditional display unless using v-if, which doesn't cover the use cases that v-show does.\n\n### Additional context\n\n_No response_\n\n### Logs\n\nExample from my project of a button:\n```shell-script\n[Vue warn]: Runtime directive used on component with non-element root node. The directives will not function as intended. \n at \u003CNuxtLink class=\"inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors gap-1.5 hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-4 text-lg max-w-md w-full mx-auto rounded-lg bg-primary shadow-lg text-black font-semibold justify-center\" raw=true custom=\"\" > \n at \u003CLink type=\"button\" disabled=false class=\"inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors gap-1.5 hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-4 text-lg max-w-md w-full mx-auto rounded-lg bg-primary shadow-lg text-black font-semibold justify-center\" ... > \n at \u003CButton type=\"button\" loading=false class=\"p-4 text-lg max-w-md w-full mx-auto rounded-lg bg-primary shadow-lg text-black font-semibold justify-center\" ... > \n at \u003CIndex onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \n at \u003CAnonymous key=\"/\" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/', hash: '', query: {…}, name: 'index', path: '/', …} ... > \n at \u003CRouterView name=undefined route=undefined > \n at \u003CNuxtPage> \n at \u003CDefault ref=Ref\u003C undefined > > \n at \u003CLayoutLoader key=\"default\" layoutProps= {ref: RefImpl} name=\"default\" > \n at \u003CNuxtLayoutProvider layoutProps= {ref: RefImpl} key=\"default\" name=\"default\" ... > \n at \u003CNuxtLayout> \n at \u003CToastProvider swipe-direction=\"right\" duration=5000 > \n at \u003CToaster key=0 > \n at \u003CTooltipProvider> \n at \u003CConfigProvider use-id=fn\u003Cuse-id> dir=\"ltr\" > \n at \u003CApp> \n at \u003CApp key=4 > \n at \u003CNuxtRoot>\n```",[3088,3091,3092],{"name":3089,"color":3090},"bug","d73a4a",{"name":3022,"color":3023},{"name":3093,"color":3094},"upstream","78bddb",2866,"[v3]: v-show causes a runtime warning and breaks","2025-03-24T17:58:14Z","https://github.com/nuxt/ui/issues/2866",0.7155236,{"description":3101,"labels":3102,"number":3104,"owner":3025,"repository":3025,"state":3051,"title":3105,"updated_at":3106,"url":3107,"score":3108},"Hi, I need a help. I try put some data from API like this:\r\n\r\n```\r\nmodel: {\r\ncontent: {\r\nrendered: '\u003Csilentbox-group>\r\n \u003Csilentbox-item src=\"http://data.whicdn.com/images/71898812/large.jpg\" autoplay=\"true\" description=\"My very custom message\">Item one\u003C/silentbox-item>\r\n \u003Csilentbox-item src=\"http://data.whicdn.com/images/71898812/large.jpg\">Item two\u003C/silentbox-item>\r\n \u003Csilentbox-item src=\"http://data.whicdn.com/images/71898812/large.jpg\">Item three\u003C/silentbox-item>\r\n\u003C/silentbox-group>'\r\n}\r\n}\r\n```\r\n\r\no thev Nuxt component template:\r\n\r\n`\u003Cdiv class=\"post-page__content\" v-html=\"model.content.rendered\">\u003C/div>`\r\n\r\nand I register component like this: \r\n\r\n```\r\n import PostAuthor from '../PostAuthor.vue'\r\n import Comments from '../Comments.vue'\r\n import VueSilentbox from 'vue-silentbox'\r\n export default {\r\n props: {\r\n model: {\r\n required: true\r\n },\r\n comments: ''\r\n },\r\n components: {\r\n PostAuthor,\r\n Comments,\r\n VueSilentbox\r\n }\r\n}\r\n```\r\nNuxt put data like HTML, but plugin template not run.. \r\nHow can I re-compile template to use plugin component in v-html ? \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/c1518\">#c1518\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3103],{"name":3061,"color":3062},1694,"Problem: Re-compile, re-render template component with data in v-html ","2023-01-18T15:42:08Z","https://github.com/nuxt/nuxt/issues/1694",0.7186345,{"description":3110,"labels":3111,"number":3118,"owner":3025,"repository":3025,"state":3051,"title":3119,"updated_at":3120,"url":3121,"score":3122},"### Describe the feature\n\nI have a component like this\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003CHomepageSection class=\"pt-10 sm:pt-36\" ref=\"section\">\r\n \u003C!-- ... -->\r\n \u003C/HomepageSection>\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\n const section = ref\u003CInstanceType\u003Ctypeof HomepageSection> | null>(null) // This typeof HomepageSection won't work 😔\r\n\u003C/script>\r\n```\r\n\r\n`typeof HomepageSection` won't work. But if we look into vue [docs](https://vuejs.org/guide/typescript/composition-api.html#typing-component-props) This should work with the component import so if we refactor our code like this:\r\n\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\n import { HomepageSection } from '#components';\r\n\r\n const section = ref\u003CInstanceType\u003Ctypeof HomepageSection> | null>(null) // This will work now 👍\r\n\u003C/script>\r\n```\r\n\r\nSo I want that it should be auto-imported like components do in nuxt\r\n\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).",[3112,3115],{"name":3113,"color":3114},"discussion","538de2",{"name":3116,"color":3117},"types","2875C3",22510,"Add InstanceType with auto-import custom components","2025-06-10T13:50:34Z","https://github.com/nuxt/nuxt/issues/22510",0.7219802,{"description":3124,"labels":3125,"number":3132,"owner":3025,"repository":3026,"state":3051,"title":3133,"updated_at":3134,"url":3135,"score":3136},"### Environment\n\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v20.14.0\r\n- Nuxt Version: 3.11.2\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.6\r\n- Package Manager: npm@10.8.2\r\n- Builder: -\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Version\n\nv2.18.4\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-efufxa?file=app.vue\n\n### Description\n\nCurrently, [the `items` prop in the carousel component is typed as `any`](https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Carousel.vue#L81):\r\n\r\nThe issue with typing `items` as `any` is that when using `v-slot=\"{ item }\"`, the `item` will always be typed as `any`. This can make for a poor developer experience, especially when working with more complex item structures, such as creating a carousel of offer cards.\r\n\r\nI believe we can improve this by utilizing [Vue's generics](https://vuejs.org/guide/typescript/overview#generic-components):\r\n\r\nWe could define the generic in the script:\r\n\r\n```html\r\n\u003Cscript lang=\"ts\" generic=\"Item\">\r\n```\r\n\r\nAnd then use the generic in the prop definition:\r\n\r\n```ts\r\nitems: {\r\n type: Array as PropType\u003CItem[]>,\r\n default: () => []\r\n},\r\n```\r\n\r\nIf this change makes sense, I’d be happy to help by submitting a PR.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3126,3127,3128,3131],{"name":3089,"color":3090},{"name":3045,"color":3046},{"name":3129,"color":3130},"wontfix-v2","ffffff",{"name":3022,"color":3023},2102,"Carousel - Improve `items` prop typing","2024-09-30T15:25:05Z","https://github.com/nuxt/ui/issues/2102",0.72526234,["Reactive",3138],{},["Set"],["ShallowReactive",3141],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$frqjhG73cmgJHJO5JQbYSmn3RegNKNyGHKDxUw5sMJaA":-1},"/nuxt/ui/3714"]