@nuxt/docs-nightly 4.4.0-29533707.0a5a5c19 → 4.4.0-29533984.c5133a48

package/1.getting-started/18.upgrade.md

@@ -59,6 +59,7 @@ export default defineNuxtConfig({
 When you set your `future.compatibilityVersion` to `5`, defaults throughout your Nuxt configuration will change to opt in to Nuxt v5 behavior, including:
 
 - **Vite Environment API**: Automatically enables the new [Vite Environment API](/docs/4.x/getting-started/upgrade#migration-to-vite-environment-api) for improved build configuration
+- **Normalized Page Names**: Page component names will [match their route names](/docs/4.x/getting-started/upgrade#normalized-page-component-names) for consistent `<KeepAlive>` behavior
 - **`clearNuxtState` resets to defaults**: `clearNuxtState` will [reset state to its initial value](/docs/4.x/getting-started/upgrade#respect-defaults-when-clearing-usestate) instead of setting it to `undefined`
 - Other Nuxt 5 improvements and changes as they become available
 
@@ -1374,6 +1375,41 @@ export default defineNuxtConfig({
 Read more about Nitro's prerender configuration options.
 ::
 
+### Normalized Page Component Names
+
+🚦 **Impact Level**: Minimal
+
+#### What Changed
+
+When `future.compatibilityVersion` is set to `5` (or `experimental.normalizePageNames` is enabled), page component names match their route names instead of using the filename. For example, `pages/foo/index.vue` will have the component name `foo` instead of `index`.
+
+#### Reasons for Change
+
+Previously, Vue assigned component names based on the filename. This meant multiple pages like `pages/foo/index.vue` and `pages/bar/index.vue` would both have the component name `index`. This made `<KeepAlive>` with `include`/`exclude` filters unreliable and required manually adding `defineOptions({ name: '...' })` to each page.
+
+#### Migration Steps
+
+If you rely on the current component names (e.g. in `<KeepAlive>` `include`/`exclude` lists), update them to use route names instead of filenames.
+
+```diff
+<template>
+  <NuxtPage :keepalive="{
+-   include: ['index']
++   include: ['foo']
+  }" />
+</template>
+```
+
+To disable this behavior:
+
+```ts twoslash [nuxt.config.ts]
+export default defineNuxtConfig({
+  experimental: {
+    normalizePageNames: false,
+  },
+})
+```
+
 ## Nuxt 2 vs. Nuxt 3+
 
 In the table below, there is a quick comparison between 3 versions of Nuxt:

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

@@ -607,6 +607,30 @@ But in order to auto-import it, you would need to use `SomeFolderMyComponent`.
 
 By setting `experimental.normalizeComponentNames`, these two values match, and Vue will generate a component name that matches the Nuxt pattern for component naming.
 
+## normalizePageNames
+
+Ensure that page component names match their route names. This sets the `__name` property on page components so that Vue's `<KeepAlive>` can correctly identify them by name.
+
+By default, Vue assigns component names based on the filename. For example, `pages/foo/index.vue` and `pages/bar/index.vue` would both have the component name `index`. This makes name-based `<KeepAlive>` filtering unreliable because multiple pages share the same name.
+
+With `normalizePageNames` enabled, page components are named after their route (e.g. `foo` and `bar`), so you can use `<KeepAlive>` with `include`/`exclude` without manually adding `defineOptions({ name: '...' })` to each page.
+
+This flag is enabled when `future.compatibilityVersion` is set to `5` or higher, but you can disable this feature:
+
+```ts twoslash [nuxt.config.ts]
+export default defineNuxtConfig({
+  experimental: {
+    normalizePageNames: false,
+  },
+})
+```
+
+```vue [app.vue]
+<template>
+  <NuxtPage :keepalive="{ include: ['foo'] }" />
+</template>
+```
+
 ## spaLoadingTemplateLocation
 
 When rendering a client-only page (with `ssr: false`), we optionally render a loading screen (from `~/spa-loading-template.html`).

package/4.api/2.composables/use-cookie.md

@@ -36,6 +36,7 @@ export interface CookieOptions<T = any> extends Omit<CookieSerializeOptions & Co
   default?: () => T | Ref<T>
   watch?: boolean | 'shallow'
   readonly?: boolean
+  refresh?: boolean
 }
 
 export interface CookieRef<T> extends Ref<T> {}
@@ -60,6 +61,7 @@ Most of the options will be directly passed to the [cookie](https://github.com/j
 | `encode`      | `(value: T) => string` | `JSON.stringify` + `encodeURIComponent`                        | Custom function to encode the cookie value. Since the value of a cookie has a limited character set (and must be a simple string), this function can be used to encode a value into a string suited for a cookie's value.                                                                                                                                                                                                                                                                                                                                                                                                                          |
 | `default`     | `() => T \| Ref<T>`    | `undefined`                                                    | Function returning the default value if the cookie does not exist.  The function can also return a `Ref`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
 | `watch`       | `boolean \| 'shallow'` | `true`                                                         | Whether to watch for changes and update the cookie. `true` for deep watch, `'shallow'` for shallow watch, i.e. data changes for only top level properties, `false` to disable. <br/> **Note:** Refresh `useCookie` values manually when a cookie has changed with [`refreshCookie`](/docs/4.x/api/utils/refresh-cookie).                                                                                                                                                                                                                                                                                                                           |
+| `refresh`     | `boolean`              | `false`                                                        | If `true`, the cookie expiration will be refreshed on every explicit write (e.g. `cookie.value = cookie.value`), even if the value itself hasn’t changed. Note: the expiration is not refreshed automatically — you must assign to `.value` to trigger it.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
 | `readonly`    | `boolean`              | `false`                                                        | If `true`, disables writing to the cookie.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 | `maxAge`      | `number`               | `undefined`                                                    | Max age in seconds for the cookie, i.e. the value for the [`Max-Age` `Set-Cookie` attribute](https://datatracker.ietf.org/doc/html/rfc6265#section-5.2.2). The given number will be converted to an integer by rounding down. By default, no maximum age is set.                                                                                                                                                                                                                                                                                                                                                                                   |
 | `expires`     | `Date`                 | `undefined`                                                    | Expiration date for the cookie. By default, no expiration is set. Most clients will consider this a "non-persistent cookie" and will delete it on a condition like exiting a web browser application. <br/> **Note:** The [cookie storage model specification](https://datatracker.ietf.org/doc/html/rfc6265#section-5.3) states that if both `expires` and `maxAge` is set, then `maxAge` takes precedence, but not all clients may obey this, so if both are set, they should point to the same date and time! <br/>If neither of `expires` and `maxAge` is set, the cookie will be session-only and removed when the user closes their browser. |
@@ -163,6 +165,28 @@ function save () {
 </template>
 ```
 
+### Refreshing Cookies
+
+```vue
+<script setup lang="ts">
+const session = useCookie(
+  'session', {
+    maxAge: 60 * 60, // 1 hour
+    refresh: true,
+    default: () => 'active',
+  })
+
+// Even if the value does not change,
+// the cookie expiration will be refreshed
+// every time the setter is called
+session.value = 'active'
+</script>
+
+<template>
+  <div>Session: {{ session }}</div>
+</template>
+```
+
 ### Cookies in API Routes
 
 You can use `getCookie` and `setCookie` from [`h3`](https://github.com/h3js/h3) package to set cookies in server API routes.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/docs-nightly",
-  "version": "4.4.0-29533707.0a5a5c19",
+  "version": "4.4.0-29533984.c5133a48",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/nuxt.git",