[v3]: v-show causes a runtime warning and breaks

[GalacticHypernova]

Environment

---

• Operating System: Windows_NT
• Node Version: v20.10.0
• Nuxt Version: 3.13.2
• CLI Version: 3.16.0
• Nitro Version: 2.9.7
• Package Manager: yarn@4.5.0
• Builder: -
• User Config: default
• 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
• Build Modules: -

---

Version

v3.x

Reproduction

<UButton v-show="true" />

Description

Assuming 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.

Additional context

No response

Logs

Example from my project of a button:

[Vue warn]: Runtime directive used on component with non-element root node. The directives will not function as intended. 
  at <NuxtLink 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="" > 
  at <Link 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"  ... > 
  at <Button 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"  ... > 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <Anonymous key="/" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/', hash: '', query: {…}, name: 'index', path: '/', …}  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <Default ref=Ref< undefined > > 
  at <LayoutLoader key="default" layoutProps= {ref: RefImpl} name="default" > 
  at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="default" name="default"  ... > 
  at <NuxtLayout> 
  at <ToastProvider swipe-direction="right" duration=5000 > 
  at <Toaster key=0 > 
  at <TooltipProvider> 
  at <ConfigProvider use-id=fn<use-id> dir="ltr" > 
  at <App> 
  at <App key=4 > 
  at <NuxtRoot>

[strokirk]

From what I've tested, v-show only produces the Runtime directive warning on the Button and Link components, not most others.

This is due to them using <NuxtLink custom> internally, which in turn uses <RouterLink custom>.

See:
vuejs/router#1887 (comment)
vuejs/core#6829 (comment)