feat(Modal): add forceMount prop to allow modal to render in SSR

docs/content/docs/2.components/modal.md

@@ -360,6 +360,36 @@ slots:
 :placeholder{class="h-full"}
 ::
 
+### Force Mount
+
+Use the `portal` prop with an object to force the Modal content to render even when closed. This is useful for SSR when the modal should be visible on initial page load.
+
+::component-code
+---
+prettier: true
+ignore:
+  - title
+props:
+  portal:
+    to: false
+    forceMount: true
+  title: 'Modal with force mount'
+slots:
+  default: |
+
+    <UButton label="Open" color="neutral" variant="subtle" />
+
+  body: |
+
+    <Placeholder class="h-48" />
+---
+
+:u-button{label="Open" color="neutral" variant="subtle"}
+
+#body
+:placeholder{class="h-48"}
+::
+
 ## Examples
 
 ### Control open state

src/runtime/components/Modal.vue

@@ -5,6 +5,7 @@ import theme from '#build/ui/modal'
 import type { ButtonProps, IconProps, LinkPropsKeys } from '../types'
 import type { EmitsToProps } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
+import type { PortalProp } from '../composables/usePortal'
 
 type Modal = ComponentConfig<typeof theme, AppConfig, 'modal'>
 
@@ -37,7 +38,7 @@ export interface ModalProps extends DialogRootProps {
    * Render the modal in a portal.
    * @defaultValue true
    */
-  portal?: boolean | string | HTMLElement
+  portal?: PortalProp
   /**
    * Display a close button to dismiss the modal.
    * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}

src/runtime/composables/usePortal.ts

@@ -3,16 +3,38 @@ import type { Ref, InjectionKey } from 'vue'
 
 export const portalTargetInjectionKey: InjectionKey<Ref<boolean | string | HTMLElement>> = Symbol('nuxt-ui.portal-target')
 
-export function usePortal(portal: Ref<boolean | string | HTMLElement | undefined>) {
+export type PortalProp = boolean | string | HTMLElement | { to?: boolean | string | HTMLElement, forceMount?: boolean }
+
+export function usePortal(portal: Ref<PortalProp | undefined>) {
   const globalPortal = inject(portalTargetInjectionKey, undefined)
 
-  const value = computed(() => portal.value === true ? globalPortal?.value : portal.value)
+  const value = computed((): boolean | string | HTMLElement | undefined => {
+    const p = portal.value
+
+    if (p === true) {
+      return globalPortal?.value
+    }
+
+    if (typeof p === 'object' && p !== null && !(p instanceof HTMLElement)) {
+      if (p.to === true) {
+        return globalPortal?.value
+      }
+      return p.to
+    }
+
+    return p
+  })
 
   const disabled = computed(() => typeof value.value === 'boolean' ? !value.value : false)
   const to = computed(() => typeof value.value === 'boolean' ? 'body' : value.value)
+  const forceMount = computed(() => {
+    const p = portal.value
+    return typeof p === 'object' && p !== null && !(p instanceof HTMLElement) && p.forceMount === true
+  })
 
   return computed(() => ({
     to: to.value,
-    disabled: disabled.value
+    disabled: disabled.value,
+    forceMount: forceMount.value
   }))
 }

test/components/Modal.spec.ts

@@ -23,6 +23,7 @@
     ['with closeIcon', { props: { ...props, closeIcon: 'i-lucide-trash' } }],
     ['with class', { props: { ...props, class: 'bg-elevated' } }],
     ['with ui', { props: { ...props, ui: { close: 'end-2' } } }],
+    ['with forceMount', { props: { ...props, portal: { forceMount: true } } }],
     // Slots
     ['with default slot', { props, slots: { default: () => 'Default slot' } }],
     ['with content slot', { props, slots: { content: () => 'Content slot' } }],
@@ -35,7 +36,7 @@
     ['with footer slot', { props, slots: { footer: () => 'Footer slot' } }]
   ])('renders %s correctly', async (nameOrHtml: string, options: { props?: ModalProps, slots?: Partial<ModalSlots> }) => {
     const html = await ComponentRender(nameOrHtml, options, Modal)
     expect(html).toMatchSnapshot()
   })
 
   it('passes accessibility tests', async () => {

test/components/__snapshots__/Modal-vue.spec.ts.snap

@@ -253,6 +253,33 @@ exports[`Modal > renders with footer slot correctly 1`] = `
 
 
 
+<!--teleport end-->"
+`;
+
+exports[`Modal > renders with forceMount correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
+  <!--v-if-->
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
+      <!--v-if-->
+      <!--v-if-->
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <!--v-if-->
+  <!--v-if-->
+</div>
+
+
+
 <!--teleport end-->"
 `;
 

test/components/__snapshots__/Modal.spec.ts.snap

@@ -253,6 +253,33 @@ exports[`Modal > renders with footer slot correctly 1`] = `
 
 
 
+<!--teleport end-->"
+`;
+
+exports[`Modal > renders with forceMount correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+
+<div data-state="open" style="pointer-events: auto;" data-slot="overlay" class="fixed inset-0 data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in] bg-elevated/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto;" tabindex="-1" data-slot="content" class="bg-default divide-y divide-default flex flex-col focus:outline-none data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in] w-[calc(100vw-2rem)] max-w-lg rounded-lg shadow-lg ring ring-default fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-hidden" id="" role="dialog" aria-describedby="reka-dialog-description-v-0-0-1" aria-labelledby="reka-dialog-title-v-0-0-0" data-state="open">
+  <!--v-if-->
+  <div data-slot="header" class="flex items-center gap-1.5 p-4 sm:px-6 min-h-16">
+    <div data-slot="wrapper" class="">
+      <!--v-if-->
+      <!--v-if-->
+    </div><button type="button" aria-label="Close" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 absolute top-4 end-4"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <!--v-if-->
+  <!--v-if-->
+</div>
+
+
+
 <!--teleport end-->"
 `;