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

feat(nuxt): add page:view-transition:start hook (#26045)

Browse Source
This commit is contained in:
Horváth Bálint 2024-03-06 16:58:40 +01:00 committed by GitHub
parent 6d93014c52
commit 7095048f3b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/3.api/6.advanced/1.hooks.md
View File

@ -28,6 +28,7 @@ Hook | Arguments | Environment | Description
`page:loading:start` | - | Client | Called when the `setup()` of the new page is running.
`page:loading:end` | - | Client | Called after `page:finish`
`page:transition:finish`| `pageComponent?` | Client | After page transition [onAfterLeave](https://vuejs.org/guide/built-ins/transition.html#javascript-hooks) event.
`page:view-transition:start` | `transition` | Client | Called after `document.startViewTransition` is called when [experimental viewTransition support is enabled](https://nuxt.com/docs/getting-started/transitions#view-transitions-api-experimental).
## Nuxt Hooks (build time)

2
packages/nuxt/src/app/nuxt.ts
View File

@ -18,6 +18,7 @@ import type { NuxtError } from '../app/composables/error'
import type { AsyncDataRequestStatus } from '../app/composables/asyncData'
import type { NuxtAppManifestMeta } from '../app/composables/manifest'
import type { LoadingIndicator } from '../app/composables/loading-indicator'
import type { ViewTransition } from './plugins/view-transitions.client'
import type { NuxtAppLiterals } from '#app'
@ -45,6 +46,7 @@ export interface RuntimeNuxtHooks {
'page:finish': (Component?: VNode) => HookResult
'page:transition:start': () => HookResult
'page:transition:finish': (Component?: VNode) => HookResult
'page:view-transition:start': (transition: ViewTransition) => HookResult
'page:loading:start': () => HookResult
'page:loading:end': () => HookResult
'vue:setup': () => void

16
packages/nuxt/src/app/plugins/view-transitions.client.ts
View File

@ -14,7 +14,7 @@ export default defineNuxtPlugin((nuxtApp) => {
const router = useRouter()
router.beforeResolve((to, from) => {
router.beforeResolve(async (to, from) => {
const viewTransitionMode = to.meta.viewTransition ?? defaultViewTransition
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
const prefersNoTransition = prefersReducedMotion && viewTransitionMode !== 'always'
@ -41,6 +41,8 @@ export default defineNuxtPlugin((nuxtApp) => {
finishTransition = undefined
})
await nuxtApp.callHook('page:view-transition:start', transition)
return ready
})
@ -55,12 +57,14 @@ export default defineNuxtPlugin((nuxtApp) => {
})
})
export interface ViewTransition {
ready: Promise<void>
finished: Promise<void>
updateCallbackDone: Promise<void>
}
declare global {
interface Document {
startViewTransition?: (callback: () => Promise<void> | void) => {
finished: Promise<void>
updateCallbackDone: Promise<void>
ready: Promise<void>
}
startViewTransition?: (callback: () => Promise<void> | void) => ViewTransition
}
}