Components
<PlusModalApp />
Render the modal-aware route together with its Nuxt layout and page.
PlusModalApp is the recommended root component for applications using Modal Routes. When a modal is open, it keeps rendering the background route with that route's layout. Otherwise, it renders the current route and layout.
Usage
Replace the usual <NuxtLayout> and <NuxtPage> tree in app.vue:
app.vue
<template>
- <NuxtLayout>
- <NuxtPage />
- </NuxtLayout>
+ <PlusModalApp />
</template>
By default, the component renders this modal-aware tree:
<NuxtLayout :name="layout">
<NuxtPage :route="route" />
</NuxtLayout>
Custom rendering
The default scoped slot exposes the resolved route and layout when you need to customize the app tree:
app.vue
<template>
<PlusModalApp v-slot="{ route, layout }">
<NuxtLayout :name="layout">
<NuxtPage :route="route" />
</NuxtLayout>
</PlusModalApp>
</template>
Props
The component accepts the same props as <NuxtPage>. Props and attributes are forwarded to the fallback <NuxtPage>.
Slots
{
default?: (props: {
route: NuxtPageProps['route']
layout: PageMeta['layout']
}) => any
}
<PlusModalNuxtPage /> remains available for backward compatibility. Its fallback renders only <NuxtPage> without <NuxtLayout>; use it when your app manages the layout separately.