\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```",[2050,2051,2052],{"name":1985,"color":1986},{"name":2036,"color":2037},{"name":2053,"color":2054},"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.754604,{"description":2061,"labels":2062,"number":2063,"owner":1988,"repository":2001,"state":2002,"title":2064,"updated_at":2065,"url":2066,"score":2067},"So far I can only reproduce this on the https://nuxt.com/docs/guide/going-further/modules page, adding a trailing slash results in a hydration mismatch + 404 not found error page.\n\n* works - https://nuxt.com/docs/guide/going-further/modules\n* broken - https://nuxt.com/docs/guide/going-further/modules/\n\nMost pages do remove the trailing slash / navigate to the same page without slash, which work as expected. I figured this may be handled somewhere in a middleware or plugin but I couldn't find any so expect no PR with a fix from me 🙇",[],1841,"Trailing slash route results in hydration mismatch with 404 error on specific routes (going-further/modules/... maybe more?)","2025-03-27T21:43:15Z","https://github.com/nuxt/nuxt.com/issues/1841",0.7601633,{"description":2069,"labels":2070,"number":2073,"owner":1988,"repository":2042,"state":2002,"title":2074,"updated_at":2075,"url":2076,"score":2077},"### Description\n\nI was experimenting with two `UBadge` components and `rounded-e-full`/`rounded-s-full` to achieve a `UButtonGroup` effect, would a `UBagdeGroup` component be to much to ask? :)",[2071,2072],{"name":1999,"color":2034},{"name":2036,"color":2037},3156,"BadgeGroups!","2025-03-08T12:22:25Z","https://github.com/nuxt/ui/issues/3156",0.76032066,{"labels":2079,"number":2088,"owner":1988,"repository":1988,"state":2002,"title":2089,"updated_at":2090,"url":2091,"score":2092},[2080,2082,2085],{"name":1999,"color":2081},"8DEF37",{"name":2083,"color":2084},"3.x","29bc7f",{"name":2086,"color":2087},"dx","C39D69",13963,"automatically generate unique keys for keyed composables","2023-01-19T17:11:03Z","https://github.com/nuxt/nuxt/issues/13963",0.7671063,["Reactive",2094],{},["Set"],["ShallowReactive",2097],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"ExznCNoYVzLUzNShDJAh1mZ9vn5Se4d0zjCZo3YU5Lw":-1},"/nuxt/nuxt.com/362"]