@nuxt/docs-nightly 4.4.0-29534185.873c77bb → 4.4.0-29535694.d52a4fdd

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/3.ai/1.mcp.md

@@ -79,7 +79,7 @@ The Nuxt connector will appear in the composer's "Developer mode" tool later dur
 ### Claude Code
 
 ::note{icon="i-lucide-info"}
-**Ensure Claude Code is installed** - Visit [Anthropic's documentation](https://docs.claude.com/en/docs/claude-code/quickstart) for installation instructions.
+**Ensure Claude Code is installed** - Visit [Anthropic's documentation](https://code.claude.com/docs/en/quickstart) for installation instructions.
 ::
 
 Add the server using the CLI command:

package/3.guide/3.ai/2.llms-txt.md

@@ -42,7 +42,7 @@ Nuxt provides specialized LLMs.txt files that you can reference in Cursor for be
 1. **Direct reference**: Mention the LLMs.txt URLs when asking questions
 2. Add these specific URLs to your project context using `@docs`
 
-[Read more about Cursor Web and Docs Search](https://cursor.com/docs/context/symbols)
+[Read more about Cursor Web and Docs Search](https://cursor.com/docs/context/mentions)
 
 ### Windsurf
 

package/3.guide/5.recipes/4.sessions-and-authentication.md

@@ -210,7 +210,7 @@ We've successfully set up a very basic user authentication and session managemen
 
 As next steps, you can:
 - Add authentication using the [20+ supported OAuth providers](https://github.com/atinux/nuxt-auth-utils?tab=readme-ov-file#supported-oauth-providers)
-- Add a database to store users, see [Nitro SQL Database](https://nitro.build/guide/database) or [NuxtHub SQL Database](https://hub.nuxt.com/docs/features/database)
+- Add a database to store users, see [Nitro SQL Database](https://nitro.build/guide/database) or [NuxtHub SQL Database](https://hub.nuxt.com/docs/database)
 - Let user signup with email & password using [password hashing](https://github.com/atinux/nuxt-auth-utils?tab=readme-ov-file#password-hashing)
 - Add support for [WebAuthn / Passkeys](https://github.com/atinux/nuxt-auth-utils?tab=readme-ov-file#webauthn-passkey)
 

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/5.community/2.getting-help.md

@@ -41,7 +41,7 @@ We recommend taking a look at [how to report bugs](/docs/4.x/community/reporting
 
 ## "I need professional help"
 
-If the community couldn't provide the help you need in the time-frame you have, NuxtLabs offers professional support with the [Nuxt Experts](https://nuxt.com/enterprise/support).
+If the community couldn't provide the help you need in the time-frame you have, NuxtLabs offers professional support with the [Nuxt Experts](https://nuxt.com/enterprise/agencies).
 
 The objective of the Nuxt Expert is to provide support to the Vue ecosystem, while also creating freelance opportunities for those contributing to open-source solutions, thus helping to maintain the sustainability of the ecosystem.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/docs-nightly",
-  "version": "4.4.0-29534185.873c77bb",
+  "version": "4.4.0-29535694.d52a4fdd",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/nuxt.git",