From e44e8b35dd62c3a15e9bbd0a3a231859f5a62579 Mon Sep 17 00:00:00 2001 From: Luke Warlow Date: Thu, 18 Jan 2024 10:00:41 +0000 Subject: [PATCH] fix(nuxt): disable View Transitions if `prefers-reduced-motion` (#22292) --- packages/nuxt/src/app/plugins/view-transitions.client.ts | 4 +++- packages/nuxt/src/core/templates.ts | 3 ++- packages/schema/src/config/experimental.ts | 1 + 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/nuxt/src/app/plugins/view-transitions.client.ts b/packages/nuxt/src/app/plugins/view-transitions.client.ts index 698c41a825..949ba73614 100644 --- a/packages/nuxt/src/app/plugins/view-transitions.client.ts +++ b/packages/nuxt/src/app/plugins/view-transitions.client.ts @@ -1,9 +1,11 @@ import { isChangingPage } from '../components/utils' import { useRouter } from '../composables/router' import { defineNuxtPlugin } from '../nuxt' +// @ts-expect-error virtual file +import { viewTransition } from '#build/nuxt.config.mjs' export default defineNuxtPlugin((nuxtApp) => { - if (!document.startViewTransition) { return } + if (!document.startViewTransition || (viewTransition !== 'always' && window.matchMedia('(prefers-reduced-motion: reduce)').matches)) { return } let finishTransition: undefined | (() => void) let abortTransition: undefined | (() => void) diff --git a/packages/nuxt/src/core/templates.ts b/packages/nuxt/src/core/templates.ts index 4c280b96d6..a28c320eeb 100644 --- a/packages/nuxt/src/core/templates.ts +++ b/packages/nuxt/src/core/templates.ts @@ -386,7 +386,8 @@ export const nuxtConfigTemplate: NuxtTemplate = { `export const nuxtLinkDefaults = ${JSON.stringify(ctx.nuxt.options.experimental.defaults.nuxtLink)}`, `export const asyncDataDefaults = ${JSON.stringify(ctx.nuxt.options.experimental.defaults.useAsyncData)}`, `export const fetchDefaults = ${JSON.stringify(fetchDefaults)}`, - `export const vueAppRootContainer = ${ctx.nuxt.options.app.rootId ? `'#${ctx.nuxt.options.app.rootId}'` : `'body > ${ctx.nuxt.options.app.rootTag}'`}` + `export const vueAppRootContainer = ${ctx.nuxt.options.app.rootId ? `'#${ctx.nuxt.options.app.rootId}'` : `'body > ${ctx.nuxt.options.app.rootTag}'`}`, + `export const viewTransition = ${ctx.nuxt.options.experimental.viewTransition}` ].join('\n\n') } } diff --git a/packages/schema/src/config/experimental.ts b/packages/schema/src/config/experimental.ts index fa6de32390..493960d89c 100644 --- a/packages/schema/src/config/experimental.ts +++ b/packages/schema/src/config/experimental.ts @@ -158,6 +158,7 @@ export default defineUntypedSchema({ /** * Enable View Transition API integration with client-side router. * @see [View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions) + * @type {boolean | 'always'} */ viewTransition: false,