\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```",[2922,2923,2924],{"name":2857,"color":2858},{"name":2908,"color":2909},{"name":2925,"color":2926},"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.7515925,{"description":2933,"labels":2934,"number":2937,"owner":2860,"repository":2914,"state":2874,"title":2938,"updated_at":2939,"url":2940,"score":2941},"### 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? :)",[2935,2936],{"name":2871,"color":2906},{"name":2908,"color":2909},3156,"BadgeGroups!","2025-03-08T12:22:25Z","https://github.com/nuxt/ui/issues/3156",0.7541036,{"description":2887,"labels":2943,"number":2945,"owner":2860,"repository":2873,"state":2874,"title":2946,"updated_at":2947,"url":2948,"score":2949},[2944],{"name":2871,"color":2872},453,"Merge `ProjectContentFileAside` and `ProjectMediaFileAside` into one aside component","2022-05-20T13:11:51Z","https://github.com/nuxt/nuxt.com/issues/453",0.7586885,{"description":2951,"labels":2952,"number":2945,"owner":2860,"repository":2898,"state":2874,"title":2953,"updated_at":2954,"url":2955,"score":2949},"Example in https://test-utils.nuxtjs.org/api-reference/app-testing not working. \r\nAfter run test get error:\r\n\r\n```\r\n/firsttest.spec.js:1\r\n({\"Object.\u003Canonymous>\":function(module,exports,require,__dirname,__filename,global,jest){import { get, setupTest } from '@nuxt/test-utils';\r\n\r\nSyntaxError: Cannot use import statement outside a module\r\n```\r\nmy setup:\r\n\r\nin jest.config.js\r\n```\r\nmodule.exports = {\r\n clearMocks: true,\r\n testMatch: [\r\n '*/__tests__/**/*.[jt]s?(x)',\r\n '**/?(*.)+(spec|test).[tj]s?(x)',\r\n '**/test/(*.)+(spec|test).js'],\r\n moduleNameMapper: {\r\n '^@/(.*)$': '\u003CrootDir>/$1',\r\n '^~/(.*)$': '\u003CrootDir>/$1',\r\n },\r\n moduleFileExtensions: ['js', 'vue', 'json'],\r\n testEnvironment: 'jsdom',\r\n transform: {\r\n '^.+\\\\.js$': 'babel-jest',\r\n '.*\\\\.(vue)$': 'vue-jest',\r\n },\r\n preset: '@nuxt/test-utils',\r\n}\r\n```\r\nin package.json\r\n```\r\n{\r\n \"name\": \"\",\r\n \"version\": \"1.0.0\",\r\n \"main\": \"index.js\",\r\n \"scripts\": {\r\n \"test\": \"node_modules/.bin/jest\"\r\n },\r\n \"author\": \"\",\r\n \"license\": \"\",\r\n \"dependencies\": {\r\n \"bootstrap\": \"^4.5.3\",\r\n \"bootstrap-vue\": \"^2.20.1\",\r\n \"nuxt\": \"^2.15.2\",\r\n\r\n },\r\n \"devDependencies\": {\r\n \"@babel/plugin-transform-modules-commonjs\": \"^7.12.1\",\r\n \"@nuxt/test-utils\": \"^0.2.0\",\r\n \"@vue/test-utils\": \"^1.1.1\",\r\n \"babel-jest\": \"^26.6.3\",\r\n \"jest\": \"^26.6.3\",\r\n \"vue-jest\": \"^3.0.7\"\r\n }\r\n}\r\n\r\n```\r\n\r\n\r\n",[],"Example in https://test-utils.nuxtjs.org/api-reference/app-testing not working","2023-12-02T00:13:11Z","https://github.com/nuxt/test-utils/issues/453",["Reactive",2957],{},["Set"],["ShallowReactive",2960],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fExznCNoYVzLUzNShDJAh1mZ9vn5Se4d0zjCZo3YU5Lw":-1},"/nuxt/nuxt.com/362"]