docs: update sitemap (#4063)

Co-authored-by: Sébastien Chopin <seb@nuxtjs.com>
Co-authored-by: pooya parsa <pyapar@gmail.com>

docs/.gitignore

@@ -1,2 +1,2 @@
 schema
-*.nuxt.config.md
+**/*.configuration/nuxt.config.md

docs/README.md

@@ -0,0 +1,4 @@
+# Nuxt 3 Docs
+
+- Website: https://v3.nuxtjs.org/
+- Setup and Contribution Guide: https://v3.nuxtjs.org/community/contribution#documentation-guide

docs/assets/nuxt.css

@@ -24,3 +24,7 @@ button:focus-visible, div:focus-visible, a:focus-visible {
   border-radius: 2px;
   box-shadow: 0 0 0 2px #00DC82;
 }
+
+h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
+  font-size: inherit !important;
+}

docs/components/templates/AutoGenerated.vue

@@ -0,0 +1,8 @@
+<template>
+  <Alert icon="🤖">
+    This section is auto generated from source-code.
+  </Alert>
+</template>
+
+<script>
+</script>

docs/components/templates/NeedContribution.vue

@@ -0,0 +1,11 @@
+<template>
+  <Alert type="warning" icon="🚧">
+    Documentation for this section is not yet complete. You can
+    <NuxtLink to="/community/contribution#documentation-guide">
+      contribute to the documentation.
+    </NuxtLink>
+  </Alert>
+</template>
+
+<script>
+</script>

docs/components/templates/ReadMore.vue

@@ -0,0 +1,30 @@
+<template>
+  <Alert icon="👉">
+    Read more in <Link :to="link" v-text="computedTitle" />.
+  </Alert>
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+import { splitByCase, upperFirst } from 'scule'
+
+export default defineComponent({
+  props: {
+    link: {
+      type: String,
+      required: true
+    },
+    title: {
+      type: String,
+      required: false
+    }
+  },
+  computed: {
+    computedTitle () {
+      // Guess title from link!
+      return this.title || this.link.split('/')
+        .filter(Boolean).map(part => splitByCase(part).map(p => upperFirst(p)).join(' ')).join(' > ')
+    }
+  }
+})
+</script>

docs/content/1.getting-started/1.introduction.md

@@ -1,95 +0,0 @@
-# Introduction
-
-Getting started with Nuxt 3 is straightforward.
-
-::alert{type=warning icon=🚧}
-Nuxt 3 is currently in beta, keep in mind that **it is not yet production-ready**.<br>
-Thank you in advance for your understanding 💛 Check out the [roadmap](/community/roadmap) for more info.
-::
-
-## What is Nuxt?
-
-If this is the first time you're learning about Nuxt or you want to get more familiar with Nuxt 3, we recommend you begin by reading the [Concepts section](/concepts).
-
-## Prerequisites
-
-Before getting started, please make sure you have installed the recommended setup.
-
-* **Node.js**<sup>*</sup> (latest LTS version) 👉 [[Download](https://nodejs.org/en/download/)]
-* **Visual Studio Code** 👉 [[Download](https://code.visualstudio.com/)]
-* **Volar Extension** 👉 [[Download](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)]
-  * Either enable [**Take Over Mode**](https://github.com/johnsoncodehk/volar/discussions/471) (recommended)
-  * ... or add **TypeScript Vue Plugin (Volar)** 👉 [[Download](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin)]
-
-<sup>*</sup> If you already have Node.js installed, check with `node --version` that you are using `v14` or `v16`.
-
-::alert{type=info}
-
-If you have enabled **Take Over Mode** or installed the **TypeScript Vue Plugin (Volar)** you can disable generating the shim for `*.vue` files:
-
-```js
-export default defineNuxtConfig({
-  typescript: {
-    shim: false
-  }
-})
-```
-
-::
-
-## Nuxt 3 or Bridge?
-
-Next, decide whether to start from scratch or upgrade an existing Nuxt 2 project.
-
-### Starting a fresh Nuxt project
-
-::list{type=info}
-
-* Enjoy using Vue 3
-* All the new composables are available
-* New templating system and conventions are enabled
-::
-
-::alert{icon=👉}
-Checkout the [Installation section](/getting-started/installation).
-::
-
-### Migrating a Nuxt 2 project
-
-If you have an existing Nuxt 2 project, we **strongly recommend** you begin by using Nuxt Bridge. This way you can try most new features while keeping breaking changes to a minimum.
-
-::list{type=info}
-
-* It's risk-free! You can always remove the module from your config
-* Makes your project (almost) ready for Nuxt 3
-* Enjoy new DX improvements without major rewrites for Vue 3
-* Use Nitro engine for platform-agnostic and optimized deployments
-* Help us stabilize Nuxt 3 and discover flaws
-* Nuxt Bridge is more stable than Nuxt 3 at the moment
-::
-
-::alert{icon=👉}
-Checkout the [Bridge installation section](/getting-started/bridge).
-::
-
-### ‍Comparison
-
-In the table below, there is a quick comparison between 3 versions of Nuxt:
-
-Feature / Version        | Nuxt 2          | Nuxt Bridge      | Nuxt 3
--------------------------|-----------------|------------------|---------
-Vue                      | 2               | 2                | 3
-Stability                | 😊 Stable      | 😌 Semi-stable   | 😬 Unstable
-Performance              | 🏎 Fast        | ✈️ Faster        | 🚀 Fastest
-Nitro Engine             | ❌             | ✅               | ✅
-ESM support              | 🌙 Partial     | 👍 Better        | ✅
-TypeScript               | ☑️ Opt-in      | 🚧 Partial       | ✅
-Composition API          | ❌             | 🚧 Partial       | ✅
-Options API              | ✅             | ✅               | ✅
-Components Auto Import   | ✅             | ✅               | ✅
-`<script setup>` syntax  | ❌             | 🚧 Partial       | ✅
-Auto Imports             | ❌             | ✅               | ✅
-Webpack                  | 4              | 4                | 5
-Vite                     | ⚠️ Partial     | 🚧 Partial       | 🚧 Experimental
-Nuxi CLI                 | ❌ Old         | ✅ nuxi          | ✅ nuxi
-Static sites             | ✅             | ✅               | 🚧

docs/content/1.getting-started/1.quick-start.md

@@ -1,11 +1,6 @@
-# Installation
+# Quick Start
 
-Getting started with Nuxt 3 is straightforward.
-
-::alert
-If you want to migrate an existing Nuxt 2 project, skip this and follow the [Bridge instructions](/getting-started/bridge) instead.<br>
-Learn more in [Introduction](/getting-started/introduction).
-::
+Starting fresh? Getting started with Nuxt 3 is straightforward!
 
 ## Play online
 
@@ -14,6 +9,32 @@ You can start playing with Nuxt 3 in your browser using our online sandboxes:
 :button-link[Play on StackBlitz]{href="https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz" blank}
 :button-link[Play on CodeSandbox]{href="https://codesandbox.io/s/github/nuxt/starter/tree/v3-codesandbox" blank}
 
+## Prerequisites
+
+Before getting started, please make sure you have installed the recommended setup.
+
+* **Node.js**<sup>*</sup> (latest LTS version) 👉 [[Download](https://nodejs.org/en/download/)]
+* **Visual Studio Code** 👉 [[Download](https://code.visualstudio.com/)]
+* **Volar Extension** 👉 [[Download](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)]
+  * Either enable [**Take Over Mode**](https://github.com/johnsoncodehk/volar/discussions/471) (recommended)
+  * ... or add **TypeScript Vue Plugin (Volar)** 👉 [[Download](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin)]
+
+<sup>*</sup> If you already have Node.js installed, check with `node --version` that you are using `v14` or `v16`.
+
+::alert{type=info}
+
+If you have enabled **Take Over Mode** or installed the **TypeScript Vue Plugin (Volar)** you can disable generating the shim for `*.vue` files:
+
+```js
+export default defineNuxtConfig({
+  typescript: {
+    shim: false
+  }
+})
+```
+
+::
+
 ## New project
 
 Open a terminal, or from [Visual Studio Code](https://code.visualstudio.com/), open an [integrated terminal](https://code.visualstudio.com/docs/editor/integrated-terminal) and use the following command to create a new starter project:
@@ -86,5 +107,5 @@ Well done! A browser window should automatically open for <http://localhost:3000
 
 Now that you've created your Nuxt 3 project, you are ready to start building your application.
 
-- Learn about the [Concepts](/concepts)
-- Learn more about the [Usage](/docs)
+* Learn about the framework [concepts](/guide/concepts)
+* Learn more about the framework [features](/guide/features)

docs/content/1.getting-started/2.migration.md

@@ -0,0 +1,28 @@
+# Migration Guide
+
+Already have a Nuxt project to migrate? These migration guides are for users wanting to upgrade their Nuxt application to Nuxt 3 or take a first step in that direction with Nuxt Bridge.
+
+- [**From Nuxt 2 to Nuxt 3**](/migration/overview)
+- [From Nuxt 2 to Nuxt Bridge](/bridge/overview)
+
+## Feature Comparation
+
+In the table below, there is a quick comparison between 3 versions of Nuxt:
+
+Feature / Version        | Nuxt 2          | Nuxt Bridge      | Nuxt 3
+-------------------------|-----------------|------------------|---------
+Vue                      | 2               | 2                | 3
+Stability                | 😊 Stable      | 😌 Semi-stable   | 😬 Unstable
+Performance              | 🏎 Fast        | ✈️ Faster        | 🚀 Fastest
+Nitro Engine             | ❌             | ✅               | ✅
+ESM support              | 🌙 Partial     | 👍 Better        | ✅
+TypeScript               | ☑️ Opt-in      | 🚧 Partial       | ✅
+Composition API          | ❌             | 🚧 Partial       | ✅
+Options API              | ✅             | ✅               | ✅
+Components Auto Import   | ✅             | ✅               | ✅
+`<script setup>` syntax  | ❌             | 🚧 Partial       | ✅
+Auto Imports             | ❌             | ✅               | ✅
+Webpack                  | 4              | 4                | 5
+Vite                     | ⚠️ Partial     | 🚧 Partial       | 🚧 Experimental
+Nuxi CLI                 | ❌ Old         | ✅ nuxi          | ✅ nuxi
+Static sites             | ✅             | ✅               | 🚧

docs/content/1.getting-started/3.commands.md

@@ -1,73 +0,0 @@
-# Commands
-
-Nuxi is the new CLI experience for Nuxt 3
-
-Nuxt 3 has two main commands, one to start the development server and one to make production assets.
-
-Since Nuxt 3 becomes a dev dependency thanks to the new [Nitro server](/concepts/server-engine), you only need to add two commands in your `package.json`:
-
-```json [package.json]
-"scripts": {
-  "dev": "nuxi dev",
-  "build": "nuxi build",
-}
-```
-
-Then, you can run each command using `npm run <command>` or `yarn <command>`.
-
-## Development Server
-
-To start Nuxt in development mode with hot module replacement on <http://localhost:3000>:
-
-::code-group
-
-```bash [Yarn]
-yarn dev
-```
-
-```bash [NPM]
-npm run dev
-```
-
-::
-
-To start Nuxt in development mode with HTTPS <https://localhost:3000> (self-signed certificate):
-
-::code-group
-
-```bash [Yarn]
-yarn dev --https
-```
-
-```bash [NPM]
-npm run dev -- --https
-```
-
-::
-::alert
-`options.server` from `nuxt.config` is not supported. You can use `--port`, `--host`, `--https`, `--ssl-cert` and `--ssl-key` instead.
-::
-
-## Building for production
-
-To build your Nuxt application for production, run:
-
-::code-group
-
-```bash [Yarn]
-yarn build
-```
-
-```bash [NPM]
-npm run build
-```
-
-::
-
-Nuxt will create a [`.output`](/docs/directory-structure/output) directory with all your application, server and dependencies ready to be deployed. Check out the [deployment](/docs/deployment) section to learn where and how you can deploy a Nuxt application using Nitro.
-
-## CLI glossary
-
-::alert{type="success"}
-Nuxi has more commands listed in a complete [CLI glossary](/docs/usage/cli)
-::

docs/content/1.getting-started/index.md

@@ -3,5 +3,5 @@ title: Get Started
 layout.aside: true
 layout.asideClass: ''
 navigation.exclusive: true
-navigation.redirect: /getting-started/introduction
+navigation.redirect: /getting-started/quick-start
 ---

docs/content/2.guide/1.concepts/1.introduction.md

@@ -18,7 +18,7 @@ This is only the tip of the iceberg, imagine having to set up all of this for yo
 
 Nuxt takes care of this so you can focus on what matters: **creating your web application**.
 
-On top of this setup, Nuxt provides a [directory structure](/docs/directory-structure/app) to follow, focused on specific features to keep your focus on creating, not configuring.
+On top of this setup, Nuxt provides a [directory structure](/guide/directory-structure) to follow, focused on specific features to keep your focus on creating, not configuring.
 
 ## How does it work?
 
@@ -42,7 +42,7 @@ Nuxt is the backbone of your Vue.js project, giving structure to build your proj
 Extendable with a strong module ecosystem and hooks engine, it makes it easy to connect your REST or GraphQL endpoints, favorite CMS, CSS frameworks and more. PWA and AMP support is only a module away from your Nuxt project.
 
 ::alert{type=info icon=👍}
-Ready to try? Head over the [Installation section](/getting-started/installation).
+Ready to try? Head over the [Installation section](/getting-started/quick-start).
 ::
 
 ### Are you *courageously* Nuxt?

docs/content/2.guide/1.concepts/2.vuejs-development.md

@@ -1,4 +1,4 @@
-# Vue.js development
+# Vue.js Development
 
 Nuxt uses Vue as a frontend framework, and adds features such as components auto-imports and file-based routing. Nuxt 3 integrates Vue 3, the new major release of Vue that enables new patterns for Nuxt users.
 
@@ -21,11 +21,11 @@ Nuxt has always used Vue as a frontend framework. We chose to build Nuxt in top
 
 ### Components auto-imports
 
-Every Vue components created in the [`components/` directory](/docs/directory-structure/components) of a Nuxt project will be available in your project without having to import them. If a component is not used anywhere, your production’s code will not include it.
+Every Vue components created in the [`components/` directory](/guide/directory-structure/components) of a Nuxt project will be available in your project without having to import them. If a component is not used anywhere, your production’s code will not include it.
 
 ### Vue Router
 
-Most applications need multiple pages and a way to navigate between them. This is called **routing**. Nuxt uses a [`pages/` directory](/docs/directory-structure/pages) 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 a [`pages/` directory](/guide/directory-structure/pages) and naming conventions to directly create routes mapped to your files using the official [Vue Router library](https://router.vuejs.org/).
 
 ### Example
 
@@ -44,7 +44,7 @@ Try to replace the `<template>`’s content with a custom welcome message. The b
 
 **If you were a previous user of Nuxt 2 or Vue 2, keep reading to get a feel of the differences between Vue 2 and Vue 3, and how Nuxt integrates those evolutions.**
 
-**Otherwise, go to the next chapter to discover another key feature of Nuxt: [Rendering modes](/concepts/rendering)**
+**Otherwise, go to the next chapter to discover another key feature of Nuxt: [Rendering modes](guide/concepts/rendering)**
 
 ## Differences with Nuxt 2 / Vue 2
 
@@ -100,7 +100,7 @@ Used with the `setup` keyword in the `<script>` definition, here is the above co
 
 The goal of Nuxt 3 is to provide a great developer experience around the Composition API.
 
-- Use auto-imported [Reactivity functions](https://vuejs.org/api/reactivity-core.html) from Vue and Nuxt 3 [built-in composables](/docs/usage/data-fetching).
+- Use auto-imported [Reactivity functions](https://vuejs.org/api/reactivity-core.html) from Vue and Nuxt 3 [built-in composables](/api/composables).
 - Write your own auto-imported reusable functions in the `composables/` directory.
 
 ### TypeScript support
@@ -108,5 +108,5 @@ The goal of Nuxt 3 is to provide a great developer experience around the Composi
 Both Vue 3 and Nuxt 3 are written in TypeScript. A fully typed codebase prevents mistakes and documents APIs usage. This doesn’t mean that you have to write your application in TypeScript to take advantage of it. With Nuxt 3, you can opt-in by renaming your file from `.js` to `.ts` , or add `<script lang="ts">` in a component.
 
 ::alert{type="info"}
-🔎 [Read the details about TypeScript in Nuxt 3](/concepts/typescript)
+🔎 [Read the details about Typescript in Nuxt 3](/guide/concepts/typescript)
 ::

docs/content/2.guide/1.concepts/3.rendering.md

@@ -57,7 +57,7 @@ Universal rendering is very versatile and can fit almost any use-case, and is es
 
 Client-side and universal rendering are different strategies to display an interface in a browser.
 
-By default, Nuxt uses **universal rendering** to provide a better User experience, performance and optimize search engine indexation, but you can switch rendering modes in [one line of configuration](/docs/directory-structure/nuxt.config#ssr).
+By default, Nuxt uses **universal rendering** to provide a better User experience, performance and optimize search engine indexation, but you can switch rendering modes in [one line of configuration](/guide/directory-structure/nuxt.config#ssr).
 
 ## Coming in Nuxt 3
 
@@ -75,6 +75,6 @@ At the moment, every page (or **route**) of a Nuxt application must use the same
 
 Traditionally, server-side and universal rendering was only possible using Node.js. Nuxt 3 takes it to another level by directly rendering code in CDN edge workers, reducing latency and costs.
 
-Nitro is the new [server engine](/concepts/server-engine) that powers Nuxt 3. It offers cross-platform support for Node.js, Deno, Workers, and more. Nitro's design is platform-agnostic and allows rendering a Nuxt application at the edge, closer to your users, allowing replication and further optimizations.
+Nitro is the new [server engine](/guide/concepts/server-engine) that powers Nuxt 3. It offers cross-platform support for Node.js, Deno, Workers, and more. Nitro's design is platform-agnostic and allows rendering a Nuxt application at the edge, closer to your users, allowing replication and further optimizations.
 
-[Deploy your Nuxt 3 application on serverless providers](/docs/deployment/presets)
+[Deploy your Nuxt 3 application on serverless providers](/guide/deployment/presets)

docs/content/2.guide/1.concepts/4.auto-imports.md

@@ -1,4 +1,4 @@
-# Auto imports
+# Auto Imports
 
 Nuxt auto-imports helper functions, composables and Vue APIs to use across your application without explicitly importing them. Based on the directory structure, every Nuxt application can also use auto-imports for its own components, composables and plugins. Components, composables or plugins can use these functions.
 
@@ -9,16 +9,16 @@ In the documentation, every function that is not explicitly imported is auto-imp
 ::
 
 ::alert{type=info icon=🚧}
-We are working on a proper API reference that will include every Nuxt auto-imports. For now, you can find a reference on the framework repository: [github.com/nuxt/framework/blob/main/packages/nuxt3/src/auto-imports/imports.ts](https://github.com/nuxt/framework/blob/main/packages/nuxt3/src/auto-imports/imports.ts)  
+We are working on a proper API reference that will include every Nuxt auto-imports. For now, you can find a reference on the framework repository in [presets.ts](https://github.com/nuxt/framework/blob/main/packages/nuxt3/src/auto-imports/presets.ts)
 ::
 
 ::alert{type=warning}
-Auto imports don't currently work within the [server directory](/docs/directory-structure/server).
+Auto imports don't currently work within the [server directory](/guide/directory-structure/server).
 ::
 
 ## Nuxt auto-imports
 
-Nuxt auto-imports functions and composables to perform [data fetching](/docs/usage/data-fetching), get access to the [app context](/docs/usage/nuxt-app) and [runtime config](/docs/usage/runtime-config), manage [state](/docs/usage/state) or define components and plugins.
+Nuxt auto-imports functions and composables to perform [data fetching](/guide/features/data-fetching), get access to the [app context](/api/composables/use-nuxt-app) and [runtime config](/guide/features/runtime-config), manage [state](/guide/features/state-management) or define components and plugins.
 
 ```vue
 <script setup>
@@ -43,8 +43,8 @@ Vue 3 exposes Reactivity APIs like `ref` or `computed`, as well as lifecycle hoo
 
 Nuxt directly auto-imports files created in defined directories:
 
-- `components/` for [Vue components](/docs/directory-structure/components).
-- `composables/` for [Vue composables](/docs/directory-structure/composables).
+- `components/` for [Vue components](/guide/directory-structure/components).
+- `composables/` for [Vue composables](/guide/directory-structure/composables).
 
 ## Explicit imports
 

docs/content/2.guide/1.concepts/4.server-engine.md

@@ -15,7 +15,7 @@ This engine has many benefits:
 
 ## API Layer
 
-Server [API endpoints](/docs/directory-structure/server#api-routes) and [Middleware](/docs/directory-structure/server#server-middleware) are added by Nitro that internally uses [h3](https://github.com/unjs/h3).
+Server [API endpoints](/guide/directory-structure/server#api-routes) and [Middleware](/guide/directory-structure/server#server-middleware) are added by Nitro that internally uses [h3](https://github.com/unjs/h3).
 
 Key features include:
 
@@ -26,7 +26,7 @@ Key features include:
 Check out [the h3 docs](https://github.com/unjs/h3) for more information.
 
 ::alert{type="info" icon=ℹ️}
-Learn more about the API layer in the [`server/`](/docs/directory-structure/server) directory.
+Learn more about the API layer in the [`server/`](/guide/directory-structure/server) directory.
 ::
 
 ## Direct API calls
@@ -52,7 +52,7 @@ Nitro produces a standalone server dist that is independent of `node_modules`.
 
 The server in Nuxt 2 is not standalone, but requires part of Nuxt core to be involved running `nuxt start` (with the [`nuxt-start`](https://www.npmjs.com/package/nuxt-start) or [`nuxt`](https://www.npmjs.com/package/nuxt) distributions) or custom programmatic usage, which was fragile and prone to breakage and not suitable for serverless and service-worker environments.
 
-Nuxt 3 generates this dist when running `nuxt build` into a [`.output`](/docs/directory-structure/output) directory.
+Nuxt 3 generates this dist when running `nuxt build` into a [`.output`](/guide/directory-structure/output) directory.
 
 The output is combined with both runtime code to run your Nuxt server in any environment (including experimental browser Service Workers!) and serve you static files, making it a true hybrid framework for the JAMstack. In addition, a native storage layer is implemented, supporting multi source, drivers and local assets.
 

docs/content/2.guide/1.concepts/6.typescript.md

@@ -4,7 +4,7 @@ Nuxt 3 is fully typed and provides helpful shortcuts to ensure you have access t
 
 ## Type-checking
 
-By default, Nuxt doesn't check types when you run `nuxi dev` or `nuxi build`, for performance reasons. However, you can [manually check your types with nuxi](/getting-started/commands).
+By default, Nuxt doesn't check types when you run `nuxi dev` or `nuxi build`, for performance reasons. However, you can [manually check your types with nuxi](/api/commands/typecheck).
 
 ```bash
 yarn nuxi typecheck
@@ -24,10 +24,10 @@ Some of the references in the file are to files that are only generated within y
 
 This file contains the recommended basic TypeScript configuration for your project, including resolved aliases injected by Nuxt or modules you are using, so you can get full type support and path auto-complete for aliases like `~/file` or `#build/file`.
 
-[Read more about how to extend this configuration](/docs/directory-structure/tsconfig).
+[Read more about how to extend this configuration](/guide/directory-structure/tsconfig).
 
 ::alert{icon=👉}
-Nitro also [auto-generates types](/concepts/server-engine#typed-api-routes) for API routes. Plus, Nuxt also generates types for globally available components and [auto-imports from your composables](/docs/directory-structure/composables), plus other core functionality.
+Nitro also [auto-generates types](/guide/concepts/server-engine#typed-api-routes) for API routes. Plus, Nuxt also generates types for globally available components and [auto-imports from your composables](/guide/directory-structure/composables), plus other core functionality.
 ::
 ::alert
 Keep in mind that all options extended from `./.nuxt/tsconfig.json` will be overwritten by the options defined in your `tsconfig.json`.

docs/content/2.guide/1.concepts/index.md

@@ -0,0 +1,6 @@
+---
+title: Concepts
+layout.aside: true
+layout.asideClass: ''
+navigation.redirect: /guide/concepts/introduction
+---

docs/content/2.guide/2.features/1.views.md

@@ -0,0 +1,13 @@
+# Views
+
+::NeedContribution
+::
+
+::ReadMore{link="/guide/directory-structure/components"}
+::
+
+::ReadMore{link="/guide/directory-structure/pages"}
+::
+
+::ReadMore{link="/guide/directory-structure/layouts"}
+::

docs/content/2.guide/2.features/10.runtime-config.md

@@ -4,7 +4,7 @@ Nuxt provides an API to define the runtime config within your application and AP
 
 ## Exposing runtime config
 
-To expose config and environment variables to the rest of your app, you will need to define runtime configuration in your `nuxt.config` file, using either the [`privateRuntimeConfig` or `publicRuntimeConfig` options](/docs/directory-structure/nuxt.config#privateruntimeconfig) (based on whether you want it to be accessible on the client-side part of your app or not).
+To expose config and environment variables to the rest of your app, you will need to define runtime configuration in your `nuxt.config` file, using either the [`privateRuntimeConfig` or `publicRuntimeConfig` options](/guide/directory-structure/nuxt.config#privateruntimeconfig) (based on whether you want it to be accessible on the client-side part of your app or not).
 
 **Example:**
 

docs/content/2.guide/2.features/13.modules.md

@@ -0,0 +1,10 @@
+# Modules
+
+::ReadMore{link="https://modules.nuxtjs.org/?version=3.x" title="Nuxt 3 Compatible Modules"}
+::
+
+::ReadMore{link="/guide/going-further/modules" title="Module Author Guide"}
+::
+
+::NeedContribution
+::

docs/content/2.guide/2.features/2.routing.md

@@ -0,0 +1,10 @@
+# Routing
+
+::NeedContribution
+::
+
+::ReadMore{link="/guide/directory-structure/pages"}
+::
+
+::ReadMore{link="/guide/directory-structure/middleware"}
+::

docs/content/2.guide/2.features/3.assets.md

@@ -0,0 +1,10 @@
+# Assets
+
+::NeedContribution
+::
+
+::ReadMore{link="/guide/directory-structure/assets"}
+::
+
+::ReadMore{link="/guide/directory-structure/public"}
+::

docs/content/2.guide/2.features/4.head-management.md

@@ -1,4 +1,4 @@
-# Meta Tags
+# Head Management
 
 You can customize the meta tags for your site through several different ways:
 
@@ -23,6 +23,9 @@ export default {
 }
 ```
 
+::ReadMore{link="/api/composables/use-head"}
+::
+
 ## Meta Components
 
 Nuxt provides `<Title>`, `<Base>`, `<Script>`, `<Style>`, `<Meta>`, `<Link>`, `<Body>`, `<Html>` and `<Head>` components so that you can interact directly with your metadata within your component's template.

docs/content/2.guide/2.features/5.data-fetching.md

@@ -10,48 +10,8 @@ Nuxt provides `useFetch`, `useLazyFetch`, `useAsyncData` and `useLazyAsyncData`
 
 Within your pages, components and plugins you can use `useAsyncData` to get access to data that resolves asynchronously.
 
-### Usage
-
-```ts
-const {
-  data: Ref<DataT>,
-  pending: Ref<boolean>,
-  refresh: () => Promise<void>,
-  error?: any
-} = useAsyncData(
-  key: string,
-  handler: (ctx?: NuxtApp) => Promise<Object>,
-  options?: {
-    lazy: boolean,
-    server: boolean,
-    watch: WatchSource[]
-  }
-)
-```
-
-### Params
-
-* **key**: a unique key to ensure that data fetching can be properly de-duplicated across requests
-* **handler**: an asynchronous function that returns a value
-* **options**:
-  * _lazy_: whether to resolve the async function after loading the route, instead of blocking navigation (defaults to `false`)
-  * _default_: a factory function to set the default value of the data, before the async function resolves - particularly useful with the `lazy: true` option
-  * _server_: whether to fetch the data on server-side (defaults to `true`)
-  * _transform_: a function that can be used to alter `handler` function result after resolving
-  * _pick_: only pick specified keys in this array from `handler` function result
-  * _watch_: watch reactive sources to auto refresh
-  * _initialCache_: When set to `false`, will skip payload cache for initial fetch. (defaults to `true`)
-
-Under the hood, `lazy: false` uses `<Suspense>` to block the loading of the route before the data has been fetched. Consider using `lazy: true` and implementing a loading state instead for a snappier user experience.
-
-### Return values
-
-* **data**: the result of the asynchronous function that is passed in
-* **pending**: a boolean indicating whether the data is still being fetched
-* **refresh**: a function that can be used to refresh the data returned by the `handler` function
-* **error**: an error object if the data fetching failed
-
-By default, Nuxt waits until a `refresh` is finished before it can be executed again. Passing `true` as parameter skips that wait.
+::ReadMore{link="/api/composables/use-async-data"}
+::
 
 ### Example
 
@@ -77,6 +37,9 @@ const { data } = await useAsyncData('count', () => $fetch('/api/count'))
 
 This composable behaves identically to `useAsyncData` with the `lazy: true` option set. In other words, the async function does not block navigation. That means you will need to handle the situation where the data is `null` (or whatever value you have provided in a custom `default` factory function).
 
+::ReadMore{link="/api/composables/use-lazy-async-data"}
+::
+
 ### Example
 
 ```vue
@@ -101,33 +64,8 @@ Within your pages, components and plugins you can use `useFetch` to universally
 
 This composable provides a convenient wrapper around `useAsyncData` and `$fetch`. It automatically generates a key based on URL and fetch options, as well as infers API response type.
 
-### Usage
-
-```ts
-const {
-  data: Ref<DataT>,
-  pending: Ref<boolean>,
-  refresh: (force?: boolean) => Promise<void>,
-  error?: any
-} = useFetch(url: string, options?)
-```
-
-Available options:
-
-* `key`: Provide a custom key
-* Options from [ohmyfetch](https://github.com/unjs/ohmyfetch)
-  * `method`: Request method
-  * `params`: Query params
-  * `headers`: Request headers
-  * `baseURL`: Base URL for the request
-* Options from `useAsyncData`
-  * `lazy`
-  * `server`
-  * `default`
-  * `pick`
-  * `transform`
-
-The object returned by `useFetch` has the same properties as that returned by `useAsyncData` ([see above](#useasyncdata)).
+::ReadMore{link="/api/composables/use-fetch"}
+::
 
 ### Example
 
@@ -145,6 +83,9 @@ const { data } = await useFetch('/api/count')
 
 This composable behaves identically to `useFetch` with the `lazy: true` option set. In other words, the async function does not block navigation. That means you will need to handle the situation where the data is `null` (or whatever value you have provided in a custom `default` factory function).
 
+::ReadMore{link="/api/composables/use-lazy-fetch"}
+::
+
 ### Example
 
 ```vue
@@ -202,15 +143,8 @@ Invalidate the cache of `useAsyncData`, `useLazyAsyncData`, `useFetch` and `useL
 
 This method is useful if you want to refresh all the data fetching for a current page.
 
-### Usage
-
-```ts
-refreshNuxtData(keys?: string | string[])
-```
-
-Available options:
-
-* `keys`: Provides an array of keys that used in `useAsyncData` to refetch. When it's not specified, all `useAsyncData` and `useFetch` will be refetched.
+::ReadMore{link="/api/utils/refresh-nuxt-data"}
+::
 
 ### Example
 
@@ -229,13 +163,16 @@ const refresh = () => refreshNuxtData('count')
 </script>
 ```
 
-## Isomorphic fetch
+## Isomorphic `fetch` and `$fetch`
 
 When we call `fetch` in the browser, user headers like `cookie` will be directly sent to the API. But during server-side-rendering, since the `fetch` request takes place 'internally' within the server, it doesn't include the user's browser cookies, nor does it pass on cookies from the fetch response.
 
+::ReadMore{link="/api/utils/$fetch"}
+::
+
 ### Example: Bypass API headers to client
 
-We can use [`useRequestHeaders`](/docs/usage/ssr) to access and proxy cookies to the API from server-side.
+We can use [`useRequestHeaders`](/api/composables/use-request-headers) to access and proxy cookies to the API from server-side.
 
 The example below adds the request headers to an isomorphic `fetch` call to ensure that the API endpoint has access to the same `cookie` header originally sent by the user.
 

docs/content/2.guide/2.features/6.state-management.md

@@ -1,18 +1,11 @@
-# State
+# State Management
 
 Nuxt provides `useState` composable to create a reactive and SSR-friendly shared state across components.
 
 `useState` is an SSR-friendly [`ref`](https://vuejs.org/api/reactivity-core.html#ref) replacement. Its value will be preserved after server-side rendering (during client-side hydration) and shared across all components using a unique key.
 
-## Signature
-
-```ts
-useState<T>(key: string, init?: () => T): Ref<T>
-```
-
-* **key**: A unique key ensuring that data fetching can be properly de-duplicated across requests
-* **init**: A function that provides initial value for the state when it's not initiated
-* **T**: (typescript only) Specify the type of state
+::ReadMore{link="/api/composables/use-state"}
+::
 
 ::alert{icon=👉}
 `useState` only works during `setup` or [`Lifecycle Hooks`](https://vuejs.org/api/composition-api-lifecycle.html#composition-api-lifecycle-hooks).
@@ -54,6 +47,9 @@ const counter = useState('counter', () => Math.round(Math.random() * 1000))
 
 :button-link[Open on StackBlitz]{href="https://stackblitz.com/github/nuxt/framework/tree/main/examples/use-state?terminal=dev" blank}
 
+::ReadMore{link="/api/composables/use-state"}
+::
+
 ### Advanced
 
 In this example, we use a composable that detects the user's default locale from the HTTP request headers and keeps it in a `locale` state.
@@ -62,7 +58,7 @@ In this example, we use a composable that detects the user's default locale from
 
 ## Shared state
 
-By using [auto-imported composables](/docs/directory-structure/composables) we can define global type-safe states and import them across the app.
+By using [auto-imported composables](/guide/directory-structure/composables) we can define global type-safe states and import them across the app.
 
 ```ts [composables/states.ts]
 export const useCounter = () => useState<number>('counter', () => 0)

docs/content/2.guide/2.features/7.error-handling.md

@@ -1,4 +1,4 @@
-# Error handling
+# Error Handling
 
 ## Handling errors
 
@@ -71,24 +71,33 @@ const handleError = () => clearError({ redirect: '/' })
 
 ## Error helper methods
 
-### useError
+### `useError`
 
 * `function useError (): Ref<any>`
 
 This function will return the global Nuxt error that is being handled.
 
-### throwError
+::ReadMore{link="/api/composables/use-error"}
+::
+
+### `throwError`
 
 * `function throwError (err: string | Error): Error`
 
 You can call this function at any point on client-side, or (on server side) directly within middleware, plugins or `setup()` functions. It will trigger a full-screen error page (as above) which you can clear with `clearError`.
 
-### clearError
+::ReadMore{link="/api/composables/throw-error"}
+::
+
+### `clearError`
 
 * `function clearError (redirect?: string): Promise<void>`
 
 This function will clear the currently handled Nuxt error. It also takes an optional path to redirect to (for example, if you want to navigate to a 'safe' page).
 
+::ReadMore{link="/api/composables/clear-error"}
+::
+
 ## Rendering errors within your app
 
 Nuxt also provides a `<NuxtErrorBoundary>` component that allows you to handle client-side errors within your app, without replacing your entire site with an error page.
@@ -105,9 +114,9 @@ If you navigate to another route, the error will be cleared automatically.
 
 ```vue [pages/index.vue]
 <template>
-  <!-- some content --> 
+  <!-- some content -->
   <NuxtErrorBoundary @error="someErrorLogger">
-    <!-- You use the default slot to render your content --> 
+    <!-- You use the default slot to render your content -->
     <template #error="{ error }">
       You can display the error locally here.
       <button @click="error = null">

docs/content/2.guide/2.features/8.plugins.md

@@ -0,0 +1,7 @@
+# Plugins
+
+::NeedContribution
+::
+
+::ReadMore{link="/guide/directory-structure/plugins"}
+::

docs/content/2.guide/2.features/9.api-routes.md

@@ -0,0 +1,7 @@
+# API Routes
+
+::NeedContribution
+::
+
+::ReadMore{link="/guide/directory-structure/server"}
+::

docs/content/2.guide/2.features/index.md

@@ -0,0 +1,6 @@
+---
+title: Features
+layout.aside: true
+layout.asideClass: ''
+navigation.redirect: /guide/features/views
+---

docs/content/2.guide/3.directory-structure/10.pages.md

@@ -9,7 +9,7 @@ head.title: Pages directory
 Nuxt provides a file-based routing to create routes within your web application using [Vue Router](https://router.vuejs.org) under the hood.
 
 ::alert{type="info"}
-This directory is **optional**, meaning that [`vue-router`](https://router.vuejs.org) won't be included if you only use [app.vue](/docs/directory-structure/app), reducing 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](/guide/directory-structure/app), reducing your application's bundle size.
 ::
 
 ## Usage
@@ -46,7 +46,7 @@ export default defineComponent({
 
 The `pages/index.vue` file will be mapped to the `/` route of your application.
 
-If you are using [app.vue](/docs/directory-structure/app), make sure to use the `<NuxtPage/>` component to display the current page:
+If you are using [app.vue](/guide/directory-structure/app), make sure to use the `<NuxtPage/>` component to display the current page:
 
 ```vue [app.vue]
 <template>
@@ -235,11 +235,11 @@ Nuxt will automatically wrap your page in [the Vue `<KeepAlive>` component](http
 
 #### `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/directory-structure/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](/guide/directory-structure/layouts).
 
 #### `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.html#global-before-guards)), or an array of strings/functions. [More about named middleware](/docs/directory-structure/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.html#global-before-guards)), or an array of strings/functions. [More about named middleware](/guide/directory-structure/middleware).
 
 #### `layoutTransition` and `pageTransition`
 
@@ -247,7 +247,7 @@ You can define transition properties for the `<transition>` components that wrap
 
 ## Navigation
 
-To navigate between pages of your app, you should use the [`<NuxtLink>`](/docs/usage/nuxt-link) component.
+To navigate between pages of your app, you should use the [`<NuxtLink>`](/api/components/nuxt-link) component.
 
 This component is included with Nuxt and therefore you don't have to import it as you do with other components.
 
@@ -260,7 +260,7 @@ A simple link to the `index.vue` page in your `pages` folder:
 ```
 
 ::alert{type="info"}
-Learn more about [`<NuxtLink>`](/docs/usage/nuxt-link) usage.
+Learn more about [`<NuxtLink>`](/api/components/nuxt-link) usage.
 ::
 
 ## Router options

docs/content/2.guide/3.directory-structure/11.plugins.md

@@ -31,7 +31,7 @@ Only `myPlugin.ts` and `myOtherPlugin/index.ts` would be registered.
 
 ## Creating plugins
 
-The only argument passed to a plugin is [`nuxtApp`](/docs/usage/nuxt-app).
+The only argument passed to a plugin is [`nuxtApp`](/api/composables/use-nuxt-app).
 
 ```ts
 export default defineNuxtPlugin(nuxtApp => {

docs/content/2.guide/3.directory-structure/13.server.md

@@ -103,5 +103,5 @@ export default async (req, res) => {
 ```
 
 ::alert{type=info icon=🔎}
-Find more information about custom middleware in the documentation for [nuxt.config.js](/docs/directory-structure/nuxt.config#servermiddleware)
+Find more information about custom middleware in the documentation for [nuxt.config.js](/guide/directory-structure/nuxt.config#servermiddleware)
 ::

docs/content/2.guide/3.directory-structure/15.app.md

@@ -10,7 +10,7 @@ The `app.vue` file is the main component in your Nuxt 3 applications.
 
 ## Minimal usage
 
-With Nuxt 3, the [`pages/`](/docs/directory-structure/pages) directory is optional. If not present, Nuxt won't include [vue-router](https://router.vuejs.org/) dependency. This is useful when working on a landing page or an application that does not need routing.
+With Nuxt 3, the [`pages/`](/guide/directory-structure/pages) directory is optional. If not present, Nuxt won't include [vue-router](https://router.vuejs.org/) dependency. This is useful when working on a landing page or an application that does not need routing.
 
 ```vue [app.vue]
 <template>
@@ -20,7 +20,7 @@ With Nuxt 3, the [`pages/`](/docs/directory-structure/pages) directory is option
 
 ## Usage with pages
 
-If you have a [`pages/`](/docs/directory-structure/pages) directory, to display the current page, use the `<NuxtPage>` component:
+If you have a [`pages/`](/guide/directory-structure/pages) directory, to display the current page, use the `<NuxtPage>` component:
 
 ```vue [app.vue]
 <template>
@@ -40,4 +40,4 @@ Since Nuxt 3 uses [`<Suspense>`](https://vuejs.org/guide/built-ins/suspense.html
 Remember that `app.vue` acts as the main component of your Nuxt application. Anything you add in it (JS and CSS) will be global and included in every page.
 ::
 
-If you want to have the possibility to customize the structure around the page between pages, check out the [`layouts/`](/docs/directory-structure/layouts) directory.
+If you want to have the possibility to customize the structure around the page between pages, check out the [`layouts/`](/guide/directory-structure/layouts) directory.

docs/content/2.guide/3.directory-structure/17.nuxtignore.md

@@ -8,7 +8,7 @@ head.title: .nuxtignore file
 
 You can use a `.nuxtignore` file to let Nuxt ignore `layout`, `pages`, `components`, `composables` and `middleware` files in your project’s root directory (`rootDir`) during the build phase. The `.nuxtignore` file is subject to the same specification as `.gitignore` and `.eslintignore` files, in which each line is a glob pattern indicating which files should be ignored.
 
-**Note**: You can also configure [`ignoreOptions`](/docs/directory-structure/nuxt.config#ignoreoptions), [`ignorePrefix`](/docs/directory-structure/nuxt.config#ignoreprefix) and [`ignore`](/docs/directory-structure/nuxt.config#ignore) in your `nuxt.config` file.
+**Note**: You can also configure [`ignoreOptions`](/guide/directory-structure/nuxt.config#ignoreoptions), [`ignorePrefix`](/guide/directory-structure/nuxt.config#ignoreprefix) and [`ignore`](/guide/directory-structure/nuxt.config#ignore) in your `nuxt.config` file.
 
 ## Example
 

docs/content/2.guide/3.directory-structure/18.nuxt.config.md

@@ -0,0 +1,20 @@
+---
+icon: IconFile
+title: nuxt.config.ts
+head.title: Nuxt configuration file
+---
+
+# Nuxt configuration file
+
+Nuxt can be easily configured with a single `nuxt.config` file, which can have either a `.js`, `.ts` or `.mjs` extension.
+
+```ts
+import { defineNuxtConfig } from 'nuxt3'
+
+export default defineNuxtConfig({
+  // My Nuxt config
+})
+```
+
+::ReadMore{link="/api/configuration/nuxt.config"}
+::

docs/content/2.guide/3.directory-structure/19.tsconfig.md

@@ -6,7 +6,7 @@ head.title: TypeScript configuration file
 
 # TypeScript configuration file
 
-Nuxt [automatically generates](/concepts/typescript) a `.nuxt/tsconfig.json` file with the resolved aliases you are using in your Nuxt project, as well as with other sensible defaults. You can benefit from this by creating a `tsconfig.json` in the root of your project with the following content:
+Nuxt [automatically generates](/guide/concepts/typescript) a `.nuxt/tsconfig.json` file with the resolved aliases you are using in your Nuxt project, as well as with other sensible defaults. You can benefit from this by creating a `tsconfig.json` in the root of your project with the following content:
 
 ```json
 {

docs/content/2.guide/3.directory-structure/2.output.md

@@ -12,4 +12,4 @@ Nuxt creates the `.output/` directory when building your application for product
 You should not touch any files inside since the whole directory will be re-created when running `nuxt build`.
 ::
 
-Use this directory to deploy your Nuxt application to production. Learn more in our [deployment section](/docs/deployment).
+Use this directory to deploy your Nuxt application to production. Learn more in our [deployment section](/guide/deployment).

docs/content/2.guide/3.directory-structure/3.assets.md

@@ -12,6 +12,6 @@ The directory usually contains the following types of files:
 
 - Stylesheets (CSS, SASS, etc.)
 - Fonts
-- Images that won't be served from the [`public/`](/docs/directory-structure/public) directory.
+- Images that won't be served from the [`public/`](/guide/directory-structure/public) directory.
 
-If you want to serve assets from the server, we recommend taking a look at the [`public/`](/docs/directory-structure/public) directory.
+If you want to serve assets from the server, we recommend taking a look at the [`public/`](/guide/directory-structure/public) directory.

docs/content/2.guide/3.directory-structure/5.composables.md

@@ -6,7 +6,7 @@ head.title: Composables directory
 
 # Composables directory
 
-Nuxt 3 supports `composables/` directory to automatically import your Vue composables into your application using [auto-imports](/concepts/auto-imports)!
+Nuxt 3 supports `composables/` directory to automatically import your Vue composables into your application using [auto-imports](/guide/concepts/auto-imports)!
 
 ## How files are scanned
 

docs/content/2.guide/3.directory-structure/6.layouts.md

@@ -10,7 +10,7 @@ Nuxt provides a customizable layouts framework you can use throughout your appli
 
 Layouts are placed in the `layouts/` directory and will be automatically loaded via asynchronous import when used. Layouts are used by setting a `layout` property as part of your page metadata (if you are using the `~/pages` integration), or by using the `<NuxtLayout>` component.
 
-If you only have a single layout in your application, we recommend to use [app.vue](/docs/directory-structure/app) instead.
+If you only have a single layout in your application, we recommend to use [app.vue](/guide/directory-structure/app) instead.
 
 ::alert{type=warning}
 Unlike other components, your layouts must have a single root element to allow Nuxt to apply transitions between layout changes.
@@ -66,7 +66,7 @@ definePageMeta({
 ```
 
 ::alert{type=info}
-Learn more about [defining page meta](/docs/directory-structure/pages#page-metadata).
+Learn more about [defining page meta](/guide/directory-structure/pages#page-metadata).
 ::
 
 ## Example: manual control with `~/pages`

docs/content/2.guide/3.directory-structure/7.middleware.md

@@ -18,7 +18,7 @@ There are three kinds of route middleware:
 2. Named route middleware, which are placed in the `middleware/` directory and will be automatically loaded via asynchronous import when used on a page.
 3. Global route middleware, which are placed in the `middleware/` directory (with a `.global` suffix) and will be automatically run on every route change.
 
-The first two kinds of route middleware can be [defined in `definePageMeta`](/docs/directory-structure/pages).
+The first two kinds of route middleware can be [defined in `definePageMeta`](/guide/directory-structure/pages).
 
 ## Format
 

docs/content/2.guide/3.directory-structure/index.md

@@ -2,6 +2,5 @@
 title: 'Directory structure'
 layout.aside: true
 layout.asideClass: ''
-navigation.collapse: false
-navigation.redirect: /docs/directory-structure/app
+navigation.redirect: /guide/directory-structure/nuxt
 ---

docs/content/2.guide/5.deployment/2.cloudflare.md

@@ -129,7 +129,7 @@ jobs:
 
 ## More information
 
-See [more information on the service worker preset](/docs/deployment/presets/service-worker) for full details.
+See [more information on the service worker preset](/guide/deployment/presets/service-worker) for full details.
 
 ## Demo
 

docs/content/2.guide/5.deployment/4.netlify.md

@@ -18,7 +18,7 @@ How to deploy Nuxt to Netlify.
 Nitro will auto-detect that you are in a [Netlify](https://www.netlify.com) environment and build the correct version of your Nuxt server. For new sites, Netlify will detect that you are using Nuxt 3 or bridge and set the publish directory to `dist` and build command to `npm run build`. If you are upgrading an existing site you should check these and update them if needed.
 
 Normally, the deployment to Netlify does not require any configuration.
-However, if you want to add custom redirects, you can do so by adding a [`_redirects`](https://docs.netlify.com/routing/redirects/#syntax-for-the-redirects-file) file in the [`public`](/docs/directory-structure/public) directory.
+However, if you want to add custom redirects, you can do so by adding a [`_redirects`](https://docs.netlify.com/routing/redirects/#syntax-for-the-redirects-file) file in the [`public`](/guide/directory-structure/public) directory.
 
 ## Deployment
 
@@ -26,7 +26,7 @@ Just push to your git repository [as you would normally do for Netlify](https://
 
 ## More information
 
-See [more information on the Lambda preset](/docs/deployment/presets/lambda) for full details.
+See [more information on the Lambda preset](/guide/deployment/presets/lambda) for full details.
 
 ## Demo
 

docs/content/2.guide/5.deployment/5.pm2.md

@@ -55,4 +55,4 @@ module.exports = {
 
 ## More information
 
-See more information on the [server preset](/docs/deployment/presets/server).
+See more information on the [server preset](/guide/deployment/presets/server).

docs/content/2.guide/5.deployment/6.vercel.md

@@ -38,7 +38,7 @@ Learn more about Vercel’s [Git Integration](https://vercel.com/docs/concepts/g
 
 ## More information
 
-See [more information on the node preset](/docs/deployment/presets/node) for full details.
+See [more information on the node preset](/guide/deployment/presets/node) for full details.
 
 ## Demo
 

docs/content/2.guide/5.deployment/99.presets.md

@@ -0,0 +1,17 @@
+---
+icon: IconPresets
+---
+
+# Presets
+
+Nuxt provides four generic presets that you can use out-of-the-box.
+
+::list{type=success}
+
+- [Node.js server *(default)*](/guide/deployment/presets/server)
+- [Node.js function](/guide/deployment/presets/node)
+- [Lambda function](/guide/deployment/presets/lambda)
+- [Service worker](/guide/deployment/presets/service-worker)
+::
+
+If you need to [create a custom preset](/guide/deployment/presets/custom), that's possible too. 🚀

docs/content/2.guide/5.deployment/99.presets/custom.md

@@ -9,7 +9,7 @@ Get full control of Nuxt Nitro output to deploy on any kind of hosting platform.
 ::
 
 ::alert{icon=IconPresets}
-Back to [presets list](/docs/deployment/presets).
+Back to [presets list](/guide/deployment/presets).
 ::
 
 ## Setup

docs/content/2.guide/5.deployment/99.presets/lambda.md

@@ -3,12 +3,12 @@
 Discover the Lambda function preset with Nitro to deploy Nuxt to any lambda-compatible serverless platform.
 
 ::alert{icon=IconPresets}
-Back to [presets list](/docs/deployment/presets).
+Back to [presets list](/guide/deployment/presets).
 ::
 
 ## Usage
 
-You can use the [Nuxt config](/docs/directory-structure/nuxt.config) to explicitly set the preset to use:
+You can use the [Nuxt config](/guide/directory-structure/nuxt.config) to explicitly set the preset to use:
 
 ```ts [nuxt.config.js|ts]
 export default {

docs/content/2.guide/5.deployment/99.presets/node.md

@@ -10,12 +10,12 @@ Discover the Node.js function preset with Nitro to attach Nuxt as a middleware t
 ::
 
 ::alert{icon=IconPresets}
-Back to [presets list](/docs/deployment/presets).
+Back to [presets list](/guide/deployment/presets).
 ::
 
 ## Usage
 
-You can use the [Nuxt config](/docs/directory-structure/nuxt.config) to explicitly set the preset to use:
+You can use the [Nuxt config](/guide/directory-structure/nuxt.config) to explicitly set the preset to use:
 
 ```js [nuxt.config.js|ts]
 export default {

docs/content/2.guide/5.deployment/99.presets/server.md

@@ -10,12 +10,12 @@ Discover the Node.js server preset with Nitro to deploy on any Node hosting.
 ::
 
 ::alert{icon=IconPresets}
-Back to [presets list](/docs/deployment/presets).
+Back to [presets list](/guide/deployment/presets).
 ::
 
 ## Usage
 
-You can use the [Nuxt config](/docs/directory-structure/nuxt.config) to explicitly set the preset to use:
+You can use the [Nuxt config](/guide/directory-structure/nuxt.config) to explicitly set the preset to use:
 
 ```js [nuxt.config.js|ts]
 export default {

docs/content/2.guide/5.deployment/99.presets/service-worker.md

@@ -10,7 +10,7 @@ Explore the Service worker preset with Nitro to push the boundaries of Nuxt rend
 ::
 
 ::alert{icon=IconPresets}
-Back to [presets list](/docs/deployment/presets).
+Back to [presets list](/guide/deployment/presets).
 ::
 
 ::alert{type=warning}
@@ -19,7 +19,7 @@ Deployment as service worker has some limitations since SSR code is not running
 
 ## Usage
 
-You can use the [Nuxt config](/docs/directory-structure/nuxt.config) to explicitly set the preset to use:
+You can use the [Nuxt config](/guide/directory-structure/nuxt.config) to explicitly set the preset to use:
 
 ```js [nuxt.config.js|ts]
 export default {
@@ -37,6 +37,6 @@ NITRO_PRESET=worker npx nuxt build
 
 ## Entry point
 
-The worker preset produces a service worker that can provide full HTML rendering within a worker context (for example [Cloudflare Workers](/docs/deployment/cloudflare)). It registers appropriate handlers for `fetch`, `install` and `activate`.
+The worker preset produces a service worker that can provide full HTML rendering within a worker context (for example [Cloudflare Workers](/guide/deployment/cloudflare)). It registers appropriate handlers for `fetch`, `install` and `activate`.
 
 For more information you can see the [source code](https://github.com/nuxt/framework/blob/main/packages/nitro/src/runtime/entries/service-worker.ts).

docs/content/2.guide/5.deployment/index.md

@@ -3,7 +3,7 @@ layout:
   aside: true
   asideClass: ''
 navigation:
-  collapse: false
+  collapse: true
   exclusive: false
-  redirect: /docs/deployment/presets
+  redirect: /guide/deployment/presets
 ---

docs/content/2.guide/6.going-further/1.internals.md

@@ -1,4 +1,4 @@
-# Nuxt Internals
+# How Nuxt Works?
 
 Nuxt is a minimal but highly customizable framework to build web applications. This guide helps you better understand Nuxt internals to develop new solutions and module integrations on top of Nuxt.
 
@@ -6,13 +6,13 @@ Nuxt is a minimal but highly customizable framework to build web applications. T
 
 When you start nuxt in development mode with `nuxi dev` or building a production application with `nuxi build`,
 a common context will be created, referred to as `nuxt` internally. It holds normalized options merged with `nuxt.config` file,
-some internal state, and a powerful [hooking system](/docs/advanced/hooks) powered by [unjs/hookable](https://github.com/unjs/hookable)
+some internal state, and a powerful [hooking system](/api/advanced/hooks) powered by [unjs/hookable](https://github.com/unjs/hookable)
 allowing different components to communicate with each other. You can think of it as **Builder Core**.
 
-This context is globally available to be used with [nuxt/kit](/docs/advanced/kit) composables.
+This context is globally available to be used with [nuxt/kit](/api/advanced/kit) composables.
 Therefore only one instance of Nuxt is allowed to run per process.
 
-To extend the Nuxt interface and hook into different stages of the build process, we can use [Nuxt Modules](/docs/advanced/modules).
+To extend the Nuxt interface and hook into different stages of the build process, we can use [Nuxt Modules](/guide/going-further/modules).
 
 For more details, check out [the source code](https://github.com/nuxt/framework/blob/main/packages/nuxt3/src/core/nuxt.ts).
 
@@ -25,9 +25,9 @@ You can think of it as **Runtime Core**.
 This context can be accessed using `useNuxtApp()` composable within nuxt plugins and `<script setup>` and vue composables.
 Global usage is only possible for Browser but not possible on the server-side to avoid sharing context between users.
 
-To extend the `nuxtApp` interface and hook into different stages or access contexts, we can use [Nuxt Plugins](/docs/directory-structure/plugins).
+To extend the `nuxtApp` interface and hook into different stages or access contexts, we can use [Nuxt Plugins](/guide/directory-structure/plugins).
 
-Check [Nuxt App](/docs/usage/nuxt-app) for more information about this interface.
+Check [Nuxt App](/api/composables/use-nuxt-app) for more information about this interface.
 
 `nuxtApp` has the following properties:
 
@@ -71,7 +71,7 @@ Nuxt builds and bundles project using Node.js but also has a runtime side.
 
 While both areas can be extended, that runtime context is isolated from build-time. Therefore, they are not supposed to share state, code, or context other than runtime configuration!
 
-`nuxt.config` and [Nuxt Modules](/docs/advanced/modules) can be used to extend the build context, and [Nuxt Plugins](/docs/directory-structure/plugins) can be used to extend runtime.
+`nuxt.config` and [Nuxt Modules](/guide/going-further/modules) can be used to extend the build context, and [Nuxt Plugins](/guide/directory-structure/plugins) can be used to extend runtime.
 
 When building an application for production `nuxi build`  will generate a standalone build
- in the `.output` directory, independent of `nuxt.config` and [Nuxt modules](/docs/advanced/modules).
+ in the `.output` directory, independent of `nuxt.config` and [Nuxt modules](/guide/going-further/modules).

docs/content/2.guide/6.going-further/2.hooks.md

@@ -0,0 +1,45 @@
+# Lifecycle Hooks
+
+Nuxt provides a powerful hooking system to expand almost every aspect using hooks powered by [unjs/hookable](https://github.com/unjs/hookable).
+
+## Nuxt Hooks (build time)
+
+This hooks are available for [Nuxt Modules](/guide/going-further/modules) and build context.
+
+### Usage with `nuxt.config`
+
+```js [nuxt.config]
+export default defineNuxtConfig({
+  hooks: {
+    'close': () => { }
+  }
+})
+```
+
+### Usage with Nuxt Modules
+
+```js
+import { defineNuxtModule } from '@nuxt/kit'
+
+export default defineNuxtModule({
+  setup (options, nuxt) {
+    nuxt.hook('close', async () => { })
+  })
+})
+```
+
+## App Hooks (runtime)
+
+App hooks can be mainly used by [Nuxt Plugins](/guide/directory-structure/plugins) to hook into rendering lifecycle but could also be used in Vue composables.
+
+### Usage with Plugins
+
+```js [plugins/test.ts]
+export defineNuxtPlugin(nuxtApp) {
+  nuxtApp.hook('page:start', () => { })
+}
+```
+
+::alert{icon=👉}
+Learn more about  [available lifecycle hooks](/api/advanced/hooks)
+::

docs/content/2.guide/6.going-further/3.modules.md

@@ -1,7 +1,7 @@
-# Nuxt Modules
+# Module Author Guide
 
 Nuxt provides a zero-config experience with a preset of integrations and best practices to develop Web applications.
-A powerful configuration and hooks system makes it possible to customize almost every aspect of Nuxt Framework and add endless possible integrations when it comes to customization. You can learn more about how nuxt works in [Nuxt internals](/docs/advanced/nuxt) section.
+A powerful configuration and hooks system makes it possible to customize almost every aspect of Nuxt Framework and add endless possible integrations when it comes to customization. You can learn more about how nuxt works in [Nuxt internals](/guide/going-further/internals) section.
 
 Nuxt exposes a powerful API called **Nuxt Modules**. Nuxt modules are simple async functions that sequentially run when starting nuxt in development mode using `nuxi dev` or building a project for production with `nuxi build`.
 Using Nuxt Modules, we can encapsulate, properly test and share custom solutions as npm packages without adding unnecessary boilerplate to the Nuxt project itself.
@@ -35,7 +35,7 @@ A Nuxt module is a simple function accepting inline user options and `nuxt` argu
 
 It is totally up to you, as the module author, how to handle the rest of the logic.
 
-Starting with Nuxt 3, modules can benefit all [Nuxt Kit](/docs/advanced/kit) utilities.
+Starting with Nuxt 3, modules can benefit all [Nuxt Kit](/api/advanced/kit) utilities.
 
 ```ts [modules/example.ts]
 // modules/module.mjs
@@ -69,7 +69,7 @@ export default defineNuxtConfig({
 
 ## Defining Nuxt Modules
 
-Creating Nuxt modules involves tedious and common tasks. [Nuxt Kit](/docs/advanced/kit), provides a convenient and standard API to define Nuxt modules using `defineNuxtModule`:
+Creating Nuxt modules involves tedious and common tasks. [Nuxt Kit](/api/advanced/kit), provides a convenient and standard API to define Nuxt modules using `defineNuxtModule`:
 
 ```js
 import { defineNuxtModule } from '@nuxt/kit'
@@ -133,7 +133,7 @@ Exposing types and using typescript to develop modules can benefit users even wh
 
 ### Avoid CommonJS syntax
 
-Nuxt 3, relies on native ESM. Please read [/concepts/esm](/concepts/esm) for more information.
+Nuxt 3, relies on native ESM. Please read [Native ES Modules](/guide/going-further/esm) for more information.
 
 ## Modules Ecosystem
 

docs/content/2.guide/6.going-further/4.esm.md

@@ -1,4 +1,4 @@
-# Native ES Modules
+# ES Modules
 
 Nuxt 3 (and Bridge) uses Native ES Modules.
 

docs/content/2.guide/6.going-further/4.kit.md

@@ -0,0 +1,38 @@
+# Nuxt Kit
+
+> Nuxt Kit provides composable utilities to make interacting with [Nuxt Hooks](/api/advanced/hooks) and [Nuxt Builder Core](/guide/going-further/internals#the-nuxt-interface) and developing [Nuxt Modules](/guide/going-further/modules) super easy!
+
+## Usage
+
+### Install dependency
+
+You can install the latest nuxt kit by adding it to `dependencies` of `package.json`. However, please consider always explicitly installing the `@nuxt/kit` package even if it is already installed by nuxt.
+
+```json [package.json]
+{
+  "dependencies": {
+    "@nuxt/kit": "npm:@nuxt/kit-edge@latest"
+  }
+}
+```
+
+### Import kit utilities
+
+```js [test.mjs]
+import { useNuxt } from '@nuxt/kit'
+```
+
+::alert{type="warning"}
+Nuxt kit utilities are only available for modules and not meant to be imported in runtime (components, vue composables, pages, plugins, or server routes)
+::
+
+Nuxt kit, is an [esm-only package](/guide/going-further/esm) meaning you **cannot** `require('@nuxt/kit')`. As a workaround, we can use dynamic import to use it in the CommonJS context:
+
+```js [test.cjs]
+// This does NOT work!
+// const kit = require('@nuxt/kit')
+async function main() {
+  const kit = await import('@nuxt/kit')
+}
+main()
+```

docs/content/2.guide/6.going-further/5.testing.md

@@ -37,21 +37,21 @@ Behind the scenes, `setup` performs a number of tasks in `beforeAll`, `beforeEac
 
 ### Nuxt configuration
 
-#### rootDir
+#### `rootDir`
 
 Path to a directory with a Nuxt app to be put under test.
 
 * Type: `string`
 * Default: `'.'`
 
-#### configFile
+#### `configFile`
 
 Name of the configuration file.
 
 * Type: `string`
 * Default: `'nuxt.config'
 
-<!-- 
+<!--
 #### config
 
 Object with configuration overrides.
@@ -61,7 +61,7 @@ Object with configuration overrides.
 
 ### Setup timings
 
-#### setupTimeout
+#### `setupTimeout`
 
 The amount of time (in milliseconds) to allow for `setupTest` to complete its work (which could include building or generating files for a Nuxt application, depending on the options that are passed).
 
@@ -70,34 +70,34 @@ The amount of time (in milliseconds) to allow for `setupTest` to complete its wo
 
 ### Features to enable
 
-#### server
+#### `server`
 
 Whether to launch a server to respond to requests in the test suite.
 
 * Type: `boolean`
 * Default: `true`
 
-#### build
+#### `build`
 
 Whether to run a separate build step.
 
 * Type: `boolean`
 * Default: `true` (`false` if `browser` or `server` is disabled)
 
-#### browser
+#### `browser`
 
-Under the hood, Nuxt test utils uses [`playwright`](https://playwright.dev/) to carry out browser testing. If this option is set, a browser will be launched and can be controlled in the subsequent test suite. (More info can be found [here](/api-reference/browser-testing).)
+Under the hood, Nuxt test utils uses [`playwright`](https://playwright.dev/) to carry out browser testing. If this option is set, a browser will be launched and can be controlled in the subsequent test suite. (More info can be found [here](/guide/going-further/testing).)
 
 * Type: `boolean`
 * Default: `false`
 
-#### browserOptions
+#### `browserOptions`
 
 * Type: `object` with the following properties
   * **type**: The type of browser to launch - either `chromium`, `firefox` or `webkit`
   * **launch**: `object` of options that will be passed to playwright when launching the browser. See [full API reference](https://playwright.dev/#version=master&path=docs%2Fapi.md&q=browsertypelaunchoptions).
 
-#### runner
+#### `runner`
 
 Specify the runner for the test suite. Currently [Vitest](https://vitest.dev/) is recommend.
 
@@ -108,7 +108,7 @@ Specify the runner for the test suite. Currently [Vitest](https://vitest.dev/) i
 
 ### APIs for rendering testing
 
-#### $fetch(url)
+#### `$fetch(url)`
 
 Get the HTML of a server-rendered page.
 
@@ -118,7 +118,7 @@ import { $fetch } from '@nuxt/test-utils'
 const html = await $fetch('/')
 ```
 
-#### fetch(url)
+#### `fetch(url)`
 
 Get the response of a server-rendered page.
 
@@ -129,7 +129,7 @@ const res = await fetch('/')
 const { body, headers } = res
 ```
 
-#### url(path)
+#### `url(path)`
 
 Get the full URL for a given page (including the port the test server is running on.)
 

docs/content/2.guide/6.going-further/index.md

@@ -0,0 +1,6 @@
+---
+title: Going further
+layout.aside: true
+layout.asideClass: ''
+navigation.redirect: /guide/going-further/tooling
+---

docs/content/2.guide/index.md

@@ -0,0 +1,6 @@
+---
+title: Guide
+layout.aside: true
+navigation.exclusive: true
+navigation.redirect: /guide/concepts/introduction
+---

docs/content/3.api/1.composables/use-async-data.md

@@ -0,0 +1,45 @@
+# `useAsyncData`
+
+::ReadMore{link="/guide/features/data-fetching"}
+::
+
+```ts
+const {
+  data: Ref<DataT>,
+  pending: Ref<boolean>,
+  refresh: () => Promise<void>,
+  error?: any
+} = useAsyncData(
+  key: string,
+  handler: (ctx?: NuxtApp) => Promise<Object>,
+  options?: {
+    lazy: boolean,
+    server: boolean,
+    watch: WatchSource[]
+  }
+)
+```
+
+## Params
+
+* **key**: a unique key to ensure that data fetching can be properly de-duplicated across requests
+* **handler**: an asynchronous function that returns a value
+* **options**:
+  * _lazy_: whether to resolve the async function after loading the route, instead of blocking navigation (defaults to `false`)
+  * _default_: a factory function to set the default value of the data, before the async function resolves - particularly useful with the `lazy: true` option
+  * _server_: whether to fetch the data on server-side (defaults to `true`)
+  * _transform_: a function that can be used to alter `handler` function result after resolving
+  * _pick_: only pick specified keys in this array from `handler` function result
+  * _watch_: watch reactive sources to auto refresh
+  * _initialCache_: When set to `false`, will skip payload cache for initial fetch. (defaults to `true`)
+
+Under the hood, `lazy: false` uses `<Suspense>` to block the loading of the route before the data has been fetched. Consider using `lazy: true` and implementing a loading state instead for a snappier user experience.
+
+## Return values
+
+* **data**: the result of the asynchronous function that is passed in
+* **pending**: a boolean indicating whether the data is still being fetched
+* **refresh**: a function that can be used to refresh the data returned by the `handler` function
+* **error**: an error object if the data fetching failed
+
+By default, Nuxt waits until a `refresh` is finished before it can be executed again. Passing `true` as parameter skips that wait.

docs/content/3.api/1.composables/use-cookie.md

@@ -1,9 +1,7 @@
-# Cookies
+# `useCookie`
 
 Nuxt provides an SSR-friendly composable to read and write cookies.
 
-## Usage
-
 Within your pages, components and plugins you can use `useCookie` to create a reactive reference bound to a specific cookie.
 
 ```js

docs/content/3.api/1.composables/use-error.md

@@ -0,0 +1,7 @@
+# `useError`
+
+::ReadMore{link="/guide/features/error-handling"}
+::
+
+::NeedContribution
+::

docs/content/3.api/1.composables/use-fetch.md

@@ -0,0 +1,33 @@
+# `useFetch`
+
+```ts
+const {
+  data: Ref<DataT>,
+  pending: Ref<boolean>,
+  refresh: (force?: boolean) => Promise<void>,
+  error?: any
+} = useFetch(url: string, options?)
+```
+
+Available options:
+
+* `key`: Provide a custom key
+* Options from [ohmyfetch](https://github.com/unjs/ohmyfetch)
+  * `method`: Request method
+  * `params`: Query params
+  * `headers`: Request headers
+  * `baseURL`: Base URL for the request
+* Options from `useAsyncData`
+  * `lazy`
+  * `server`
+  * `default`
+  * `pick`
+  * `transform`
+
+The object returned by `useFetch` has the same properties as that returned by `useAsyncData` ([see above](#useasyncdata)).
+
+::ReadMore{link="/guide/features/data-fetching"}
+::
+
+::ReadMore{link="/api/composables/use-async-data"}
+::

docs/content/3.api/1.composables/use-head.md

@@ -0,0 +1,7 @@
+# `useHead`
+
+::ReadMore{link="/guide/features/head-management"}
+::
+
+::NeedContribution
+::

docs/content/3.api/1.composables/use-hydration.md

@@ -0,0 +1,7 @@
+# `useHydration`
+
+::ReadMore{link="/guide/features/data-fetching"}
+::
+
+::NeedContribution
+::

docs/content/3.api/1.composables/use-lazy-async-data.md

@@ -0,0 +1,10 @@
+# `useLazyAsyncData`
+
+::ReadMore{link="/guide/features/data-fetching"}
+::
+
+::ReadMore{link="/api/composables/use-async-data"}
+::
+
+::NeedContribution
+::

docs/content/3.api/1.composables/use-lazy-fetch.md

@@ -0,0 +1,10 @@
+# `useLazyFetch`
+
+::ReadMore{link="/guide/features/data-fetching"}
+::
+
+::ReadMore{link="/api/composables/use-fetch"}
+::
+
+::NeedContribution
+::

docs/content/3.api/1.composables/use-nuxt-app.md

@@ -0,0 +1,4 @@
+# `useNuxtApp`
+
+::NeedContribution
+::

docs/content/3.api/1.composables/use-request-headers.md

@@ -1,9 +1,7 @@
-# SSR utilities
+# `useRequestHeaders`
 
 Nuxt provides composables and utilities for first-class server-side-rendering support.
 
-## useRequestHeaders
-
 Within your pages, components, and plugins you can use `useRequestHeaders` to access the incoming request headers.
 
 ```js

docs/content/3.api/1.composables/use-route.md

@@ -0,0 +1,7 @@
+# `useRoute`
+
+::ReadMore{link="/guide/features/routing"}
+::
+
+::NeedContribution
+::

docs/content/3.api/1.composables/use-router.md

@@ -0,0 +1,7 @@
+# `useRouter`
+
+::ReadMore{link="/guide/features/routing"}
+::
+
+::NeedContribution
+::

docs/content/3.api/1.composables/use-state.md

@@ -0,0 +1,12 @@
+# `useState`
+
+```ts
+useState<T>(key: string, init?: () => T): Ref<T>
+```
+
+* **key**: A unique key ensuring that data fetching can be properly de-duplicated across requests
+* **init**: A function that provides initial value for the state when it's not initiated
+* **T**: (typescript only) Specify the type of state
+
+::ReadMore{link="/guide/features/state-management"}
+::

docs/content/3.api/2.components/1.nuxt-page.md

@@ -0,0 +1,7 @@
+# `<NuxtPage>`
+
+::ReadMore{link="/guide/directory-structure/app"}
+::
+
+::NeedContribution
+::

docs/content/3.api/2.components/2.nuxt-layout.md

@@ -0,0 +1,7 @@
+# `<NuxtLayout>`
+
+::ReadMore{link="/guide/directory-structure/app"}
+::
+
+::NeedContribution
+::

docs/content/3.api/2.components/4.nuxt-link.md

@@ -1,4 +1,7 @@
-# NuxtLink
+# `<NuxtLink>`
+
+::ReadMore{link="/guide/features/routing"}
+::
 
 Nuxt provides `<NuxtLink>` component to handle any kind of links within your application.
 

docs/content/3.api/2.components/5.nuxt-error-boundary.md

@@ -0,0 +1,7 @@
+# `<NuxtErrorBoundary>`
+
+::ReadMore{link="/guide/features/error-handling"}
+::
+
+::NeedContribution
+::

docs/content/3.api/2.components/index.md

@@ -0,0 +1,6 @@
+---
+title: Components
+layout.aside: true
+layout.asideClass: ''
+navigation.redirect: /api/components/nuxt-page
+---

docs/content/3.api/3.utils/$fetch.md

@@ -0,0 +1,13 @@
+# `$fetch`
+
+::ReadMore{link="/guide/features/data-fetching"}
+::
+
+Nuxt uses [ohmyfetch](https://github.com/unjs/ohmyfetch) to expose globally the `$fetch` helper for making HTTP requests within you Vue app or API routes.
+
+During server-side rendering, calling `$fetch` to fetch your internal [API routes](/guide/directory-structure/server) will directly call the relevant function (emulating the request), **saving an additional API call**.
+
+Note that `$fetch` is the preferred way to make HTTP calls in Nuxt 3 instead of [@nuxt/http](https://github.com/nuxt/http) and [@nuxtjs/axios](https://github.com/nuxt-community/axios-module) that are made for Nuxt 2.
+
+::NeedContribution
+::

docs/content/3.api/3.utils/abort-navigation.md

@@ -0,0 +1,7 @@
+# `abortNavigation`
+
+::ReadMore{link="/guide/features/routing"}
+::
+
+::NeedContribution
+::

docs/content/3.api/3.utils/add-route-middleware.md

@@ -0,0 +1,7 @@
+# `addRouteMiddleware`
+
+::ReadMore{link="/guide/features/routing"}
+::
+
+::NeedContribution
+::

docs/content/3.api/3.utils/clear-error.md

@@ -0,0 +1,7 @@
+# `clearError`
+
+::ReadMore{link="/guide/features/error-handling"}
+::
+
+::NeedContribution
+::

docs/content/3.api/3.utils/define-nuxt-component.md

@@ -0,0 +1,4 @@
+# `defineNuxtComponent`
+
+::NeedContribution
+::

docs/content/3.api/3.utils/define-nuxt-route-middleware.md

@@ -0,0 +1,7 @@
+# `defineNuxtRouteMiddleware`
+
+::ReadMore{link="/guide/features/routing"}
+::
+
+::NeedContribution
+::

docs/content/3.api/3.utils/define-page-meta.md

@@ -0,0 +1,7 @@
+# `definePageMeta`
+
+::ReadMore{link="/guide/features/routing"}
+::
+
+::NeedContribution
+::

docs/content/3.api/3.utils/index.md

@@ -0,0 +1,6 @@
+---
+title: Utils
+layout.aside: true
+layout.asideClass: ''
+navigation.redirect: /api/utils/
+---

docs/content/3.api/3.utils/navigate-to.md

@@ -0,0 +1,7 @@
+# `navigateTo`
+
+::ReadMore{link="/guide/features/routing"}
+::
+
+::NeedContribution
+::

docs/content/3.api/3.utils/refresh-nuxt-data.md

@@ -0,0 +1,12 @@
+# `refreshNuxtData`
+
+::ReadMore{link="/guide/features/data-fetching"}
+::
+
+```ts
+refreshNuxtData(keys?: string | string[])
+```
+
+Available options:
+
+* `keys`: Provides an array of keys that used in `useAsyncData` to refetch. When it's not specified, all `useAsyncData` and `useFetch` will be refetched.