\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.",[2943],{"name":2894,"color":2914},2891,"Export of every components","2025-01-13T16:32:50Z","https://github.com/nuxt/ui/issues/2891",0.7151978,{"description":2950,"labels":2951,"number":2959,"owner":2874,"repository":2875,"state":2916,"title":2960,"updated_at":2961,"url":2962,"score":2963},"### 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```",[2952,2955,2956],{"name":2953,"color":2954},"bug","d73a4a",{"name":2871,"color":2872},{"name":2957,"color":2958},"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.71552366,{"description":2965,"labels":2966,"number":2968,"owner":2874,"repository":2874,"state":2916,"title":2969,"updated_at":2970,"url":2971,"score":2972},"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>",[2967],{"name":2925,"color":2926},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":2974,"labels":2975,"number":2982,"owner":2874,"repository":2875,"state":2916,"title":2983,"updated_at":2984,"url":2985,"score":2986},"### 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_",[2976,2977,2978,2981],{"name":2953,"color":2954},{"name":2911,"color":2912},{"name":2979,"color":2980},"wontfix-v2","ffffff",{"name":2871,"color":2872},2102,"Carousel - Improve `items` prop typing","2024-09-30T15:25:05Z","https://github.com/nuxt/ui/issues/2102",0.72526234,["Reactive",2988],{},["Set"],["ShallowReactive",2991],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$frqjhG73cmgJHJO5JQbYSmn3RegNKNyGHKDxUw5sMJaA":-1},"/nuxt/ui/3714"]