@nuxt/docs-nightly 4.4.0-29534143.9efac4dc → 4.4.0-29535027.34787e4f

package/1.getting-started/09.transitions.md

@@ -459,6 +459,106 @@ definePageMeta({
 Overriding view transitions on a per-page basis will only have an effect if you have enabled the `experimental.viewTransition` option.
 ::
 
+### View Transition Types
+
+[View transition types](https://developer.chrome.com/blog/view-transitions-update-io24#view-transition-types) allow you to apply different CSS animations depending on the type of navigation. This is useful for creating asymmetric transitions (e.g., a different animation when navigating forward vs. backward).
+
+Types are set on the [`ViewTransition`](https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition) and can be targeted in CSS using the [`:active-view-transition-type()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:active-view-transition-type) pseudo-class selector.
+
+You can set default types globally in your `nuxt.config.ts`:
+
+```ts twoslash [nuxt.config.ts]
+export default defineNuxtConfig({
+  app: {
+    viewTransition: {
+      enabled: true,
+      types: ['slide'],
+    },
+  },
+})
+```
+
+Or configure types per-page using `definePageMeta`. Per-page types support both static arrays and functions for dynamic behavior:
+
+```vue twoslash [pages/detail.vue]
+<script setup lang="ts">
+definePageMeta({
+  viewTransition: {
+    enabled: true,
+    // Types applied to any transition involving this page
+    types: ['slide'],
+    // Types applied only when navigating TO this page
+    toTypes: ['slide-in'],
+    // Types applied only when navigating FROM this page
+    fromTypes: ['slide-out'],
+  },
+})
+</script>
+```
+
+You can also use functions for `types`, `toTypes`, and `fromTypes` in `definePageMeta` to determine types dynamically based on the route:
+
+```vue twoslash [pages/[id].vue]
+<script setup lang="ts">
+definePageMeta({
+  viewTransition: {
+    enabled: true,
+    toTypes: (to, from) => {
+      // Slide left when going to a higher ID, right otherwise
+      return Number(to.params.id) > Number(from.params.id)
+        ? ['slide-left']
+        : ['slide-right']
+    },
+  },
+})
+</script>
+```
+
+Then target these types in your CSS:
+
+```css
+/* Default crossfade */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation-duration: 0.3s;
+}
+
+/* Slide left animation */
+html:active-view-transition-type(slide-left) {
+  &::view-transition-old(root) {
+    animation: slide-out-left 0.3s ease-in-out;
+  }
+  &::view-transition-new(root) {
+    animation: slide-in-right 0.3s ease-in-out;
+  }
+}
+
+/* Slide right animation */
+html:active-view-transition-type(slide-right) {
+  &::view-transition-old(root) {
+    animation: slide-out-right 0.3s ease-in-out;
+  }
+  &::view-transition-new(root) {
+    animation: slide-in-left 0.3s ease-in-out;
+  }
+}
+```
+
+::note
+Function values for `types`, `toTypes`, and `fromTypes` only work in `definePageMeta`, not in `nuxt.config.ts` (where only static `string[]` is supported).
+::
+
+The `page:view-transition:start` hook provides access to the [`ViewTransition`](https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition) object, which includes a [`types`](https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition/types) property (`ViewTransitionTypeSet`) that can be read or modified at runtime:
+
+```ts [plugins/view-transition.client.ts]
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.hook('page:view-transition:start', (transition) => {
+    // Read or modify types at runtime
+    console.log([...transition.types])
+  })
+})
+```
+
 If you are also using Vue transitions like `pageTransition` and `layoutTransition` (see above) to achieve the same result as the new View Transitions API, then you may wish to _disable_ Vue transitions if the user's browser supports the newer, native web API. You can do this by creating `~/middleware/disable-vue-transitions.global.ts` with the following contents:
 
 ```ts

package/3.guide/6.going-further/1.experimental-features.md

@@ -303,11 +303,27 @@ export default defineNuxtConfig({
 })
 ```
 
+You can also pass an object to configure [view transition types](/docs/4.x/getting-started/transitions#view-transition-types), which allow different CSS animations based on the type of navigation:
+
+```ts twoslash [nuxt.config.ts]
+export default defineNuxtConfig({
+  experimental: {
+    viewTransition: {
+      enabled: true,
+      types: ['slide'],
+    },
+  },
+})
+```
+
 :link-example{to="https://stackblitz.com/edit/nuxt-view-transitions?file=app.vue" target="_blank"}
 
 ::read-more{icon="i-simple-icons-mdnwebdocs" to="https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API" target="_blank"}
 Read more about the **View Transition API**.
 ::
+::read-more{icon="i-simple-icons-google" to="https://developer.chrome.com/blog/view-transitions-update-io24" target="_blank"}
+Read more about the **View Transition API**.
+::
 
 ## writeEarlyHints
 

package/4.api/3.utils/define-page-meta.md

@@ -35,7 +35,7 @@ interface PageMeta {
   groups?: string[]
   pageTransition?: boolean | TransitionProps
   layoutTransition?: boolean | TransitionProps
-  viewTransition?: boolean | 'always'
+  viewTransition?: ViewTransitionPageOptions['enabled'] | ViewTransitionPageOptions
   key?: false | string | ((route: RouteLocationNormalizedLoaded) => string)
   keepalive?: boolean | KeepAliveProps
   layout?: false | LayoutKey | Ref<LayoutKey> | ComputedRef<LayoutKey>
@@ -121,12 +121,18 @@ interface PageMeta {
 
   **`viewTransition`**
 
-  - **Type**: `boolean | 'always'`
+  - **Type**: `boolean | 'always' | ViewTransitionPageOptions`
 
     **Experimental feature, only available when [enabled in your nuxt.config file](/docs/4.x/getting-started/transitions#view-transitions-api-experimental)**</br>
     Enable/disable View Transitions for the current page.
     If set to true, Nuxt will not apply the transition if the users browser matches `prefers-reduced-motion: reduce` (recommended). If set to `always`, Nuxt will always apply the transition.
 
+    You can also pass a `ViewTransitionPageOptions` object to configure [view transition types](/docs/4.x/getting-started/transitions#view-transition-types):
+    - `enabled`: `boolean | 'always'` - enable/disable the transition
+    - `types`: `string[] | (to, from) => string[]` - types applied to any transition involving this page
+    - `toTypes`: `string[] | (to, from) => string[]` - types applied only when navigating **to** this page
+    - `fromTypes`: `string[] | (to, from) => string[]` - types applied only when navigating **from** this page
+
   **`redirect`**
 
   - **Type**: [`RouteRecordRedirectOption`](https://router.vuejs.org/guide/essentials/redirect-and-alias)

package/4.api/6.advanced/1.hooks.md

@@ -30,7 +30,7 @@ Check the [app source code](https://github.com/nuxt/nuxt/blob/main/packages/nuxt
 | `page:loading:end`           | -                   | Client          | Called after `page:finish`                                                                                                                                                            |
 | `page:transition:finish`     | `pageComponent?`    | Client          | After page transition [onAfterLeave](https://vuejs.org/guide/built-ins/transition#javascript-hooks) event.                                                                            |
 | `dev:ssr-logs`               | `logs`              | Client          | Called with an array of server-side logs that have been passed to the client (if `features.devLogs` is enabled).                                                                      |
-| `page:view-transition:start` | `transition`        | Client          | Called after `document.startViewTransition` is called when [experimental viewTransition support is enabled](/docs/4.x/getting-started/transitions#view-transitions-api-experimental). |
+| `page:view-transition:start` | `transition`        | Client          | Called after `document.startViewTransition` is called when [experimental viewTransition support is enabled](/docs/4.x/getting-started/transitions#view-transitions-api-experimental). The `transition` argument is a [`ViewTransition`](https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition) object with a `types` property ([`ViewTransitionTypeSet`](https://developer.mozilla.org/en-US/docs/Web/API/ViewTransitionTypeSet)) that can be read or modified. |
 
 ## Nuxt Hooks (build time)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/docs-nightly",
-  "version": "4.4.0-29534143.9efac4dc",
+  "version": "4.4.0-29535027.34787e4f",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/nuxt.git",