Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-29 17:07:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/content/3.docs/2.directory-structure/9.pages.md
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). 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).

3
packages/nuxt3/src/pages/runtime/composables.ts
View File

@ -12,7 +12,8 @@ export const useRoute = () => {
export interface PageMeta { export interface PageMeta {
[key: string]: any [key: string]: any
transition?: false | TransitionProps pageTransition?: false | TransitionProps
layoutTransition?: false | TransitionProps
layout?: false | string | Ref<false | string> | ComputedRef<false | string> layout?: false | string | Ref<false | string> | ComputedRef<false | string>
key?: string | ((route: RouteLocationNormalizedLoaded) => string) key?: string | ((route: RouteLocationNormalizedLoaded) => string)
// TODO: https://github.com/vuejs/vue-next/issues/3652 // TODO: https://github.com/vuejs/vue-next/issues/3652

4
packages/nuxt3/src/pages/runtime/page.vue
View File

@ -1,12 +1,14 @@
<template> <template>
<RouterView v-slot="{ Component, route }"> <RouterView v-slot="{ Component, route }">
<NuxtTransition :options="route.meta.layoutTransition ?? { name: 'layout', mode: 'out-in' }">
<NuxtLayout v-if="Component" :name="layout || route.meta.layout"> <NuxtLayout v-if="Component" :name="layout || route.meta.layout">
<NuxtTransition :options="route.meta.transition ?? { name: 'page', mode: 'out-in' }"> <NuxtTransition :options="route.meta.pageTransition ?? { name: 'page', mode: 'out-in' }">
<Suspense @pending="() => onSuspensePending(Component)" @resolve="() => onSuspenseResolved(Component)"> <Suspense @pending="() => onSuspensePending(Component)" @resolve="() => onSuspenseResolved(Component)">
<component :is="Component" /> <component :is="Component" />
</Suspense> </Suspense>
</NuxtTransition> </NuxtTransition>
</NuxtLayout> </NuxtLayout>
</NuxtTransition>
<!-- TODO: Handle 404 placeholder --> <!-- TODO: Handle 404 placeholder -->
</RouterView> </RouterView>
</template> </template>