mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
feat(nuxt3)!: support layout transitions (#2861)
* feat(nuxt3): support layout transitions * docs: update
This commit is contained in:
parent
81ee59ce0c
commit
29fa0c991b
@ -206,6 +206,6 @@ Of course, you are welcome to define metadata for your own use throughout your a
|
||||
|
||||
You can define the layout used to render the route. This can be either false (to disable any layout), a string or a ref/computed, if you want to make it reactive in some way. [More about layouts](/docs/directory-structure/layouts).
|
||||
|
||||
#### `transition`
|
||||
#### `layoutTransition` and `pageTransition`
|
||||
|
||||
You can define transition properties for the `<transition>` component that wraps your pages, or pass `false` to disable the `<transition>` wrapper for that route. [More about transitions](https://v3.vuejs.org/guide/transitions-overview.html).
|
||||
You can define transition properties for the `<transition>` components that wraps your pages and layouts, or pass `false` to disable the `<transition>` wrapper for that route. [More about transitions](https://v3.vuejs.org/guide/transitions-overview.html).
|
||||
|
@ -12,7 +12,8 @@ export const useRoute = () => {
|
||||
|
||||
export interface PageMeta {
|
||||
[key: string]: any
|
||||
transition?: false | TransitionProps
|
||||
pageTransition?: false | TransitionProps
|
||||
layoutTransition?: false | TransitionProps
|
||||
layout?: false | string | Ref<false | string> | ComputedRef<false | string>
|
||||
key?: string | ((route: RouteLocationNormalizedLoaded) => string)
|
||||
// TODO: https://github.com/vuejs/vue-next/issues/3652
|
||||
|
@ -1,12 +1,14 @@
|
||||
<template>
|
||||
<RouterView v-slot="{ Component, route }">
|
||||
<NuxtLayout v-if="Component" :name="layout || route.meta.layout">
|
||||
<NuxtTransition :options="route.meta.transition ?? { name: 'page', mode: 'out-in' }">
|
||||
<Suspense @pending="() => onSuspensePending(Component)" @resolve="() => onSuspenseResolved(Component)">
|
||||
<component :is="Component" />
|
||||
</Suspense>
|
||||
</NuxtTransition>
|
||||
</NuxtLayout>
|
||||
<NuxtTransition :options="route.meta.layoutTransition ?? { name: 'layout', mode: 'out-in' }">
|
||||
<NuxtLayout v-if="Component" :name="layout || route.meta.layout">
|
||||
<NuxtTransition :options="route.meta.pageTransition ?? { name: 'page', mode: 'out-in' }">
|
||||
<Suspense @pending="() => onSuspensePending(Component)" @resolve="() => onSuspenseResolved(Component)">
|
||||
<component :is="Component" />
|
||||
</Suspense>
|
||||
</NuxtTransition>
|
||||
</NuxtLayout>
|
||||
</NuxtTransition>
|
||||
<!-- TODO: Handle 404 placeholder -->
|
||||
</RouterView>
|
||||
</template>
|
||||
|
Loading…
Reference in New Issue
Block a user