@nuxt/docs-nightly 4.2.2-29382831.243261ed → 4.2.2-29385843.5bf66d4f

package/2.directory-structure/1.app/1.pages.md

@@ -6,7 +6,7 @@ navigation.icon: i-vscode-icons-folder-type-view
 ---
 
 ::note
-To reduce your application's bundle size, this directory is **optional**, meaning that [`vue-router`](https://router.vuejs.org) won't be included if you only use [`app.vue`](/docs/4.x/guide/directory-structure/app/app). To force the pages system, set `pages: true` in `nuxt.config` or have a [`router.options.ts`](/docs/4.x/guide/recipes/custom-routing#using-routeroptions).
+To reduce your application's bundle size, this directory is **optional**, meaning that [`vue-router`](https://router.vuejs.org) won't be included if you only use [`app.vue`](/docs/4.x/directory-structure/app/app). To force the pages system, set `pages: true` in `nuxt.config` or have a [`router.options.ts`](/docs/4.x/guide/recipes/custom-routing#using-routeroptions).
 ::
 
 ## Usage
@@ -46,7 +46,7 @@ export default defineComponent({
 
 The `app/pages/index.vue` file will be mapped to the `/` route of your application.
 
-If you are using [`app.vue`](/docs/4.x/guide/directory-structure/app/app), make sure to use the [`<NuxtPage/>`](/docs/4.x/api/components/nuxt-page) component to display the current page:
+If you are using [`app.vue`](/docs/4.x/directory-structure/app/app), make sure to use the [`<NuxtPage/>`](/docs/4.x/api/components/nuxt-page) component to display the current page:
 
 ```vue [app/app.vue]
 <template>
@@ -313,11 +313,11 @@ You can set a default value for this property [in your `nuxt.config`](/docs/4.x/
 
 #### `key`
 
-[See above](/docs/4.x/guide/directory-structure/app/pages#child-route-keys).
+[See above](/docs/4.x/directory-structure/app/pages#child-route-keys).
 
 #### `layout`
 
-You can define the layout used to render the route. This can be either false (to disable any layout), a string or a ref/computed, if you want to make it reactive in some way. [More about layouts](/docs/4.x/guide/directory-structure/app/layouts).
+You can define the layout used to render the route. This can be either false (to disable any layout), a string or a ref/computed, if you want to make it reactive in some way. [More about layouts](/docs/4.x/directory-structure/app/layouts).
 
 #### `layoutTransition` and `pageTransition`
 
@@ -327,7 +327,7 @@ You can set default values for these properties [in your `nuxt.config`](/docs/4.
 
 #### `middleware`
 
-You can define middleware to apply before loading this page. It will be merged with all the other middleware used in any matching parent/child routes. It can be a string, a function (an anonymous/inlined middleware function following [the global before guard pattern](https://router.vuejs.org/guide/advanced/navigation-guards#Global-Before-Guards)), or an array of strings/functions. [More about named middleware](/docs/4.x/guide/directory-structure/app/middleware).
+You can define middleware to apply before loading this page. It will be merged with all the other middleware used in any matching parent/child routes. It can be a string, a function (an anonymous/inlined middleware function following [the global before guard pattern](https://router.vuejs.org/guide/advanced/navigation-guards#Global-Before-Guards)), or an array of strings/functions. [More about named middleware](/docs/4.x/directory-structure/app/middleware).
 
 #### `name`
 
@@ -401,11 +401,11 @@ function navigate () {
 
 ## Client-Only Pages
 
-You can define a page as [client only](/docs/4.x/guide/directory-structure/app/components#client-components) by giving it a `.client.vue` suffix. None of the content of this page will be rendered on the server.
+You can define a page as [client only](/docs/4.x/directory-structure/app/components#client-components) by giving it a `.client.vue` suffix. None of the content of this page will be rendered on the server.
 
 ## Server-Only Pages
 
-You can define a page as [server only](/docs/4.x/guide/directory-structure/app/components#server-components) by giving it a `.server.vue` suffix. While you will be able to navigate to the page using client-side navigation, controlled by `vue-router`, it will be rendered with a server component automatically, meaning the code required to render the page will not be in your client-side bundle.
+You can define a page as [server only](/docs/4.x/directory-structure/app/components#server-components) by giving it a `.server.vue` suffix. While you will be able to navigate to the page using client-side navigation, controlled by `vue-router`, it will be rendered with a server component automatically, meaning the code required to render the page will not be in your client-side bundle.
 
 ::warning
 Server-only pages must have a single root element. (HTML comments are considered elements as well.)

package/2.directory-structure/1.app/1.plugins.md

@@ -134,7 +134,7 @@ export default defineNuxtPlugin({
 
 ## Using Composables
 
-You can use [composables](/docs/4.x/guide/directory-structure/app/composables) as well as [utils](/docs/4.x/guide/directory-structure/app/utils) within Nuxt plugins:
+You can use [composables](/docs/4.x/directory-structure/app/composables) as well as [utils](/docs/4.x/directory-structure/app/utils) within Nuxt plugins:
 
 ```ts [app/plugins/hello.ts]
 export default defineNuxtPlugin((nuxtApp) => {
@@ -200,7 +200,7 @@ const { $hello } = useNuxtApp()
 ```
 
 ::important
-Note that we highly recommend using [`composables`](/docs/4.x/guide/directory-structure/app/composables) instead of providing helpers to avoid polluting the global namespace and keep your main bundle entry small.
+Note that we highly recommend using [`composables`](/docs/4.x/directory-structure/app/composables) instead of providing helpers to avoid polluting the global namespace and keep your main bundle entry small.
 ::
 
 ::warning

package/2.directory-structure/1.app/1.utils.md

@@ -5,7 +5,7 @@ description: Use the utils/ directory to auto-import your utility functions thro
 navigation.icon: i-vscode-icons-folder-type-tools
 ---
 
-The main purpose of the [`app/utils/` directory](/docs/4.x/guide/directory-structure/app/utils) is to allow a semantic distinction between your Vue composables and other auto-imported utility functions.
+The main purpose of the [`app/utils/` directory](/docs/4.x/directory-structure/app/utils) is to allow a semantic distinction between your Vue composables and other auto-imported utility functions.
 
 ## Usage
 
@@ -40,10 +40,10 @@ You can now use auto imported utility functions in `.js`, `.ts` and `.vue` files
 :link-example{to="/docs/4.x/examples/features/auto-imports"}
 
 ::tip
-The way `app/utils/` auto-imports work and are scanned is identical to the [`app/composables/`](/docs/4.x/guide/directory-structure/app/composables) directory.
+The way `app/utils/` auto-imports work and are scanned is identical to the [`app/composables/`](/docs/4.x/directory-structure/app/composables) directory.
 ::
 
 ::important
 These utils are only available within the Vue part of your app. :br
-Only `server/utils` are auto-imported in the [`server/`](/docs/4.x/guide/directory-structure/server#server-utilities) directory.
+Only `server/utils` are auto-imported in the [`server/`](/docs/4.x/directory-structure/server#server-utilities) directory.
 ::

package/2.directory-structure/1.app/3.app.md

@@ -13,7 +13,7 @@ If you have a `app/pages/` directory, the `app.vue` file is optional. Nuxt will
 
 ### Minimal Usage
 
-With Nuxt, the [`app/pages/`](/docs/4.x/guide/directory-structure/app/pages) directory is optional. If it is not present, Nuxt will not include the [vue-router](https://router.vuejs.org) dependency. This is useful when building a landing page or an application that does not require routing.
+With Nuxt, the [`app/pages/`](/docs/4.x/directory-structure/app/pages) directory is optional. If it is not present, Nuxt will not include the [vue-router](https://router.vuejs.org) dependency. This is useful when building a landing page or an application that does not require routing.
 
 ```vue [app/app.vue]
 <template>
@@ -25,7 +25,7 @@ With Nuxt, the [`app/pages/`](/docs/4.x/guide/directory-structure/app/pages) dir
 
 ### Usage with Pages
 
-When you have a [`app/pages/`](/docs/4.x/guide/directory-structure/app/pages) directory, you need to use the [`<NuxtPage>`](/docs/4.x/api/components/nuxt-page) component to display the current page:
+When you have a [`app/pages/`](/docs/4.x/directory-structure/app/pages) directory, you need to use the [`<NuxtPage>`](/docs/4.x/api/components/nuxt-page) component to display the current page:
 
 ```vue [app/app.vue]
 <template>
@@ -51,7 +51,7 @@ You can also define the common structure of your application directly in `app.vu
 Remember that `app.vue` acts as the main component of your Nuxt application. Anything you add to it (JS and CSS) will be global and included in every page.
 ::
 
-::read-more{to="/docs/4.x/guide/directory-structure/app/pages"}
+::read-more{to="/docs/4.x/directory-structure/app/pages"}
 Learn more about how to structure your pages using the `app/pages/` directory.
 ::
 
@@ -67,6 +67,6 @@ When your application requires different layouts for different pages, you can us
 </template>
 ```
 
-::read-more{to="/docs/4.x/guide/directory-structure/app/layouts"}
+::read-more{to="/docs/4.x/directory-structure/app/layouts"}
 Learn more about how to structure your layouts using the `app/layouts/` directory.
 ::

package/2.directory-structure/1.content.md

@@ -36,7 +36,7 @@ The module automatically loads and parses them.
 
 ## Render Content
 
-To render content pages, add a [catch-all route](/docs/4.x/guide/directory-structure/app/pages/#catch-all-route) using the [`<ContentRenderer>`](https://content.nuxt.com/docs/components/content-renderer) component:
+To render content pages, add a [catch-all route](/docs/4.x/directory-structure/app/pages/#catch-all-route) using the [`<ContentRenderer>`](https://content.nuxt.com/docs/components/content-renderer) component:
 
 ```vue [app/pages/[...slug\\].vue]
 <script lang="ts" setup>

package/2.directory-structure/1.modules.md

@@ -11,7 +11,7 @@ The auto-registered files patterns are:
 - `modules/*/index.ts`
 - `modules/*.ts`
 
-You don't need to add those local modules to your [`nuxt.config.ts`](/docs/4.x/guide/directory-structure/nuxt-config) separately.
+You don't need to add those local modules to your [`nuxt.config.ts`](/docs/4.x/directory-structure/nuxt-config) separately.
 
 ::code-group
 

package/2.directory-structure/1.node_modules.md

@@ -8,5 +8,5 @@ navigation.icon: i-vscode-icons-folder-type-node
 The package manager ([`npm`](https://docs.npmjs.com/cli/commands/npm/) or [`yarn`](https://yarnpkg.com) or [`pnpm`](https://pnpm.io/cli/install) or [`bun`](https://bun.com/package-manager)) creates this directory to store the dependencies of your project.
 
 ::important
-This directory should be added to your [`.gitignore`](/docs/4.x/guide/directory-structure/gitignore) file to avoid pushing the dependencies to your repository.
+This directory should be added to your [`.gitignore`](/docs/4.x/directory-structure/gitignore) file to avoid pushing the dependencies to your repository.
 ::

package/2.directory-structure/1.server.md

@@ -58,7 +58,7 @@ export default defineEventHandler(() => 'Hello World!')
 Given the example above, the `/hello` route will be accessible at <http://localhost:3000/hello>.
 
 ::note
-Note that currently server routes do not support the full functionality of dynamic routes as [pages](/docs/4.x/guide/directory-structure/app/pages#dynamic-routes) do.
+Note that currently server routes do not support the full functionality of dynamic routes as [pages](/docs/4.x/directory-structure/app/pages#dynamic-routes) do.
 ::
 
 ## Server Middleware
@@ -134,7 +134,7 @@ export const defineWrappedResponseHandler = <T extends EventHandlerRequest, D> (
 
 Auto-imports and other types are different for the `server/` directory, as it is running in a different context from the `app/` directory.
 
-By default, Nuxt 4 generates a [`tsconfig.json`](/docs/4.x/guide/directory-structure/tsconfig) which includes a project reference covering the `server/` folder which ensures accurate typings.
+By default, Nuxt 4 generates a [`tsconfig.json`](/docs/4.x/directory-structure/tsconfig) which includes a project reference covering the `server/` folder which ensures accurate typings.
 
 ## Recipes
 
@@ -454,7 +454,7 @@ Never combine `next()` callback with a legacy middleware that is `async` or retu
 
 ### Server Storage
 
-Nitro provides a cross-platform [storage layer](https://nitro.build/guide/storage). In order to configure additional storage mount points, you can use `nitro.storage`, or [server plugins](/docs/4.x/guide/directory-structure/server#server-plugins).
+Nitro provides a cross-platform [storage layer](https://nitro.build/guide/storage). In order to configure additional storage mount points, you can use `nitro.storage`, or [server plugins](/docs/4.x/directory-structure/server#server-plugins).
 
 **Example of adding a Redis storage:**
 

package/2.directory-structure/1.shared.md

@@ -35,7 +35,7 @@ export default function (input: string) {
 }
 ```
 
-You can now use [auto-imported](/docs/4.x/guide/directory-structure/shared) utilities in your Nuxt app and `server/` directory.
+You can now use [auto-imported](/docs/4.x/directory-structure/shared) utilities in your Nuxt app and `server/` directory.
 
 ```vue [app/app.vue]
 <script setup lang="ts">
@@ -62,10 +62,10 @@ export default defineEventHandler((event) => {
 Only files in the `shared/utils/` and `shared/types/` directories will be auto-imported. Files nested within subdirectories of these directories will not be auto-imported unless you add these directories to `imports.dirs` and `nitro.imports.dirs`.
 
 ::tip
-The way `shared/utils` and `shared/types` auto-imports work and are scanned is identical to the [`app/composables/`](/docs/4.x/guide/directory-structure/app/composables) and [`app/utils/`](/docs/4.x/guide/directory-structure/app/utils) directories.
+The way `shared/utils` and `shared/types` auto-imports work and are scanned is identical to the [`app/composables/`](/docs/4.x/directory-structure/app/composables) and [`app/utils/`](/docs/4.x/directory-structure/app/utils) directories.
 ::
 
-:read-more{to="/docs/4.x/guide/directory-structure/app/composables#how-files-are-scanned"}
+:read-more{to="/docs/4.x/directory-structure/app/composables#how-files-are-scanned"}
 
 ```bash [Directory Structure]
 -| shared/

package/2.directory-structure/2.env.md

@@ -6,7 +6,7 @@ navigation.icon: i-vscode-icons-file-type-dotenv
 ---
 
 ::important
-This file should be added to your [`.gitignore`](/docs/4.x/guide/directory-structure/gitignore) file to avoid pushing secrets to your repository.
+This file should be added to your [`.gitignore`](/docs/4.x/directory-structure/gitignore) file to avoid pushing secrets to your repository.
 ::
 
 ## Dev, Build and Generate Time
@@ -75,5 +75,5 @@ Note that for a purely static site, it is not possible to set runtime configurat
 
 ::note
 If you want to use environment variables set at build time but do not care about updating these down the line (or only need to update them reactively _within_ your app) then `appConfig` may be a better choice. You can define `appConfig` both within your `nuxt.config` (using environment variables) and also within an `~/app.config.ts` file in your project.
-:read-more{to="/docs/4.x/guide/directory-structure/app/app-config"}
+:read-more{to="/docs/4.x/directory-structure/app/app-config"}
 ::

package/2.directory-structure/2.nuxtignore.md

@@ -8,7 +8,7 @@ navigation.icon: i-vscode-icons-file-type-nuxt
 
 The `.nuxtignore` file tells Nuxt to ignore files in your project’s root directory ([`rootDir`](/docs/4.x/api/nuxt-config#rootdir)) during the build phase.
 
-It is subject to the same specification as [`.gitignore`](/docs/4.x/guide/directory-structure/gitignore) and `.eslintignore` files, in which each line is a glob pattern indicating which files should be ignored.
+It is subject to the same specification as [`.gitignore`](/docs/4.x/directory-structure/gitignore) and `.eslintignore` files, in which each line is a glob pattern indicating which files should be ignored.
 
 ::tip
 You can also configure [`ignoreOptions`](/docs/4.x/api/nuxt-config#ignoreoptions), [`ignorePrefix`](/docs/4.x/api/nuxt-config#ignoreprefix) and [`ignore`](/docs/4.x/api/nuxt-config#ignore) in your `nuxt.config` file.

package/2.directory-structure/2.nuxtrc.md

@@ -8,7 +8,7 @@ navigation.icon: i-vscode-icons-file-type-nuxt
 The `.nuxtrc` file can be used to configure Nuxt with a flat syntax. It is based on [`unjs/rc9`](https://github.com/unjs/rc9).
 
 ::tip
-For more advanced configurations, use [`nuxt.config`](/docs/4.x/guide/directory-structure/nuxt-config).
+For more advanced configurations, use [`nuxt.config`](/docs/4.x/directory-structure/nuxt-config).
 ::
 
 ## Usage

package/2.directory-structure/3.nuxt-config.md

@@ -31,4 +31,4 @@ export default defineNuxtConfig({
 Discover all the available options in the **Nuxt configuration** documentation.
 ::
 
-To ensure your configuration is up to date, Nuxt will make a full restart when detecting changes in the main configuration file, the [`.env`](/docs/4.x/guide/directory-structure/env), [`.nuxtignore`](/docs/4.x/guide/directory-structure/nuxtignore) and [`.nuxtrc`](/docs/4.x/guide/directory-structure/nuxtrc) dotfiles.
+To ensure your configuration is up to date, Nuxt will make a full restart when detecting changes in the main configuration file, the [`.env`](/docs/4.x/directory-structure/env), [`.nuxtignore`](/docs/4.x/directory-structure/nuxtignore) and [`.nuxtrc`](/docs/4.x/directory-structure/nuxtrc) dotfiles.

package/2.directory-structure/3.package.md

@@ -27,6 +27,6 @@ The minimal `package.json` of your Nuxt application should looks like:
 }
 ```
 
-::read-more{icon="i-simple-icons-npm" to="https://docs.npmjs.com/cli/configuring-npm/package-json" target="_blank"}
+::read-more{icon="i-simple-icons-npm" to="https://docs.npmjs.com/cli/configuring-npm/package-json/" target="_blank"}
 Read more about the `package.json` file.
 ::

package/2.directory-structure/index.md

@@ -13,49 +13,49 @@ The root directory of a Nuxt application is the directory that contains the `nux
 ## App Directory
 
 The `app/` directory is the main directory of the Nuxt application. It contains the following subdirectories:
-- [`assets/`](/docs/directory-structure/app/assets): website's assets that the build tool (Vite or webpack) will process
-- [`components/`](/docs/directory-structure/app/components): Vue components of the application
-- [`composables/`](/docs/directory-structure/app/composables): add your Vue composables
-- [`layouts/`](/docs/directory-structure/app/layouts): Vue components that wrap around your pages and avoid re-rendering between pages
-- [`middleware/`](/docs/directory-structure/app/middleware): run code before navigating to a particular route
-- [`pages/`](/docs/directory-structure/app/pages): file-based routing to create routes within your web application
-- [`plugins/`](/docs/directory-structure/app/plugins): use Vue plugins and more at the creation of your Nuxt application
-- [`utils/`](/docs/directory-structure/app/utils): add functions throughout your application that can be used in your components, composables, and pages.
+- [`assets/`](/docs/4.x/directory-structure/app/assets): website's assets that the build tool (Vite or webpack) will process
+- [`components/`](/docs/4.x/directory-structure/app/components): Vue components of the application
+- [`composables/`](/docs/4.x/directory-structure/app/composables): add your Vue composables
+- [`layouts/`](/docs/4.x/directory-structure/app/layouts): Vue components that wrap around your pages and avoid re-rendering between pages
+- [`middleware/`](/docs/4.x/directory-structure/app/middleware): run code before navigating to a particular route
+- [`pages/`](/docs/4.x/directory-structure/app/pages): file-based routing to create routes within your web application
+- [`plugins/`](/docs/4.x/directory-structure/app/plugins): use Vue plugins and more at the creation of your Nuxt application
+- [`utils/`](/docs/4.x/directory-structure/app/utils): add functions throughout your application that can be used in your components, composables, and pages.
 
 This directory also includes specific files:
-- [`app.config.ts`](/docs/directory-structure/app/app-config): a reactive configuration within your application
-- [`app.vue`](/docs/directory-structure/app/app): the root component of your Nuxt application
-- [`error.vue`](/docs/directory-structure/app/error): the error page of your Nuxt application
+- [`app.config.ts`](/docs/4.x/directory-structure/app/app-config): a reactive configuration within your application
+- [`app.vue`](/docs/4.x/directory-structure/app/app): the root component of your Nuxt application
+- [`error.vue`](/docs/4.x/directory-structure/app/error): the error page of your Nuxt application
 
 ## Public Directory
 
-The [`public/`](/docs/directory-structure/public) directory is the directory that contains the public files of the Nuxt application. Files contained within this directory are served at the root and are not modified by the build process.
+The [`public/`](/docs/4.x/directory-structure/public) directory is the directory that contains the public files of the Nuxt application. Files contained within this directory are served at the root and are not modified by the build process.
 
 This is suitable for files that have to keep their names (e.g. `robots.txt`) _or_ likely won't change (e.g. `favicon.ico`).
 
 ## Server Directory
 
-The [`server/`](/docs/directory-structure/server) directory is the directory that contains the server-side code of the Nuxt application. It contains the following subdirectories:
-- [`api/`](/docs/directory-structure/server#server-routes): contains the API routes of the application.
-- [`routes/`](/docs/directory-structure/server#server-routes): contains the server routes of the application (e.g. dynamic `/sitemap.xml`).
-- [`middleware/`](/docs/directory-structure/server#server-middleware): run code before a server route is processed
-- [`plugins/`](/docs/directory-structure/server#server-plugins): use plugins and more at the creation of the Nuxt server
-- [`utils/`](/docs/directory-structure/server#server-utilities): add functions throughout your application that can be used in your server  code.
+The [`server/`](/docs/4.x/directory-structure/server) directory is the directory that contains the server-side code of the Nuxt application. It contains the following subdirectories:
+- [`api/`](/docs/4.x/directory-structure/server#server-routes): contains the API routes of the application.
+- [`routes/`](/docs/4.x/directory-structure/server#server-routes): contains the server routes of the application (e.g. dynamic `/sitemap.xml`).
+- [`middleware/`](/docs/4.x/directory-structure/server#server-middleware): run code before a server route is processed
+- [`plugins/`](/docs/4.x/directory-structure/server#server-plugins): use plugins and more at the creation of the Nuxt server
+- [`utils/`](/docs/4.x/directory-structure/server#server-utilities): add functions throughout your application that can be used in your server  code.
 
 ## Shared Directory
 
-The [`shared/`](/docs/directory-structure/shared) directory is the directory that contains the shared code of the Nuxt application and Nuxt server. This code can be used in both the Vue app and the Nitro server.
+The [`shared/`](/docs/4.x/directory-structure/shared) directory is the directory that contains the shared code of the Nuxt application and Nuxt server. This code can be used in both the Vue app and the Nitro server.
 
 ## Content Directory
 
-The [`content/`](/docs/directory-structure/content) directory is enabled by the [Nuxt Content](https://content.nuxt.com) module. It is used to create a file-based CMS for your application using Markdown files.
+The [`content/`](/docs/4.x/directory-structure/content) directory is enabled by the [Nuxt Content](https://content.nuxt.com) module. It is used to create a file-based CMS for your application using Markdown files.
 
 ## Modules Directory
 
-The [`modules/`](/docs/directory-structure/modules) directory is the directory that contains the local modules of the Nuxt application. Modules are used to extend the functionality of the Nuxt application.
+The [`modules/`](/docs/4.x/directory-structure/modules) directory is the directory that contains the local modules of the Nuxt application. Modules are used to extend the functionality of the Nuxt application.
 
 ## Nuxt Files
 
-- [`nuxt.config.ts`](/docs/directory-structure/nuxt-config) file is the main configuration file for the Nuxt application.
-- [`.nuxtrc`](/docs/directory-structure/nuxtrc) file is another syntax for configuring the Nuxt application (useful for global configurations).
-- [`.nuxtignore`](/docs/directory-structure/nuxtignore) file is used to ignore files in the root directory during the build phase.
+- [`nuxt.config.ts`](/docs/4.x/directory-structure/nuxt-config) file is the main configuration file for the Nuxt application.
+- [`.nuxtrc`](/docs/4.x/directory-structure/nuxtrc) file is another syntax for configuring the Nuxt application (useful for global configurations).
+- [`.nuxtignore`](/docs/4.x/directory-structure/nuxtignore) file is used to ignore files in the root directory during the build phase.

package/3.guide/1.concepts/{3.rendering.md → 1.rendering.md}

@@ -44,7 +44,7 @@ const handleClick = () => {
 
 On the initial request, the `counter` ref is initialized in the server since it is rendered inside the `<p>` tag. The contents of `handleClick` is never executed here. During hydration in the browser, the `counter` ref is re-initialized. The `handleClick` finally binds itself to the button; Therefore it is reasonable to deduce that the body of `handleClick` will always run in a browser environment.
 
-[Middlewares](/docs/4.x/guide/directory-structure/app/middleware) and [pages](/docs/4.x/guide/directory-structure/app/pages) run in the server and on the client during hydration. [Plugins](/docs/4.x/guide/directory-structure/app/plugins) can be rendered on the server or client or both. [Components](/docs/4.x/guide/directory-structure/app/components) can be forced to run on the client only as well. [Composables](/docs/4.x/guide/directory-structure/app/composables) and [utilities](/docs/4.x/guide/directory-structure/app/utils) are rendered based on the context of their usage.
+[Middlewares](/docs/4.x/directory-structure/app/middleware) and [pages](/docs/4.x/directory-structure/app/pages) run in the server and on the client during hydration. [Plugins](/docs/4.x/directory-structure/app/plugins) can be rendered on the server or client or both. [Components](/docs/4.x/directory-structure/app/components) can be forced to run on the client only as well. [Composables](/docs/4.x/directory-structure/app/composables) and [utilities](/docs/4.x/directory-structure/app/utils) are rendered based on the context of their usage.
 
 **Benefits of server-side rendering:**
 - **Performance**: Users can get immediate access to the page's content because browsers can display static content much faster than JavaScript-generated content. At the same time, Nuxt preserves the interactivity of a web application during the hydration process.
@@ -229,29 +229,3 @@ The current platforms where you can leverage ESR are:
 - [Netlify Edge Functions](https://www.netlify.com/platform/#netlify-edge-functions) using the `nuxt build` command and `NITRO_PRESET=netlify-edge` environment variable
 
 Note that **Hybrid Rendering** can be used when using Edge-Side Rendering with route rules.
-
-You can explore open source examples deployed on some of the platform mentioned above:
-::card-group
-  ::card
-  ---
-  icon: i-simple-icons-github
-  title: Nuxt Todos Edge
-  to: https://github.com/atinux/nuxt-todos-edge
-  target: _blank
-  ui.icon.base: text-black dark:text-white
-  ---
-  A todos application with user authentication, SSR and SQLite.
-  ::
-  ::card
-  ---
-  icon: i-simple-icons-github
-  title: Atinotes
-  to: https://github.com/atinux/atinotes
-  target: _blank
-  ui.icon.base: text-black dark:text-white
-  ---
-  An editable website with universal rendering based on Cloudflare KV.
-  ::
-::
-
-<!-- TODO: link to templates with ESR category for examples -->

package/3.guide/1.concepts/{2.vuejs-development.md → 10.vuejs-development.md}

@@ -1,6 +1,7 @@
 ---
 title: 'Vue.js Development'
 description: "Nuxt uses Vue.js and adds features such as component auto-imports, file-based routing and composables for an SSR-friendly usage."
+navigation: false
 ---
 
 Nuxt integrates Vue 3, the new major release of Vue that enables new patterns for Nuxt users.
@@ -25,13 +26,13 @@ We chose to build Nuxt on top of Vue for these reasons:
 
 ### Auto-imports
 
-Every Vue component created in the [`app/components/`](/docs/4.x/guide/directory-structure/app/components) directory of a Nuxt project will be available in your project without having to import it. If a component is not used anywhere, your production’s code will not include it.
+Every Vue component created in the [`app/components/`](/docs/4.x/directory-structure/app/components) directory of a Nuxt project will be available in your project without having to import it. If a component is not used anywhere, your production’s code will not include it.
 
 :read-more{to="/docs/4.x/guide/concepts/auto-imports"}
 
 ### Vue Router
 
-Most applications need multiple pages and a way to navigate between them. This is called **routing**. Nuxt uses an [`app/pages/`](/docs/4.x/guide/directory-structure/app/pages) directory and naming conventions to directly create routes mapped to your files using the official [Vue Router library](https://router.vuejs.org).
+Most applications need multiple pages and a way to navigate between them. This is called **routing**. Nuxt uses an [`app/pages/`](/docs/4.x/directory-structure/app/pages) directory and naming conventions to directly create routes mapped to your files using the official [Vue Router library](https://router.vuejs.org).
 
 :read-more{to="/docs/4.x/getting-started/routing"}
 
@@ -92,7 +93,7 @@ const increment = () => count.value++
 The goal of Nuxt is to provide a great developer experience around the Composition API.
 
 - Use auto-imported [Reactivity functions](https://vuejs.org/api/reactivity-core) from Vue and Nuxt [built-in composables](/docs/4.x/api/composables/use-async-data).
-- Write your own auto-imported reusable functions in the [`app/composables/` directory](/docs/4.x/guide/directory-structure/app/composables).
+- Write your own auto-imported reusable functions in the [`app/composables/` directory](/docs/4.x/directory-structure/app/composables).
 
 ### TypeScript Support
 

package/3.guide/1.concepts/{10.nuxt-lifecycle.md → 2.nuxt-lifecycle.md}

@@ -5,15 +5,16 @@ description: "Understanding the lifecycle of Nuxt applications can help you gain
 
 The goal of this chapter is to provide a high-level overview of the different parts of the framework, their execution order, and how they work together.
 
-## Server
+## Server lifecycle
 
 On the server, the following steps are executed for every initial request to your application:
 
-### Step 1: Setup Nitro Server and Nitro Plugins (Once)
+::steps
+### Server plugins :badge[once]{color="info" class="align-middle"}
 
 Nuxt is powered by [Nitro](https://nitro.build/), a modern server engine.
 
-When Nitro starts, it initializes and executes the plugins under the `/server/plugins` directory. These plugins can:
+When Nitro starts, it initializes and executes the plugins under the [`/server/plugins`](/docs/4.x/directory-structure/server#server-plugins) directory. These plugins can:
 - Capture and handle application-wide errors.
 - Register hooks that execute when Nitro shuts down.
 - Register hooks for request lifecycle events, such as modifying responses.
@@ -22,9 +23,9 @@ When Nitro starts, it initializes and executes the plugins under the `/server/pl
 Nitro plugins are executed only once when the server starts. In a serverless environment, the server boots on each incoming request, and so do the Nitro plugins. However, they are not awaited.
 ::
 
-:read-more{to="/docs/4.x/guide/directory-structure/server#server-plugins"}
+:read-more{to="/docs/4.x/directory-structure/server#server-plugins"}
 
-### Step 2: Nitro Server Middleware
+### Server middleware
 
 After initializing the Nitro server, middleware under `server/middleware/` is executed for every request. Middleware can be used for tasks such as authentication, logging, or request transformation.
 
@@ -32,23 +33,23 @@ After initializing the Nitro server, middleware under `server/middleware/` is ex
 Returning a value from middleware will terminate the request and send the returned value as the response. This behavior should generally be avoided to ensure proper request handling!
 ::
 
-:read-more{to="/docs/4.x/guide/directory-structure/server#server-middleware"}
+:read-more{to="/docs/4.x/directory-structure/server#server-middleware"}
 
-### Step 3: Initialize Nuxt and Execute Nuxt App Plugins
+### App plugins
 
-The Vue and Nuxt instances are created first. Afterward, Nuxt executes its server plugins. This includes:
+The Vue and Nuxt instances are created first. Afterward, Nuxt executes its app plugins. This includes:
 - Built-in plugins, such as Vue Router and `unhead`.
 - Custom plugins located in the `app/plugins/` directory, including those without a suffix (e.g., `myPlugin.ts`) and those with the `.server` suffix (e.g., `myServerPlugin.server.ts`).
 
-Plugins execute in a specific order and may have dependencies on one another. For more details, including execution order and parallelism, refer to the [Plugins documentation](/docs/4.x/guide/directory-structure/app/plugins).
+Plugins execute in a specific order and may have dependencies on one another. For more details, including execution order and parallelism, refer to the [Plugins documentation](/docs/4.x/directory-structure/app/plugins).
 
 ::callout{icon="i-lucide-lightbulb"}
 After this step, Nuxt calls the [`app:created`](/docs/4.x/api/advanced/hooks#app-hooks-runtime) hook, which can be used to execute additional logic.
 ::
 
-:read-more{to="/docs/4.x/guide/directory-structure/app/plugins"}
+:read-more{to="/docs/4.x/directory-structure/app/plugins"}
 
-### Step 4: Route Validation
+### Route validation
 
 After initializing plugins and before executing middleware, Nuxt calls the `validate` method if it is defined in the `definePageMeta` function. The `validate` method, which can be synchronous or asynchronous, is often used to validate dynamic route parameters.
 
@@ -59,7 +60,7 @@ For more information, see the [Route Validation documentation](/docs/4.x/getting
 
 :read-more{to="/docs/4.x/getting-started/routing#route-validation"}
 
-### Step 5: Execute Nuxt App Middleware
+### App middleware
 
 Middleware allows you to run code before navigating to a particular route. It is often used for tasks such as authentication, redirection, or logging.
 
@@ -70,13 +71,13 @@ In Nuxt, there are three types of middleware:
 
 Nuxt executes all global middleware on the initial page load (both on server and client) and then again before any client-side navigation. Named and anonymous middleware are executed only on the routes specified in the middleware property of the page(route) meta defined in the corresponding page components.
 
-For details about each type and examples, see the [Middleware documentation](/docs/4.x/guide/directory-structure/app/middleware).
+For details about each type and examples, see the [Middleware documentation](/docs/4.x/directory-structure/app/middleware).
 
 Any redirection on the server will result in a `Location:` header being sent to the browser; the browser then makes a fresh request to this new location. All application state will be reset when this happens, unless persisted in a cookie.
 
-:read-more{to="/docs/4.x/guide/directory-structure/app/middleware"}
+:read-more{to="/docs/4.x/directory-structure/app/middleware"}
 
-### Step 6: Render Page and Components
+### Page and components
 
 Nuxt renders the page and its components and fetches any required data with `useFetch` and `useAsyncData` during this step. Since there are no dynamic updates and no DOM operations occur on the server, Vue lifecycle hooks such as `onBeforeMount`, `onMounted`, and subsequent hooks are **NOT** executed during SSR.
 
@@ -94,7 +95,7 @@ You should avoid code that produces side effects that need cleanup in root scope
 Watch a video from Daniel Roe explaining Server Rendering and Global State.
 ::
 
-### Step 7: Generate HTML Output
+### HTML Output
 
 After all required data is fetched and the components are rendered, Nuxt combines the rendered components with settings from `unhead` to generate a complete HTML document. This HTML, along with the associated data, is then sent back to the client to complete the SSR process.
 
@@ -106,11 +107,15 @@ After rendering the Vue application to HTML, Nuxt calls the [`app:rendered`](/do
 Before finalizing and sending the HTML, Nitro will call the [`render:html`](/docs/4.x/api/advanced/hooks#nitro-app-hooks-runtime-server-side) hook. This hook allows you to manipulate the generated HTML, such as injecting additional scripts or modifying meta tags.
 ::
 
-## Client (browser)
+::
+
+## Client lifecycle
 
 This part of the lifecycle is fully executed in the browser, no matter which Nuxt mode you've chosen.
 
-### Step 1: Initialize Nuxt and Execute Nuxt App Plugins
+::steps
+
+### App plugins
 
 This step is similar to the server-side execution and includes both built-in and custom plugins.
 
@@ -120,21 +125,21 @@ Custom plugins in the `app/plugins/` directory, such as those without a suffix (
 After this step, Nuxt calls the [`app:created`](/docs/4.x/api/advanced/hooks#app-hooks-runtime) hook, which can be used to execute additional logic.
 ::
 
-:read-more{to="/docs/4.x/guide/directory-structure/app/plugins"}
+:read-more{to="/docs/4.x/directory-structure/app/plugins"}
 
-### Step 2: Route Validation
+### Route validation
 
 This step is the same as the server-side execution and includes the `validate` method if defined in the `definePageMeta` function.
 
-### Step 3: Execute Nuxt App Middleware
+### App middleware
 
 Nuxt middleware runs on both the server and the client. If you want certain code to run in specific environments, consider splitting it by using `import.meta.client` for the client and `import.meta.server` for the server.
 
-:read-more{to="/docs/4.x/guide/directory-structure/app/middleware#when-middleware-runs"}
+:read-more{to="/docs/4.x/directory-structure/app/middleware#when-middleware-runs"}
 
-### Step 4: Mount Vue Application and Hydration
+### Mount Vue app and hydrate
 
-Calling `app.mount('#__nuxt')` mounts the Vue application to the DOM. If the application uses SSR or SSG mode, Vue performs a hydration step to make the client-side application interactive. During hydration, Vue recreates the application (excluding [Server Components](/docs/4.x/guide/directory-structure/app/components#server-components)), matches each component to its corresponding DOM nodes, and attaches DOM event listeners.
+Calling `app.mount('#__nuxt')` mounts the Vue application to the DOM. If the application uses SSR or SSG mode, Vue performs a hydration step to make the client-side application interactive. During hydration, Vue recreates the application (excluding [Server Components](/docs/4.x/directory-structure/app/components#server-components)), matches each component to its corresponding DOM nodes, and attaches DOM event listeners.
 
 To ensure proper hydration, it's important to maintain consistency between the data on the server and the client. For API requests, it is recommended to use `useAsyncData`, `useFetch`, or other SSR-friendly composables. These methods ensure that the data fetched on the server side is reused during hydration, avoiding repeated requests. Any new requests should only be triggered after hydration, preventing hydration errors.
 
@@ -146,6 +151,8 @@ Before mounting the Vue application, Nuxt calls the [`app:beforeMount`](/docs/4.
 After mounting the Vue application, Nuxt calls the [`app:mounted`](/docs/4.x/api/advanced/hooks#app-hooks-runtime) hook.
 ::
 
-### Step 5: Vue Lifecycle
+### Vue lifecycle
 
 Unlike on the server, the browser executes the full [Vue lifecycle](https://vuejs.org/guide/essentials/lifecycle).
+
+::

package/3.guide/1.concepts/{1.auto-imports.md → 3.auto-imports.md}

@@ -11,7 +11,7 @@ const count = ref(1) // ref is auto-imported
 </script>
 ```
 
-Thanks to its opinionated directory structure, Nuxt can auto-import your [`app/components/`](/docs/4.x/guide/directory-structure/app/components), [`app/composables/`](/docs/4.x/guide/directory-structure/app/composables) and [`app/utils/`](/docs/4.x/guide/directory-structure/app/utils).
+Thanks to its opinionated directory structure, Nuxt can auto-import your [`app/components/`](/docs/4.x/directory-structure/app/components), [`app/composables/`](/docs/4.x/directory-structure/app/composables) and [`app/utils/`](/docs/4.x/directory-structure/app/utils).
 
 Contrary to a classic global declaration, Nuxt preserves typings, IDEs completions and hints, and **only includes what is used in your production code**.
 
@@ -20,7 +20,7 @@ In the docs, every function that is not explicitly imported is auto-imported by
 ::
 
 ::note
-In the [`server`](/docs/4.x/guide/directory-structure/server) directory, Nuxt auto-imports exported functions and variables from `server/utils/`.
+In the [`server`](/docs/4.x/directory-structure/server) directory, Nuxt auto-imports exported functions and variables from `server/utils/`.
 ::
 
 ::note
@@ -101,8 +101,8 @@ export const useMyComposable = () => {
 
 Nuxt directly auto-imports files created in defined directories:
 
-- `app/components/` for [Vue components](/docs/4.x/guide/directory-structure/app/components).
-- `app/composables/` for [Vue composables](/docs/4.x/guide/directory-structure/app/composables).
+- `app/components/` for [Vue components](/docs/4.x/directory-structure/app/components).
+- `app/composables/` for [Vue composables](/docs/4.x/directory-structure/app/composables).
 - `app/utils/` for helper functions and other utilities.
 
 :link-example{to="/docs/4.x/examples/features/auto-imports"}
@@ -167,7 +167,7 @@ With this configuration:
 
 Nuxt also automatically imports components from your `~/components` directory, although this is configured separately from auto-importing composables and utility functions.
 
-:read-more{to="/docs/4.x/guide/directory-structure/app/components"}
+:read-more{to="/docs/4.x/directory-structure/app/components"}
 
 To disable auto-importing components from your own `~/components` directory, you can set `components.dirs` to an empty array (though note that this will not affect components added by modules).