feat(nuxt3)!: support layout transitions (#2861)

* feat(nuxt3): support layout transitions

* docs: update
This commit is contained in:
Daniel Roe 2022-01-24 17:10:42 +00:00 committed by GitHub
parent 81ee59ce0c
commit 29fa0c991b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 10 deletions

View File

@ -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).

View File

@ -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

View File

@ -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>