Add an always option to view-transitions plugin that ignores reduced …

…motion preference. Otherwise skip transitions if true

packages/nuxt/src/app/plugins/view-transitions-safe.client.ts

@@ -0,0 +1,8 @@
+import { defineNuxtPlugin } from '#app/nuxt'
+import plugin from '#app/plugins/view-transitions.client'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  if (!document.startViewTransition || window.matchMedia('(prefers-reduced-motion: reduce)').matches) { return }
+
+  plugin(nuxtApp)
+})

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

@@ -2,7 +2,7 @@ import { useRouter } from '#app/composables/router'
 import { defineNuxtPlugin } from '#app/nuxt'
 
 export default defineNuxtPlugin((nuxtApp) => {
-  if (!document.startViewTransition || window.matchMedia('(prefers-reduced-motion: reduce)').matches) { return }
+  if (!document.startViewTransition) { return }
 
   let finishTransition: undefined | (() => void)
   let abortTransition: undefined | (() => void)

packages/nuxt/src/core/nuxt.ts

@@ -287,7 +287,11 @@ async function initNuxt (nuxt: Nuxt) {
 
   // Add experimental automatic view transition api support
   if (nuxt.options.experimental.viewTransition) {
-    addPlugin(resolve(nuxt.options.appDir, 'plugins/view-transitions.client'))
+    if (nuxt.options.experimental.viewTransition === 'always') {
+      addPlugin(resolve(nuxt.options.appDir, 'plugins/view-transitions.client'))
+    } else {
+      addPlugin(resolve(nuxt.options.appDir, 'plugins/view-transitions-safe.client'))
+    }
   }
 
   // Add experimental support for custom types in JSON payload

packages/schema/src/config/experimental.ts

@@ -125,6 +125,7 @@ export default defineUntypedSchema({
      * Enable View Transition API integration with client-side router.
      *
      * @see https://developer.chrome.com/docs/web-platform/view-transitions
+     * @type {boolean | 'always'}
      */
     viewTransition: false,