From 9a0fc577247b6c697908b371f6b7ec6d293d29ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Ollivier?= <clement.o2p@gmail.com>
Date: Wed, 6 Apr 2022 07:56:08 +0200
Subject: [PATCH] docs: update sitemap (#4063)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Sébastien Chopin <seb@nuxtjs.com>
Co-authored-by: pooya parsa <pyapar@gmail.com>
---
 docs/.gitignore                               |   2 +-
 docs/README.md                                |   4 +
 docs/assets/nuxt.css                          |   4 +
 docs/components/templates/AutoGenerated.vue   |   8 +
 .../components/templates/NeedContribution.vue |  11 ++
 docs/components/templates/ReadMore.vue        |  30 ++++
 .../1.getting-started/1.introduction.md       |  95 -----------
 .../{2.installation.md => 1.quick-start.md}   |  39 +++--
 docs/content/1.getting-started/2.migration.md |  28 ++++
 docs/content/1.getting-started/3.commands.md  |  73 ---------
 docs/content/1.getting-started/index.md       |   2 +-
 .../1.concepts}/1.introduction.md             |   4 +-
 .../1.concepts}/2.vuejs-development.md        |  12 +-
 .../1.concepts}/3.rendering.md                |   6 +-
 .../1.concepts}/4.auto-imports.md             |  12 +-
 .../1.concepts}/4.server-engine.md            |   6 +-
 .../1.concepts}/6.typescript.md               |   6 +-
 docs/content/2.guide/1.concepts/index.md      |   6 +
 docs/content/2.guide/2.features/1.views.md    |  13 ++
 .../2.features/10.runtime-config.md}          |   2 +-
 .../2.features/11.teleports.md}               |   0
 docs/content/2.guide/2.features/13.modules.md |  10 ++
 docs/content/2.guide/2.features/2.routing.md  |  10 ++
 docs/content/2.guide/2.features/3.assets.md   |  10 ++
 .../2.features/4.head-management.md}          |   5 +-
 .../2.features/5.data-fetching.md}            |  97 ++---------
 .../2.features/6.state-management.md}         |  18 +--
 .../2.features/7.error-handling.md}           |  21 ++-
 docs/content/2.guide/2.features/8.plugins.md  |   7 +
 .../2.guide/2.features/9.api-routes.md        |   7 +
 docs/content/2.guide/2.features/index.md      |   6 +
 .../3.directory-structure}/1.nuxt.md          |   0
 .../3.directory-structure}/10.pages.md        |  12 +-
 .../3.directory-structure}/11.plugins.md      |   2 +-
 .../3.directory-structure}/12.public.md       |   0
 .../3.directory-structure}/13.server.md       |   2 +-
 .../3.directory-structure}/14.gitignore.md    |   0
 .../3.directory-structure}/15.app.md          |   6 +-
 .../3.directory-structure}/17.nuxtignore.md   |   2 +-
 .../3.directory-structure/18.nuxt.config.md   |  20 +++
 .../3.directory-structure}/18.package.md      |   0
 .../3.directory-structure}/19.tsconfig.md     |   2 +-
 .../3.directory-structure}/2.output.md        |   2 +-
 .../3.directory-structure}/3.assets.md        |   4 +-
 .../3.directory-structure}/4.components.md    |   0
 .../3.directory-structure}/5.composables.md   |   2 +-
 .../3.directory-structure}/6.layouts.md       |   4 +-
 .../3.directory-structure}/7.middleware.md    |   2 +-
 .../3.directory-structure}/9.node_modules.md  |   0
 .../3.directory-structure}/index.md           |   3 +-
 .../5.deployment}/1.azure.md                  |   0
 .../5.deployment}/2.cloudflare.md             |   2 +-
 .../5.deployment}/3.firebase.md               |   0
 .../5.deployment}/4.netlify.md                |   4 +-
 .../5.deployment}/5.pm2.md                    |   2 +-
 .../5.deployment}/6.vercel.md                 |   2 +-
 .../2.guide/5.deployment/99.presets.md        |  17 ++
 .../5.deployment}/99.presets/custom.md        |   2 +-
 .../5.deployment}/99.presets/lambda.md        |   4 +-
 .../5.deployment}/99.presets/node.md          |   4 +-
 .../5.deployment}/99.presets/server.md        |   4 +-
 .../99.presets/service-worker.md              |   6 +-
 .../5.deployment}/index.md                    |   4 +-
 .../6.going-further/1.internals.md}           |  16 +-
 .../2.guide/6.going-further/2.hooks.md        |  45 ++++++
 .../6.going-further/3.modules.md}             |  10 +-
 .../6.going-further/4.esm.md}                 |   2 +-
 docs/content/2.guide/6.going-further/4.kit.md |  38 +++++
 .../6.going-further}/5.testing.md             |  26 +--
 .../6.going-further/6.nuxt-app.md}            |   0
 docs/content/2.guide/6.going-further/index.md |   6 +
 docs/content/2.guide/index.md                 |   6 +
 .../3.api/1.composables/use-async-data.md     |  45 ++++++
 .../1.composables/use-cookie.md}              |   4 +-
 docs/content/3.api/1.composables/use-error.md |   7 +
 docs/content/3.api/1.composables/use-fetch.md |  33 ++++
 docs/content/3.api/1.composables/use-head.md  |   7 +
 .../3.api/1.composables/use-hydration.md      |   7 +
 .../1.composables/use-lazy-async-data.md      |  10 ++
 .../3.api/1.composables/use-lazy-fetch.md     |  10 ++
 .../3.api/1.composables/use-nuxt-app.md       |   4 +
 .../1.composables/use-request-headers.md}     |   4 +-
 docs/content/3.api/1.composables/use-route.md |   7 +
 .../content/3.api/1.composables/use-router.md |   7 +
 docs/content/3.api/1.composables/use-state.md |  12 ++
 .../content/3.api/2.components/1.nuxt-page.md |   7 +
 .../3.api/2.components/2.nuxt-layout.md       |   7 +
 .../2.components/4.nuxt-link.md}              |   5 +-
 .../2.components/5.nuxt-error-boundary.md     |   7 +
 docs/content/3.api/2.components/index.md      |   6 +
 docs/content/3.api/3.utils/$fetch.md          |  13 ++
 .../content/3.api/3.utils/abort-navigation.md |   7 +
 .../3.api/3.utils/add-route-middleware.md     |   7 +
 docs/content/3.api/3.utils/clear-error.md     |   7 +
 .../3.api/3.utils/define-nuxt-component.md    |   4 +
 .../3.utils/define-nuxt-route-middleware.md   |   7 +
 .../content/3.api/3.utils/define-page-meta.md |   7 +
 docs/content/3.api/3.utils/index.md           |   6 +
 docs/content/3.api/3.utils/navigate-to.md     |   7 +
 .../3.api/3.utils/refresh-nuxt-data.md        |  12 ++
 docs/content/3.api/3.utils/throw-error.md     |   7 +
 docs/content/3.api/4.advanced/1.hooks.md      |  27 ++++
 .../3.kit.md => 3.api/4.advanced/2.kit.md}    |  49 +-----
 docs/content/3.api/5.commands/add.md          |  30 ++++
 docs/content/3.api/5.commands/analyze.md      |  13 ++
 docs/content/3.api/5.commands/build.md        |  13 ++
 docs/content/3.api/5.commands/dev.md          |  22 +++
 docs/content/3.api/5.commands/info.md         |  11 ++
 docs/content/3.api/5.commands/init.md         |  13 ++
 docs/content/3.api/5.commands/preview.md      |  17 ++
 docs/content/3.api/5.commands/typecheck.md    |  13 ++
 docs/content/3.api/5.commands/upgrade.md      |  11 ++
 docs/content/3.api/index.md                   |   7 +
 docs/content/3.docs/1.usage/8.cli.md          | 151 ------------------
 docs/content/3.docs/1.usage/index.md          |   7 -
 docs/content/3.docs/3.migration/index.md      |   6 -
 .../content/3.docs/8.deployment/99.presets.md |  17 --
 docs/content/3.docs/9.advanced/4.hooks.md     |  63 --------
 docs/content/3.docs/index.md                  |   6 -
 .../4.examples/0.essentials/hello-world.md    |   3 +-
 .../4.examples/1.app/error-handling.md        |   3 +-
 docs/content/4.examples/1.app/plugins.md      |   3 +-
 docs/content/4.examples/1.app/teleport.md     |   3 +-
 .../4.examples/2.auto-imports/components.md   |   3 +-
 .../4.examples/2.auto-imports/composables.md  |   3 +-
 .../3.composables/use-async-data.md           |   8 +-
 .../4.examples/3.composables/use-cookie.md    |   5 +-
 .../4.examples/3.composables/use-fetch.md     |   8 +-
 .../4.examples/3.composables/use-head.md      |  10 +-
 .../4.examples/3.composables/use-state.md     |  10 +-
 docs/content/4.examples/4.routing/layouts.md  |   3 +-
 .../4.examples/4.routing/middleware.md        |   3 +-
 .../content/4.examples/4.routing/nuxt-link.md |   9 +-
 docs/content/4.examples/4.routing/pages.md    |   3 +-
 .../4.examples/4.routing/universal-router.md  |   3 +
 .../5.advanced/module-extend-pages.md         |   3 +-
 docs/content/4.examples/5.advanced/test.md    |   7 -
 docs/content/4.examples/5.advanced/testing.md |  14 ++
 .../6.experimental/reactivity-transform.md    |   3 +-
 docs/content/_collections/header.md           |  10 +-
 .../4.bridge.md => bridge/1.overview.md}      |  27 ++--
 .../2.bridge-composition-api.md}              |  15 +-
 docs/content/{2.concepts => bridge}/index.md  |   5 +-
 docs/content/index.md                         |  14 +-
 .../3.migration => migration}/1.overview.md   |  20 ++-
 .../3.migration => migration}/10.bundling.md  |   7 +-
 .../3.migration => migration}/11.server.md    |   7 +-
 .../2.configuration.md                        |  18 ++-
 .../20.module-authors.md                      |  17 +-
 .../3.auto-imports.md                         |  11 +-
 .../3.migration => migration}/4.meta.md       |  13 +-
 .../5.plugins-and-middleware.md               |  11 +-
 .../6.pages-and-layouts.md                    |  21 ++-
 .../7.component-options.md                    |  21 ++-
 .../8.runtime-config.md                       |  13 +-
 docs/content/migration/index.md               |   6 +
 docs/package.json                             |   2 +
 docs/scripts/gen-docs.ts                      |  24 ++-
 docs/scripts/nuxt.config.md                   |  24 ++-
 docs/static/_redirects                        |  33 ++++
 examples/advanced/{test => testing}/app.vue   |   0
 .../advanced/{test => testing}/nuxt.config.ts |   0
 .../advanced/{test => testing}/package.json   |   2 +-
 .../{test => testing}/tests/basic.test.ts     |   0
 .../advanced/{test => testing}/tsconfig.json  |   0
 package.json                                  |   3 +-
 yarn.lock                                     |   4 +-
 167 files changed, 1173 insertions(+), 828 deletions(-)
 create mode 100644 docs/README.md
 create mode 100644 docs/components/templates/AutoGenerated.vue
 create mode 100644 docs/components/templates/NeedContribution.vue
 create mode 100644 docs/components/templates/ReadMore.vue
 delete mode 100644 docs/content/1.getting-started/1.introduction.md
 rename docs/content/1.getting-started/{2.installation.md => 1.quick-start.md} (54%)
 create mode 100644 docs/content/1.getting-started/2.migration.md
 delete mode 100644 docs/content/1.getting-started/3.commands.md
 rename docs/content/{2.concepts => 2.guide/1.concepts}/1.introduction.md (94%)
 rename docs/content/{2.concepts => 2.guide/1.concepts}/2.vuejs-development.md (89%)
 rename docs/content/{2.concepts => 2.guide/1.concepts}/3.rendering.md (93%)
 rename docs/content/{2.concepts => 2.guide/1.concepts}/4.auto-imports.md (75%)
 rename docs/content/{2.concepts => 2.guide/1.concepts}/4.server-engine.md (88%)
 rename docs/content/{2.concepts => 2.guide/1.concepts}/6.typescript.md (84%)
 create mode 100644 docs/content/2.guide/1.concepts/index.md
 create mode 100644 docs/content/2.guide/2.features/1.views.md
 rename docs/content/{3.docs/1.usage/5.runtime-config.md => 2.guide/2.features/10.runtime-config.md} (95%)
 rename docs/content/{3.docs/1.usage/10.teleports.md => 2.guide/2.features/11.teleports.md} (100%)
 create mode 100644 docs/content/2.guide/2.features/13.modules.md
 create mode 100644 docs/content/2.guide/2.features/2.routing.md
 create mode 100644 docs/content/2.guide/2.features/3.assets.md
 rename docs/content/{3.docs/1.usage/3.meta-tags.md => 2.guide/2.features/4.head-management.md} (97%)
 rename docs/content/{3.docs/1.usage/1.data-fetching.md => 2.guide/2.features/5.data-fetching.md} (75%)
 rename docs/content/{3.docs/1.usage/2.state.md => 2.guide/2.features/6.state-management.md} (81%)
 rename docs/content/{3.docs/1.usage/8.error-handling.md => 2.guide/2.features/7.error-handling.md} (93%)
 create mode 100644 docs/content/2.guide/2.features/8.plugins.md
 create mode 100644 docs/content/2.guide/2.features/9.api-routes.md
 create mode 100644 docs/content/2.guide/2.features/index.md
 rename docs/content/{3.docs/2.directory-structure => 2.guide/3.directory-structure}/1.nuxt.md (100%)
 rename docs/content/{3.docs/2.directory-structure => 2.guide/3.directory-structure}/10.pages.md (94%)
 rename docs/content/{3.docs/2.directory-structure => 2.guide/3.directory-structure}/11.plugins.md (97%)
 rename docs/content/{3.docs/2.directory-structure => 2.guide/3.directory-structure}/12.public.md (100%)
 rename docs/content/{3.docs/2.directory-structure => 2.guide/3.directory-structure}/13.server.md (97%)
 rename docs/content/{3.docs/2.directory-structure => 2.guide/3.directory-structure}/14.gitignore.md (100%)
 rename docs/content/{3.docs/2.directory-structure => 2.guide/3.directory-structure}/15.app.md (61%)
 rename docs/content/{3.docs/2.directory-structure => 2.guide/3.directory-structure}/17.nuxtignore.md (77%)
 create mode 100644 docs/content/2.guide/3.directory-structure/18.nuxt.config.md
 rename docs/content/{3.docs/2.directory-structure => 2.guide/3.directory-structure}/18.package.md (100%)
 rename docs/content/{3.docs/2.directory-structure => 2.guide/3.directory-structure}/19.tsconfig.md (63%)
 rename docs/content/{3.docs/2.directory-structure => 2.guide/3.directory-structure}/2.output.md (86%)
 rename docs/content/{3.docs/2.directory-structure => 2.guide/3.directory-structure}/3.assets.md (68%)
 rename docs/content/{3.docs/2.directory-structure => 2.guide/3.directory-structure}/4.components.md (100%)
 rename docs/content/{3.docs/2.directory-structure => 2.guide/3.directory-structure}/5.composables.md (97%)
 rename docs/content/{3.docs/2.directory-structure => 2.guide/3.directory-structure}/6.layouts.md (94%)
 rename docs/content/{3.docs/2.directory-structure => 2.guide/3.directory-structure}/7.middleware.md (98%)
 rename docs/content/{3.docs/2.directory-structure => 2.guide/3.directory-structure}/9.node_modules.md (100%)
 rename docs/content/{3.docs/2.directory-structure => 2.guide/3.directory-structure}/index.md (50%)
 rename docs/content/{3.docs/8.deployment => 2.guide/5.deployment}/1.azure.md (100%)
 rename docs/content/{3.docs/8.deployment => 2.guide/5.deployment}/2.cloudflare.md (96%)
 rename docs/content/{3.docs/8.deployment => 2.guide/5.deployment}/3.firebase.md (100%)
 rename docs/content/{3.docs/8.deployment => 2.guide/5.deployment}/4.netlify.md (83%)
 rename docs/content/{3.docs/8.deployment => 2.guide/5.deployment}/5.pm2.md (93%)
 rename docs/content/{3.docs/8.deployment => 2.guide/5.deployment}/6.vercel.md (93%)
 create mode 100644 docs/content/2.guide/5.deployment/99.presets.md
 rename docs/content/{3.docs/8.deployment => 2.guide/5.deployment}/99.presets/custom.md (95%)
 rename docs/content/{3.docs/8.deployment => 2.guide/5.deployment}/99.presets/lambda.md (88%)
 rename docs/content/{3.docs/8.deployment => 2.guide/5.deployment}/99.presets/node.md (88%)
 rename docs/content/{3.docs/8.deployment => 2.guide/5.deployment}/99.presets/server.md (92%)
 rename docs/content/{3.docs/8.deployment => 2.guide/5.deployment}/99.presets/service-worker.md (77%)
 rename docs/content/{3.docs/8.deployment => 2.guide/5.deployment}/index.md (58%)
 rename docs/content/{3.docs/9.advanced/1.nuxt.md => 2.guide/6.going-further/1.internals.md} (78%)
 create mode 100644 docs/content/2.guide/6.going-further/2.hooks.md
 rename docs/content/{3.docs/9.advanced/2.modules.md => 2.guide/6.going-further/3.modules.md} (94%)
 rename docs/content/{2.concepts/5.esm.md => 2.guide/6.going-further/4.esm.md} (99%)
 create mode 100644 docs/content/2.guide/6.going-further/4.kit.md
 rename docs/content/{3.docs/4.advanced => 2.guide/6.going-further}/5.testing.md (94%)
 rename docs/content/{3.docs/1.usage/4.nuxt-app.md => 2.guide/6.going-further/6.nuxt-app.md} (100%)
 create mode 100644 docs/content/2.guide/6.going-further/index.md
 create mode 100644 docs/content/2.guide/index.md
 create mode 100644 docs/content/3.api/1.composables/use-async-data.md
 rename docs/content/{3.docs/1.usage/6.cookies.md => 3.api/1.composables/use-cookie.md} (99%)
 create mode 100644 docs/content/3.api/1.composables/use-error.md
 create mode 100644 docs/content/3.api/1.composables/use-fetch.md
 create mode 100644 docs/content/3.api/1.composables/use-head.md
 create mode 100644 docs/content/3.api/1.composables/use-hydration.md
 create mode 100644 docs/content/3.api/1.composables/use-lazy-async-data.md
 create mode 100644 docs/content/3.api/1.composables/use-lazy-fetch.md
 create mode 100644 docs/content/3.api/1.composables/use-nuxt-app.md
 rename docs/content/{3.docs/1.usage/7.ssr.md => 3.api/1.composables/use-request-headers.md} (92%)
 create mode 100644 docs/content/3.api/1.composables/use-route.md
 create mode 100644 docs/content/3.api/1.composables/use-router.md
 create mode 100644 docs/content/3.api/1.composables/use-state.md
 create mode 100644 docs/content/3.api/2.components/1.nuxt-page.md
 create mode 100644 docs/content/3.api/2.components/2.nuxt-layout.md
 rename docs/content/{3.docs/1.usage/9.nuxt-link.md => 3.api/2.components/4.nuxt-link.md} (98%)
 create mode 100644 docs/content/3.api/2.components/5.nuxt-error-boundary.md
 create mode 100644 docs/content/3.api/2.components/index.md
 create mode 100644 docs/content/3.api/3.utils/$fetch.md
 create mode 100644 docs/content/3.api/3.utils/abort-navigation.md
 create mode 100644 docs/content/3.api/3.utils/add-route-middleware.md
 create mode 100644 docs/content/3.api/3.utils/clear-error.md
 create mode 100644 docs/content/3.api/3.utils/define-nuxt-component.md
 create mode 100644 docs/content/3.api/3.utils/define-nuxt-route-middleware.md
 create mode 100644 docs/content/3.api/3.utils/define-page-meta.md
 create mode 100644 docs/content/3.api/3.utils/index.md
 create mode 100644 docs/content/3.api/3.utils/navigate-to.md
 create mode 100644 docs/content/3.api/3.utils/refresh-nuxt-data.md
 create mode 100644 docs/content/3.api/3.utils/throw-error.md
 create mode 100644 docs/content/3.api/4.advanced/1.hooks.md
 rename docs/content/{3.docs/9.advanced/3.kit.md => 3.api/4.advanced/2.kit.md} (56%)
 create mode 100644 docs/content/3.api/5.commands/add.md
 create mode 100644 docs/content/3.api/5.commands/analyze.md
 create mode 100644 docs/content/3.api/5.commands/build.md
 create mode 100644 docs/content/3.api/5.commands/dev.md
 create mode 100644 docs/content/3.api/5.commands/info.md
 create mode 100644 docs/content/3.api/5.commands/init.md
 create mode 100644 docs/content/3.api/5.commands/preview.md
 create mode 100644 docs/content/3.api/5.commands/typecheck.md
 create mode 100644 docs/content/3.api/5.commands/upgrade.md
 create mode 100644 docs/content/3.api/index.md
 delete mode 100644 docs/content/3.docs/1.usage/8.cli.md
 delete mode 100644 docs/content/3.docs/1.usage/index.md
 delete mode 100644 docs/content/3.docs/3.migration/index.md
 delete mode 100644 docs/content/3.docs/8.deployment/99.presets.md
 delete mode 100644 docs/content/3.docs/9.advanced/4.hooks.md
 delete mode 100644 docs/content/3.docs/index.md
 delete mode 100644 docs/content/4.examples/5.advanced/test.md
 create mode 100644 docs/content/4.examples/5.advanced/testing.md
 rename docs/content/{1.getting-started/4.bridge.md => bridge/1.overview.md} (88%)
 rename docs/content/{1.getting-started/5.bridge-composition-api.md => bridge/2.bridge-composition-api.md} (93%)
 rename docs/content/{2.concepts => bridge}/index.md (55%)
 rename docs/content/{3.docs/3.migration => migration}/1.overview.md (85%)
 rename docs/content/{3.docs/3.migration => migration}/10.bundling.md (89%)
 rename docs/content/{3.docs/3.migration => migration}/11.server.md (84%)
 rename docs/content/{3.docs/3.migration => migration}/2.configuration.md (84%)
 rename docs/content/{3.docs/3.migration => migration}/20.module-authors.md (76%)
 rename docs/content/{3.docs/3.migration => migration}/3.auto-imports.md (70%)
 rename docs/content/{3.docs/3.migration => migration}/4.meta.md (88%)
 rename docs/content/{3.docs/3.migration => migration}/5.plugins-and-middleware.md (87%)
 rename docs/content/{3.docs/3.migration => migration}/6.pages-and-layouts.md (87%)
 rename docs/content/{3.docs/3.migration => migration}/7.component-options.md (82%)
 rename docs/content/{3.docs/3.migration => migration}/8.runtime-config.md (77%)
 create mode 100644 docs/content/migration/index.md
 create mode 100644 docs/static/_redirects
 rename examples/advanced/{test => testing}/app.vue (100%)
 rename examples/advanced/{test => testing}/nuxt.config.ts (100%)
 rename examples/advanced/{test => testing}/package.json (85%)
 rename examples/advanced/{test => testing}/tests/basic.test.ts (100%)
 rename examples/advanced/{test => testing}/tsconfig.json (100%)

diff --git a/docs/.gitignore b/docs/.gitignore
index cc46f5e6e8..b4a500fb84 100644
--- a/docs/.gitignore
+++ b/docs/.gitignore
@@ -1,2 +1,2 @@
 schema
-*.nuxt.config.md
+**/*.configuration/nuxt.config.md
diff --git a/docs/README.md b/docs/README.md
new file mode 100644
index 0000000000..007b17fc7a
--- /dev/null
+++ b/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
diff --git a/docs/assets/nuxt.css b/docs/assets/nuxt.css
index 1cb8f98642..26cbe0958d 100644
--- a/docs/assets/nuxt.css
+++ b/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;
+}
diff --git a/docs/components/templates/AutoGenerated.vue b/docs/components/templates/AutoGenerated.vue
new file mode 100644
index 0000000000..4eb0c5de15
--- /dev/null
+++ b/docs/components/templates/AutoGenerated.vue
@@ -0,0 +1,8 @@
+<template>
+  <Alert icon="🤖">
+    This section is auto generated from source-code.
+  </Alert>
+</template>
+
+<script>
+</script>
diff --git a/docs/components/templates/NeedContribution.vue b/docs/components/templates/NeedContribution.vue
new file mode 100644
index 0000000000..2468444655
--- /dev/null
+++ b/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>
diff --git a/docs/components/templates/ReadMore.vue b/docs/components/templates/ReadMore.vue
new file mode 100644
index 0000000000..666d5a16a0
--- /dev/null
+++ b/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>
diff --git a/docs/content/1.getting-started/1.introduction.md b/docs/content/1.getting-started/1.introduction.md
deleted file mode 100644
index ab2e1d8070..0000000000
--- a/docs/content/1.getting-started/1.introduction.md
+++ /dev/null
@@ -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             | ✅             | ✅               | 🚧
diff --git a/docs/content/1.getting-started/2.installation.md b/docs/content/1.getting-started/1.quick-start.md
similarity index 54%
rename from docs/content/1.getting-started/2.installation.md
rename to docs/content/1.getting-started/1.quick-start.md
index 8d7c264deb..164c0b560a 100644
--- a/docs/content/1.getting-started/2.installation.md
+++ b/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)
diff --git a/docs/content/1.getting-started/2.migration.md b/docs/content/1.getting-started/2.migration.md
new file mode 100644
index 0000000000..f759261b00
--- /dev/null
+++ b/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             | ✅             | ✅               | 🚧
diff --git a/docs/content/1.getting-started/3.commands.md b/docs/content/1.getting-started/3.commands.md
deleted file mode 100644
index 8c4fe52ee9..0000000000
--- a/docs/content/1.getting-started/3.commands.md
+++ /dev/null
@@ -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)
-::
diff --git a/docs/content/1.getting-started/index.md b/docs/content/1.getting-started/index.md
index 347199f89c..567bb4e4e1 100644
--- a/docs/content/1.getting-started/index.md
+++ b/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
 ---
diff --git a/docs/content/2.concepts/1.introduction.md b/docs/content/2.guide/1.concepts/1.introduction.md
similarity index 94%
rename from docs/content/2.concepts/1.introduction.md
rename to docs/content/2.guide/1.concepts/1.introduction.md
index fb47ee6761..d64d130075 100644
--- a/docs/content/2.concepts/1.introduction.md
+++ b/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?
diff --git a/docs/content/2.concepts/2.vuejs-development.md b/docs/content/2.guide/1.concepts/2.vuejs-development.md
similarity index 89%
rename from docs/content/2.concepts/2.vuejs-development.md
rename to docs/content/2.guide/1.concepts/2.vuejs-development.md
index b3400da2b7..a39a62fc42 100644
--- a/docs/content/2.concepts/2.vuejs-development.md
+++ b/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)
 ::
diff --git a/docs/content/2.concepts/3.rendering.md b/docs/content/2.guide/1.concepts/3.rendering.md
similarity index 93%
rename from docs/content/2.concepts/3.rendering.md
rename to docs/content/2.guide/1.concepts/3.rendering.md
index d6e371b7bf..0ab74cc7dc 100644
--- a/docs/content/2.concepts/3.rendering.md
+++ b/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)
diff --git a/docs/content/2.concepts/4.auto-imports.md b/docs/content/2.guide/1.concepts/4.auto-imports.md
similarity index 75%
rename from docs/content/2.concepts/4.auto-imports.md
rename to docs/content/2.guide/1.concepts/4.auto-imports.md
index bfb239cde6..df849370d7 100644
--- a/docs/content/2.concepts/4.auto-imports.md
+++ b/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
 
diff --git a/docs/content/2.concepts/4.server-engine.md b/docs/content/2.guide/1.concepts/4.server-engine.md
similarity index 88%
rename from docs/content/2.concepts/4.server-engine.md
rename to docs/content/2.guide/1.concepts/4.server-engine.md
index b34dc4dd55..839c160aea 100644
--- a/docs/content/2.concepts/4.server-engine.md
+++ b/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.
 
diff --git a/docs/content/2.concepts/6.typescript.md b/docs/content/2.guide/1.concepts/6.typescript.md
similarity index 84%
rename from docs/content/2.concepts/6.typescript.md
rename to docs/content/2.guide/1.concepts/6.typescript.md
index ed3edac51f..2f1fa4606a 100644
--- a/docs/content/2.concepts/6.typescript.md
+++ b/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`.
diff --git a/docs/content/2.guide/1.concepts/index.md b/docs/content/2.guide/1.concepts/index.md
new file mode 100644
index 0000000000..c24a4a1fcd
--- /dev/null
+++ b/docs/content/2.guide/1.concepts/index.md
@@ -0,0 +1,6 @@
+---
+title: Concepts
+layout.aside: true
+layout.asideClass: ''
+navigation.redirect: /guide/concepts/introduction
+---
diff --git a/docs/content/2.guide/2.features/1.views.md b/docs/content/2.guide/2.features/1.views.md
new file mode 100644
index 0000000000..53bf6eb138
--- /dev/null
+++ b/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"}
+::
diff --git a/docs/content/3.docs/1.usage/5.runtime-config.md b/docs/content/2.guide/2.features/10.runtime-config.md
similarity index 95%
rename from docs/content/3.docs/1.usage/5.runtime-config.md
rename to docs/content/2.guide/2.features/10.runtime-config.md
index e2510ac988..b595a162aa 100644
--- a/docs/content/3.docs/1.usage/5.runtime-config.md
+++ b/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:**
 
diff --git a/docs/content/3.docs/1.usage/10.teleports.md b/docs/content/2.guide/2.features/11.teleports.md
similarity index 100%
rename from docs/content/3.docs/1.usage/10.teleports.md
rename to docs/content/2.guide/2.features/11.teleports.md
diff --git a/docs/content/2.guide/2.features/13.modules.md b/docs/content/2.guide/2.features/13.modules.md
new file mode 100644
index 0000000000..1a89c692f9
--- /dev/null
+++ b/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
+::
diff --git a/docs/content/2.guide/2.features/2.routing.md b/docs/content/2.guide/2.features/2.routing.md
new file mode 100644
index 0000000000..6c8fbeddf4
--- /dev/null
+++ b/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"}
+::
diff --git a/docs/content/2.guide/2.features/3.assets.md b/docs/content/2.guide/2.features/3.assets.md
new file mode 100644
index 0000000000..db39299213
--- /dev/null
+++ b/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"}
+::
diff --git a/docs/content/3.docs/1.usage/3.meta-tags.md b/docs/content/2.guide/2.features/4.head-management.md
similarity index 97%
rename from docs/content/3.docs/1.usage/3.meta-tags.md
rename to docs/content/2.guide/2.features/4.head-management.md
index 8f7c5ce9cb..180b758032 100644
--- a/docs/content/3.docs/1.usage/3.meta-tags.md
+++ b/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.
diff --git a/docs/content/3.docs/1.usage/1.data-fetching.md b/docs/content/2.guide/2.features/5.data-fetching.md
similarity index 75%
rename from docs/content/3.docs/1.usage/1.data-fetching.md
rename to docs/content/2.guide/2.features/5.data-fetching.md
index 8e81134e7c..d53158b637 100644
--- a/docs/content/3.docs/1.usage/1.data-fetching.md
+++ b/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.
 
diff --git a/docs/content/3.docs/1.usage/2.state.md b/docs/content/2.guide/2.features/6.state-management.md
similarity index 81%
rename from docs/content/3.docs/1.usage/2.state.md
rename to docs/content/2.guide/2.features/6.state-management.md
index e71cf5ba81..33f5e4b8fd 100644
--- a/docs/content/3.docs/1.usage/2.state.md
+++ b/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)
diff --git a/docs/content/3.docs/1.usage/8.error-handling.md b/docs/content/2.guide/2.features/7.error-handling.md
similarity index 93%
rename from docs/content/3.docs/1.usage/8.error-handling.md
rename to docs/content/2.guide/2.features/7.error-handling.md
index 81a328ca9f..a5d2d575e0 100644
--- a/docs/content/3.docs/1.usage/8.error-handling.md
+++ b/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">
diff --git a/docs/content/2.guide/2.features/8.plugins.md b/docs/content/2.guide/2.features/8.plugins.md
new file mode 100644
index 0000000000..10d123d7ec
--- /dev/null
+++ b/docs/content/2.guide/2.features/8.plugins.md
@@ -0,0 +1,7 @@
+# Plugins
+
+::NeedContribution
+::
+
+::ReadMore{link="/guide/directory-structure/plugins"}
+::
diff --git a/docs/content/2.guide/2.features/9.api-routes.md b/docs/content/2.guide/2.features/9.api-routes.md
new file mode 100644
index 0000000000..ec902b2df7
--- /dev/null
+++ b/docs/content/2.guide/2.features/9.api-routes.md
@@ -0,0 +1,7 @@
+# API Routes
+
+::NeedContribution
+::
+
+::ReadMore{link="/guide/directory-structure/server"}
+::
diff --git a/docs/content/2.guide/2.features/index.md b/docs/content/2.guide/2.features/index.md
new file mode 100644
index 0000000000..3a10d396b1
--- /dev/null
+++ b/docs/content/2.guide/2.features/index.md
@@ -0,0 +1,6 @@
+---
+title: Features
+layout.aside: true
+layout.asideClass: ''
+navigation.redirect: /guide/features/views
+---
diff --git a/docs/content/3.docs/2.directory-structure/1.nuxt.md b/docs/content/2.guide/3.directory-structure/1.nuxt.md
similarity index 100%
rename from docs/content/3.docs/2.directory-structure/1.nuxt.md
rename to docs/content/2.guide/3.directory-structure/1.nuxt.md
diff --git a/docs/content/3.docs/2.directory-structure/10.pages.md b/docs/content/2.guide/3.directory-structure/10.pages.md
similarity index 94%
rename from docs/content/3.docs/2.directory-structure/10.pages.md
rename to docs/content/2.guide/3.directory-structure/10.pages.md
index 7baa973807..54a1ade3b8 100644
--- a/docs/content/3.docs/2.directory-structure/10.pages.md
+++ b/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
diff --git a/docs/content/3.docs/2.directory-structure/11.plugins.md b/docs/content/2.guide/3.directory-structure/11.plugins.md
similarity index 97%
rename from docs/content/3.docs/2.directory-structure/11.plugins.md
rename to docs/content/2.guide/3.directory-structure/11.plugins.md
index e7e87ccc7d..66fcdcdcbd 100644
--- a/docs/content/3.docs/2.directory-structure/11.plugins.md
+++ b/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 => {
diff --git a/docs/content/3.docs/2.directory-structure/12.public.md b/docs/content/2.guide/3.directory-structure/12.public.md
similarity index 100%
rename from docs/content/3.docs/2.directory-structure/12.public.md
rename to docs/content/2.guide/3.directory-structure/12.public.md
diff --git a/docs/content/3.docs/2.directory-structure/13.server.md b/docs/content/2.guide/3.directory-structure/13.server.md
similarity index 97%
rename from docs/content/3.docs/2.directory-structure/13.server.md
rename to docs/content/2.guide/3.directory-structure/13.server.md
index e53ab55a77..a19d6d9f3f 100644
--- a/docs/content/3.docs/2.directory-structure/13.server.md
+++ b/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)
 ::
diff --git a/docs/content/3.docs/2.directory-structure/14.gitignore.md b/docs/content/2.guide/3.directory-structure/14.gitignore.md
similarity index 100%
rename from docs/content/3.docs/2.directory-structure/14.gitignore.md
rename to docs/content/2.guide/3.directory-structure/14.gitignore.md
diff --git a/docs/content/3.docs/2.directory-structure/15.app.md b/docs/content/2.guide/3.directory-structure/15.app.md
similarity index 61%
rename from docs/content/3.docs/2.directory-structure/15.app.md
rename to docs/content/2.guide/3.directory-structure/15.app.md
index f6c7a707df..667dd352c7 100644
--- a/docs/content/3.docs/2.directory-structure/15.app.md
+++ b/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.
diff --git a/docs/content/3.docs/2.directory-structure/17.nuxtignore.md b/docs/content/2.guide/3.directory-structure/17.nuxtignore.md
similarity index 77%
rename from docs/content/3.docs/2.directory-structure/17.nuxtignore.md
rename to docs/content/2.guide/3.directory-structure/17.nuxtignore.md
index 7676f2f3d9..169696cd0a 100644
--- a/docs/content/3.docs/2.directory-structure/17.nuxtignore.md
+++ b/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
 
diff --git a/docs/content/2.guide/3.directory-structure/18.nuxt.config.md b/docs/content/2.guide/3.directory-structure/18.nuxt.config.md
new file mode 100644
index 0000000000..0d77a2f0b7
--- /dev/null
+++ b/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"}
+::
diff --git a/docs/content/3.docs/2.directory-structure/18.package.md b/docs/content/2.guide/3.directory-structure/18.package.md
similarity index 100%
rename from docs/content/3.docs/2.directory-structure/18.package.md
rename to docs/content/2.guide/3.directory-structure/18.package.md
diff --git a/docs/content/3.docs/2.directory-structure/19.tsconfig.md b/docs/content/2.guide/3.directory-structure/19.tsconfig.md
similarity index 63%
rename from docs/content/3.docs/2.directory-structure/19.tsconfig.md
rename to docs/content/2.guide/3.directory-structure/19.tsconfig.md
index 20df6a6bdc..0b23aee372 100644
--- a/docs/content/3.docs/2.directory-structure/19.tsconfig.md
+++ b/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
 {
diff --git a/docs/content/3.docs/2.directory-structure/2.output.md b/docs/content/2.guide/3.directory-structure/2.output.md
similarity index 86%
rename from docs/content/3.docs/2.directory-structure/2.output.md
rename to docs/content/2.guide/3.directory-structure/2.output.md
index 1922d228f4..c044b064fe 100644
--- a/docs/content/3.docs/2.directory-structure/2.output.md
+++ b/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).
diff --git a/docs/content/3.docs/2.directory-structure/3.assets.md b/docs/content/2.guide/3.directory-structure/3.assets.md
similarity index 68%
rename from docs/content/3.docs/2.directory-structure/3.assets.md
rename to docs/content/2.guide/3.directory-structure/3.assets.md
index 6c8ebd9553..01c7d94c58 100644
--- a/docs/content/3.docs/2.directory-structure/3.assets.md
+++ b/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.
diff --git a/docs/content/3.docs/2.directory-structure/4.components.md b/docs/content/2.guide/3.directory-structure/4.components.md
similarity index 100%
rename from docs/content/3.docs/2.directory-structure/4.components.md
rename to docs/content/2.guide/3.directory-structure/4.components.md
diff --git a/docs/content/3.docs/2.directory-structure/5.composables.md b/docs/content/2.guide/3.directory-structure/5.composables.md
similarity index 97%
rename from docs/content/3.docs/2.directory-structure/5.composables.md
rename to docs/content/2.guide/3.directory-structure/5.composables.md
index a519084cfa..35d8f6fcbb 100644
--- a/docs/content/3.docs/2.directory-structure/5.composables.md
+++ b/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
 
diff --git a/docs/content/3.docs/2.directory-structure/6.layouts.md b/docs/content/2.guide/3.directory-structure/6.layouts.md
similarity index 94%
rename from docs/content/3.docs/2.directory-structure/6.layouts.md
rename to docs/content/2.guide/3.directory-structure/6.layouts.md
index 4ec99233bb..0e7656b0f5 100644
--- a/docs/content/3.docs/2.directory-structure/6.layouts.md
+++ b/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`
diff --git a/docs/content/3.docs/2.directory-structure/7.middleware.md b/docs/content/2.guide/3.directory-structure/7.middleware.md
similarity index 98%
rename from docs/content/3.docs/2.directory-structure/7.middleware.md
rename to docs/content/2.guide/3.directory-structure/7.middleware.md
index 66a4cbaf6d..160c72c8aa 100644
--- a/docs/content/3.docs/2.directory-structure/7.middleware.md
+++ b/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
 
diff --git a/docs/content/3.docs/2.directory-structure/9.node_modules.md b/docs/content/2.guide/3.directory-structure/9.node_modules.md
similarity index 100%
rename from docs/content/3.docs/2.directory-structure/9.node_modules.md
rename to docs/content/2.guide/3.directory-structure/9.node_modules.md
diff --git a/docs/content/3.docs/2.directory-structure/index.md b/docs/content/2.guide/3.directory-structure/index.md
similarity index 50%
rename from docs/content/3.docs/2.directory-structure/index.md
rename to docs/content/2.guide/3.directory-structure/index.md
index 26215000ce..c2d7daa964 100644
--- a/docs/content/3.docs/2.directory-structure/index.md
+++ b/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
 ---
diff --git a/docs/content/3.docs/8.deployment/1.azure.md b/docs/content/2.guide/5.deployment/1.azure.md
similarity index 100%
rename from docs/content/3.docs/8.deployment/1.azure.md
rename to docs/content/2.guide/5.deployment/1.azure.md
diff --git a/docs/content/3.docs/8.deployment/2.cloudflare.md b/docs/content/2.guide/5.deployment/2.cloudflare.md
similarity index 96%
rename from docs/content/3.docs/8.deployment/2.cloudflare.md
rename to docs/content/2.guide/5.deployment/2.cloudflare.md
index c2f36acdec..cf941e37a4 100644
--- a/docs/content/3.docs/8.deployment/2.cloudflare.md
+++ b/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
 
diff --git a/docs/content/3.docs/8.deployment/3.firebase.md b/docs/content/2.guide/5.deployment/3.firebase.md
similarity index 100%
rename from docs/content/3.docs/8.deployment/3.firebase.md
rename to docs/content/2.guide/5.deployment/3.firebase.md
diff --git a/docs/content/3.docs/8.deployment/4.netlify.md b/docs/content/2.guide/5.deployment/4.netlify.md
similarity index 83%
rename from docs/content/3.docs/8.deployment/4.netlify.md
rename to docs/content/2.guide/5.deployment/4.netlify.md
index 9414e20a7e..df8fab3f50 100644
--- a/docs/content/3.docs/8.deployment/4.netlify.md
+++ b/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
 
diff --git a/docs/content/3.docs/8.deployment/5.pm2.md b/docs/content/2.guide/5.deployment/5.pm2.md
similarity index 93%
rename from docs/content/3.docs/8.deployment/5.pm2.md
rename to docs/content/2.guide/5.deployment/5.pm2.md
index 44950f8a0d..d2455c390f 100644
--- a/docs/content/3.docs/8.deployment/5.pm2.md
+++ b/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).
diff --git a/docs/content/3.docs/8.deployment/6.vercel.md b/docs/content/2.guide/5.deployment/6.vercel.md
similarity index 93%
rename from docs/content/3.docs/8.deployment/6.vercel.md
rename to docs/content/2.guide/5.deployment/6.vercel.md
index 41b3012bed..7372052b77 100644
--- a/docs/content/3.docs/8.deployment/6.vercel.md
+++ b/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
 
diff --git a/docs/content/2.guide/5.deployment/99.presets.md b/docs/content/2.guide/5.deployment/99.presets.md
new file mode 100644
index 0000000000..27eb5a7574
--- /dev/null
+++ b/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. 🚀
diff --git a/docs/content/3.docs/8.deployment/99.presets/custom.md b/docs/content/2.guide/5.deployment/99.presets/custom.md
similarity index 95%
rename from docs/content/3.docs/8.deployment/99.presets/custom.md
rename to docs/content/2.guide/5.deployment/99.presets/custom.md
index fb1a761453..3a7b355eed 100644
--- a/docs/content/3.docs/8.deployment/99.presets/custom.md
+++ b/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
diff --git a/docs/content/3.docs/8.deployment/99.presets/lambda.md b/docs/content/2.guide/5.deployment/99.presets/lambda.md
similarity index 88%
rename from docs/content/3.docs/8.deployment/99.presets/lambda.md
rename to docs/content/2.guide/5.deployment/99.presets/lambda.md
index f447373324..da26b12242 100644
--- a/docs/content/3.docs/8.deployment/99.presets/lambda.md
+++ b/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 {
diff --git a/docs/content/3.docs/8.deployment/99.presets/node.md b/docs/content/2.guide/5.deployment/99.presets/node.md
similarity index 88%
rename from docs/content/3.docs/8.deployment/99.presets/node.md
rename to docs/content/2.guide/5.deployment/99.presets/node.md
index 61d9be93a6..582e8975c8 100644
--- a/docs/content/3.docs/8.deployment/99.presets/node.md
+++ b/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 {
diff --git a/docs/content/3.docs/8.deployment/99.presets/server.md b/docs/content/2.guide/5.deployment/99.presets/server.md
similarity index 92%
rename from docs/content/3.docs/8.deployment/99.presets/server.md
rename to docs/content/2.guide/5.deployment/99.presets/server.md
index ef9a87623c..cb865eef7d 100644
--- a/docs/content/3.docs/8.deployment/99.presets/server.md
+++ b/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 {
diff --git a/docs/content/3.docs/8.deployment/99.presets/service-worker.md b/docs/content/2.guide/5.deployment/99.presets/service-worker.md
similarity index 77%
rename from docs/content/3.docs/8.deployment/99.presets/service-worker.md
rename to docs/content/2.guide/5.deployment/99.presets/service-worker.md
index b54f501739..8bad9df373 100644
--- a/docs/content/3.docs/8.deployment/99.presets/service-worker.md
+++ b/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).
diff --git a/docs/content/3.docs/8.deployment/index.md b/docs/content/2.guide/5.deployment/index.md
similarity index 58%
rename from docs/content/3.docs/8.deployment/index.md
rename to docs/content/2.guide/5.deployment/index.md
index 637b056f41..8caec21140 100644
--- a/docs/content/3.docs/8.deployment/index.md
+++ b/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
 ---
diff --git a/docs/content/3.docs/9.advanced/1.nuxt.md b/docs/content/2.guide/6.going-further/1.internals.md
similarity index 78%
rename from docs/content/3.docs/9.advanced/1.nuxt.md
rename to docs/content/2.guide/6.going-further/1.internals.md
index 80db056ca4..e5a8c6cd1e 100644
--- a/docs/content/3.docs/9.advanced/1.nuxt.md
+++ b/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).
diff --git a/docs/content/2.guide/6.going-further/2.hooks.md b/docs/content/2.guide/6.going-further/2.hooks.md
new file mode 100644
index 0000000000..7c4b7593cb
--- /dev/null
+++ b/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)
+::
diff --git a/docs/content/3.docs/9.advanced/2.modules.md b/docs/content/2.guide/6.going-further/3.modules.md
similarity index 94%
rename from docs/content/3.docs/9.advanced/2.modules.md
rename to docs/content/2.guide/6.going-further/3.modules.md
index 1800bab0ae..1e469cb5be 100644
--- a/docs/content/3.docs/9.advanced/2.modules.md
+++ b/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
 
diff --git a/docs/content/2.concepts/5.esm.md b/docs/content/2.guide/6.going-further/4.esm.md
similarity index 99%
rename from docs/content/2.concepts/5.esm.md
rename to docs/content/2.guide/6.going-further/4.esm.md
index 7e37a07737..168fc6fc3e 100644
--- a/docs/content/2.concepts/5.esm.md
+++ b/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.
 
diff --git a/docs/content/2.guide/6.going-further/4.kit.md b/docs/content/2.guide/6.going-further/4.kit.md
new file mode 100644
index 0000000000..7b7112f637
--- /dev/null
+++ b/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()
+```
diff --git a/docs/content/3.docs/4.advanced/5.testing.md b/docs/content/2.guide/6.going-further/5.testing.md
similarity index 94%
rename from docs/content/3.docs/4.advanced/5.testing.md
rename to docs/content/2.guide/6.going-further/5.testing.md
index 8f7dcbf207..c4ddbb993a 100644
--- a/docs/content/3.docs/4.advanced/5.testing.md
+++ b/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.)
 
diff --git a/docs/content/3.docs/1.usage/4.nuxt-app.md b/docs/content/2.guide/6.going-further/6.nuxt-app.md
similarity index 100%
rename from docs/content/3.docs/1.usage/4.nuxt-app.md
rename to docs/content/2.guide/6.going-further/6.nuxt-app.md
diff --git a/docs/content/2.guide/6.going-further/index.md b/docs/content/2.guide/6.going-further/index.md
new file mode 100644
index 0000000000..99696475b2
--- /dev/null
+++ b/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
+---
diff --git a/docs/content/2.guide/index.md b/docs/content/2.guide/index.md
new file mode 100644
index 0000000000..9efa4b2b22
--- /dev/null
+++ b/docs/content/2.guide/index.md
@@ -0,0 +1,6 @@
+---
+title: Guide
+layout.aside: true
+navigation.exclusive: true
+navigation.redirect: /guide/concepts/introduction
+---
diff --git a/docs/content/3.api/1.composables/use-async-data.md b/docs/content/3.api/1.composables/use-async-data.md
new file mode 100644
index 0000000000..3ff7969fd5
--- /dev/null
+++ b/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.
diff --git a/docs/content/3.docs/1.usage/6.cookies.md b/docs/content/3.api/1.composables/use-cookie.md
similarity index 99%
rename from docs/content/3.docs/1.usage/6.cookies.md
rename to docs/content/3.api/1.composables/use-cookie.md
index 0cdec01dee..7b5aa737c7 100644
--- a/docs/content/3.docs/1.usage/6.cookies.md
+++ b/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
diff --git a/docs/content/3.api/1.composables/use-error.md b/docs/content/3.api/1.composables/use-error.md
new file mode 100644
index 0000000000..5e5a725bb5
--- /dev/null
+++ b/docs/content/3.api/1.composables/use-error.md
@@ -0,0 +1,7 @@
+# `useError`
+
+::ReadMore{link="/guide/features/error-handling"}
+::
+
+::NeedContribution
+::
diff --git a/docs/content/3.api/1.composables/use-fetch.md b/docs/content/3.api/1.composables/use-fetch.md
new file mode 100644
index 0000000000..886bd12dca
--- /dev/null
+++ b/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"}
+::
diff --git a/docs/content/3.api/1.composables/use-head.md b/docs/content/3.api/1.composables/use-head.md
new file mode 100644
index 0000000000..e37268663b
--- /dev/null
+++ b/docs/content/3.api/1.composables/use-head.md
@@ -0,0 +1,7 @@
+# `useHead`
+
+::ReadMore{link="/guide/features/head-management"}
+::
+
+::NeedContribution
+::
diff --git a/docs/content/3.api/1.composables/use-hydration.md b/docs/content/3.api/1.composables/use-hydration.md
new file mode 100644
index 0000000000..088d8b0985
--- /dev/null
+++ b/docs/content/3.api/1.composables/use-hydration.md
@@ -0,0 +1,7 @@
+# `useHydration`
+
+::ReadMore{link="/guide/features/data-fetching"}
+::
+
+::NeedContribution
+::
diff --git a/docs/content/3.api/1.composables/use-lazy-async-data.md b/docs/content/3.api/1.composables/use-lazy-async-data.md
new file mode 100644
index 0000000000..2ea79ab87f
--- /dev/null
+++ b/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
+::
diff --git a/docs/content/3.api/1.composables/use-lazy-fetch.md b/docs/content/3.api/1.composables/use-lazy-fetch.md
new file mode 100644
index 0000000000..1f7a1acff9
--- /dev/null
+++ b/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
+::
diff --git a/docs/content/3.api/1.composables/use-nuxt-app.md b/docs/content/3.api/1.composables/use-nuxt-app.md
new file mode 100644
index 0000000000..a2f157397a
--- /dev/null
+++ b/docs/content/3.api/1.composables/use-nuxt-app.md
@@ -0,0 +1,4 @@
+# `useNuxtApp`
+
+::NeedContribution
+::
diff --git a/docs/content/3.docs/1.usage/7.ssr.md b/docs/content/3.api/1.composables/use-request-headers.md
similarity index 92%
rename from docs/content/3.docs/1.usage/7.ssr.md
rename to docs/content/3.api/1.composables/use-request-headers.md
index de0faf6021..b222f60350 100644
--- a/docs/content/3.docs/1.usage/7.ssr.md
+++ b/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
diff --git a/docs/content/3.api/1.composables/use-route.md b/docs/content/3.api/1.composables/use-route.md
new file mode 100644
index 0000000000..5d0df13bc1
--- /dev/null
+++ b/docs/content/3.api/1.composables/use-route.md
@@ -0,0 +1,7 @@
+# `useRoute`
+
+::ReadMore{link="/guide/features/routing"}
+::
+
+::NeedContribution
+::
diff --git a/docs/content/3.api/1.composables/use-router.md b/docs/content/3.api/1.composables/use-router.md
new file mode 100644
index 0000000000..938be24cba
--- /dev/null
+++ b/docs/content/3.api/1.composables/use-router.md
@@ -0,0 +1,7 @@
+# `useRouter`
+
+::ReadMore{link="/guide/features/routing"}
+::
+
+::NeedContribution
+::
diff --git a/docs/content/3.api/1.composables/use-state.md b/docs/content/3.api/1.composables/use-state.md
new file mode 100644
index 0000000000..76ea428bd9
--- /dev/null
+++ b/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"}
+::
diff --git a/docs/content/3.api/2.components/1.nuxt-page.md b/docs/content/3.api/2.components/1.nuxt-page.md
new file mode 100644
index 0000000000..c37c558e22
--- /dev/null
+++ b/docs/content/3.api/2.components/1.nuxt-page.md
@@ -0,0 +1,7 @@
+# `<NuxtPage>`
+
+::ReadMore{link="/guide/directory-structure/app"}
+::
+
+::NeedContribution
+::
diff --git a/docs/content/3.api/2.components/2.nuxt-layout.md b/docs/content/3.api/2.components/2.nuxt-layout.md
new file mode 100644
index 0000000000..e32f5b6d00
--- /dev/null
+++ b/docs/content/3.api/2.components/2.nuxt-layout.md
@@ -0,0 +1,7 @@
+# `<NuxtLayout>`
+
+::ReadMore{link="/guide/directory-structure/app"}
+::
+
+::NeedContribution
+::
diff --git a/docs/content/3.docs/1.usage/9.nuxt-link.md b/docs/content/3.api/2.components/4.nuxt-link.md
similarity index 98%
rename from docs/content/3.docs/1.usage/9.nuxt-link.md
rename to docs/content/3.api/2.components/4.nuxt-link.md
index 8d502e73dc..26f424478f 100644
--- a/docs/content/3.docs/1.usage/9.nuxt-link.md
+++ b/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.
 
diff --git a/docs/content/3.api/2.components/5.nuxt-error-boundary.md b/docs/content/3.api/2.components/5.nuxt-error-boundary.md
new file mode 100644
index 0000000000..0d55456b68
--- /dev/null
+++ b/docs/content/3.api/2.components/5.nuxt-error-boundary.md
@@ -0,0 +1,7 @@
+# `<NuxtErrorBoundary>`
+
+::ReadMore{link="/guide/features/error-handling"}
+::
+
+::NeedContribution
+::
diff --git a/docs/content/3.api/2.components/index.md b/docs/content/3.api/2.components/index.md
new file mode 100644
index 0000000000..f6f324dc85
--- /dev/null
+++ b/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
+---
diff --git a/docs/content/3.api/3.utils/$fetch.md b/docs/content/3.api/3.utils/$fetch.md
new file mode 100644
index 0000000000..5c67349779
--- /dev/null
+++ b/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
+::
diff --git a/docs/content/3.api/3.utils/abort-navigation.md b/docs/content/3.api/3.utils/abort-navigation.md
new file mode 100644
index 0000000000..d13440a46d
--- /dev/null
+++ b/docs/content/3.api/3.utils/abort-navigation.md
@@ -0,0 +1,7 @@
+# `abortNavigation`
+
+::ReadMore{link="/guide/features/routing"}
+::
+
+::NeedContribution
+::
diff --git a/docs/content/3.api/3.utils/add-route-middleware.md b/docs/content/3.api/3.utils/add-route-middleware.md
new file mode 100644
index 0000000000..329ff9ace8
--- /dev/null
+++ b/docs/content/3.api/3.utils/add-route-middleware.md
@@ -0,0 +1,7 @@
+# `addRouteMiddleware`
+
+::ReadMore{link="/guide/features/routing"}
+::
+
+::NeedContribution
+::
diff --git a/docs/content/3.api/3.utils/clear-error.md b/docs/content/3.api/3.utils/clear-error.md
new file mode 100644
index 0000000000..4e5c352e17
--- /dev/null
+++ b/docs/content/3.api/3.utils/clear-error.md
@@ -0,0 +1,7 @@
+# `clearError`
+
+::ReadMore{link="/guide/features/error-handling"}
+::
+
+::NeedContribution
+::
diff --git a/docs/content/3.api/3.utils/define-nuxt-component.md b/docs/content/3.api/3.utils/define-nuxt-component.md
new file mode 100644
index 0000000000..1a718a0a6c
--- /dev/null
+++ b/docs/content/3.api/3.utils/define-nuxt-component.md
@@ -0,0 +1,4 @@
+# `defineNuxtComponent`
+
+::NeedContribution
+::
diff --git a/docs/content/3.api/3.utils/define-nuxt-route-middleware.md b/docs/content/3.api/3.utils/define-nuxt-route-middleware.md
new file mode 100644
index 0000000000..a860c3ef4e
--- /dev/null
+++ b/docs/content/3.api/3.utils/define-nuxt-route-middleware.md
@@ -0,0 +1,7 @@
+# `defineNuxtRouteMiddleware`
+
+::ReadMore{link="/guide/features/routing"}
+::
+
+::NeedContribution
+::
diff --git a/docs/content/3.api/3.utils/define-page-meta.md b/docs/content/3.api/3.utils/define-page-meta.md
new file mode 100644
index 0000000000..f0649cc2b4
--- /dev/null
+++ b/docs/content/3.api/3.utils/define-page-meta.md
@@ -0,0 +1,7 @@
+# `definePageMeta`
+
+::ReadMore{link="/guide/features/routing"}
+::
+
+::NeedContribution
+::
diff --git a/docs/content/3.api/3.utils/index.md b/docs/content/3.api/3.utils/index.md
new file mode 100644
index 0000000000..a9141cab53
--- /dev/null
+++ b/docs/content/3.api/3.utils/index.md
@@ -0,0 +1,6 @@
+---
+title: Utils
+layout.aside: true
+layout.asideClass: ''
+navigation.redirect: /api/utils/
+---
diff --git a/docs/content/3.api/3.utils/navigate-to.md b/docs/content/3.api/3.utils/navigate-to.md
new file mode 100644
index 0000000000..c65a8b8427
--- /dev/null
+++ b/docs/content/3.api/3.utils/navigate-to.md
@@ -0,0 +1,7 @@
+# `navigateTo`
+
+::ReadMore{link="/guide/features/routing"}
+::
+
+::NeedContribution
+::
diff --git a/docs/content/3.api/3.utils/refresh-nuxt-data.md b/docs/content/3.api/3.utils/refresh-nuxt-data.md
new file mode 100644
index 0000000000..89fe2dcbc1
--- /dev/null
+++ b/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.
diff --git a/docs/content/3.api/3.utils/throw-error.md b/docs/content/3.api/3.utils/throw-error.md
new file mode 100644
index 0000000000..f0f9f407b4
--- /dev/null
+++ b/docs/content/3.api/3.utils/throw-error.md
@@ -0,0 +1,7 @@
+# `throwError`
+
+::ReadMore{link="/guide/features/error-handling"}
+::
+
+::NeedContribution
+::
diff --git a/docs/content/3.api/4.advanced/1.hooks.md b/docs/content/3.api/4.advanced/1.hooks.md
new file mode 100644
index 0000000000..83f8dd4841
--- /dev/null
+++ b/docs/content/3.api/4.advanced/1.hooks.md
@@ -0,0 +1,27 @@
+# Lifecycle Hooks
+
+::ReadMore{link="/guide/going-further/hooks"}
+::
+
+# App Hooks (runtime)
+
+Check the [app source code](https://github.com/nuxt/framework/blob/main/packages/nuxt3/src/app/nuxt.ts#L18) for all available hooks.
+
+Hook                   | Arguments         | Description
+-----------------------|-------------------|---------------
+`app:created`          | `vueApp`          | When initial `vueApp` instance is created
+`app:beforeMount`      | `vueApp`          | Same as `app:created`
+`app:mounted`          | `vueApp`          | When Vue app is initialized and mounted in browser
+`app:rendered`         | -                 | When SSR rendering is done
+`app:suspense:resolve` | `appComponent`    | On [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) resolved event
+`page:start`           | `pageComponent`   | On [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) pending event
+`page:finish`          | `pageComponent`   | On [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) resolved event
+`meta:register`        | `metaRenderers`   | (internal)
+`vue:setup`            | -                 | (internal)
+
+# Nuxt Hooks (build time)
+
+Check the [schema source code](https://github.com/nuxt/framework/blob/main/packages/schema/src/types/hooks.ts#L55) for all available hooks.
+
+::NeedContribution
+::
diff --git a/docs/content/3.docs/9.advanced/3.kit.md b/docs/content/3.api/4.advanced/2.kit.md
similarity index 56%
rename from docs/content/3.docs/9.advanced/3.kit.md
rename to docs/content/3.api/4.advanced/2.kit.md
index 8122835c0b..dc723f20c7 100644
--- a/docs/content/3.docs/9.advanced/3.kit.md
+++ b/docs/content/3.api/4.advanced/2.kit.md
@@ -1,53 +1,8 @@
-# Nuxt Kit
+# Kit Utilities
 
-> Nuxt Kit provides composable utilities to make interacting with [Nuxt Hooks](/docs/advanced/hooks) and [Nuxt Builder Core](/docs/advanced/nuxt#the-nuxt-interface) and developing [Nuxt Modules](/docs/advanced/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)
+::ReadMore{link="/guide/going-further/kit"}
 ::
 
-Nuxt kit, is an [esm-only package](/concepts/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()
-```
-
-### Use kit utilities
-
-Nuxt context is globally available using [unjs/unctx](https://github.com/unjs/unctx). Because of this, most kit composables do not need to have `nuxt` instances explicitly passed.
-
-```js [test.mjs]
-import { getNuxtVersion } from '@nuxt/kit'
-
-// 3.0.0
-console.log(getNuxtVersion())
-```
-
 ## Utilities
 
 ### Modules
diff --git a/docs/content/3.api/5.commands/add.md b/docs/content/3.api/5.commands/add.md
new file mode 100644
index 0000000000..1bf1567c7b
--- /dev/null
+++ b/docs/content/3.api/5.commands/add.md
@@ -0,0 +1,30 @@
+# `nuxi add`
+
+Scaffold an entity into your Nuxt application.
+
+```{bash}
+npx nuxi add [--cwd] [--force] <TEMPLATE> <NAME>
+```
+
+Option        | Default          | Description
+-------------------------|-----------------|------------------
+`TEMPLATE` | - | Specify a template of the file to be generated.
+`NAME` | - | Specify a name of the file that will be created.
+`--cwd` | `.` | The directory of the target application.
+`--force` | `false` | Force override file if it already exists.
+
+**Example:**
+
+```{bash}
+npx nuxi add component TheHeader
+```
+
+The `add` command generates new elements:
+
+* **component**: `npx nuxi add component TheHeader`
+* **composable**: `npx nuxi add composable foo`
+* **layout**: `npx nuxi add layout custom`
+* **plugin**: `npx nuxi add plugin analytics`
+* **page**: `npx nuxi add page about` or `npx nuxi add page "category/[id]"`
+* **middleware**: `npx nuxi add middleware auth`
+* **api**: `npx nuxi add api hello` (CLI will generate file under `/server/api`)
diff --git a/docs/content/3.api/5.commands/analyze.md b/docs/content/3.api/5.commands/analyze.md
new file mode 100644
index 0000000000..965381aa46
--- /dev/null
+++ b/docs/content/3.api/5.commands/analyze.md
@@ -0,0 +1,13 @@
+# `nuxi analyze`
+
+Analyze the production bundle or your Nuxt applicaiton.
+
+```{bash}
+npx nuxi analyze [rootDir]
+```
+
+The `analyze` command builds nuxt and analyzes the production bundle (experimental)
+
+Option        | Default          | Description
+-------------------------|-----------------|------------------
+`rootDir` | `.` | The directory of the target application.
diff --git a/docs/content/3.api/5.commands/build.md b/docs/content/3.api/5.commands/build.md
new file mode 100644
index 0000000000..ad42b42539
--- /dev/null
+++ b/docs/content/3.api/5.commands/build.md
@@ -0,0 +1,13 @@
+# `nuxi build`
+
+```{bash}
+npx nuxi build [rootDir]
+```
+
+The `build` command creates a `.output` directory with all your application, server and dependencies ready for production.
+
+Option        | Default          | Description
+-------------------------|-----------------|------------------
+`rootDir` | `.` | The root directory of the application to bundle.
+
+This command sets `process.env.NODE_ENV` to `production`. To override, define `NODE_ENV` in a `.env` file or as command-line argument.
diff --git a/docs/content/3.api/5.commands/dev.md b/docs/content/3.api/5.commands/dev.md
new file mode 100644
index 0000000000..1efcfcab64
--- /dev/null
+++ b/docs/content/3.api/5.commands/dev.md
@@ -0,0 +1,22 @@
+# `nuxi dev`
+
+```{bash}
+npx nuxi dev [rootDir] [--clipboard] [--open, -o] [--port, -p] [--host, -h] [--https] [--ssl-cert] [--ssl-key]
+```
+
+The `dev` command starts a development server with hot module replacement at [http://localhost:3000](https://localhost:3000)
+
+Option        | Default          | Description
+-------------------------|-----------------|------------------
+`rootDir` | `.` | The root directory of the application to serve.
+`--clipboard` | `false` | Copy URL to clipboard.
+`--open, -o` | `false` | Open URL in browser.
+`--port, -p` | `3000` | Port to listen.
+`--host, -h` | `localhost` | Hostname of the server.
+`--https` | `false` | Listen with `https` protocol with a self-signed certificate by default.
+`--ssl-cert` |`null` | Specify a certificate for https.
+`--ssl-key` |`null` | Specify the key for the https certificate.
+
+The port and host can also be set via NUXT_PORT, PORT, NUXT_HOST or HOST environment variables.
+
+This command sets `process.env.NODE_ENV` to `development`. To override, define `NODE_ENV` in a `.env` file or as command-line argument.
diff --git a/docs/content/3.api/5.commands/info.md b/docs/content/3.api/5.commands/info.md
new file mode 100644
index 0000000000..3f4cff4dc0
--- /dev/null
+++ b/docs/content/3.api/5.commands/info.md
@@ -0,0 +1,11 @@
+# `nuxi info`
+
+```{bash}
+npx nuxi info [rootDir]
+```
+
+The `info` command logs informations about the current or specified Nuxt project.
+
+Option        | Default          | Description
+-------------------------|-----------------|------------------
+`rootDir` | `.` | The directory of the target application.
diff --git a/docs/content/3.api/5.commands/init.md b/docs/content/3.api/5.commands/init.md
new file mode 100644
index 0000000000..9618de64c3
--- /dev/null
+++ b/docs/content/3.api/5.commands/init.md
@@ -0,0 +1,13 @@
+# `nuxi init`
+
+```{bash}
+npx nuxi init|create [--verbose|-v] [--template,-t] [dir]
+```
+
+The `init` command initializes a fresh Nuxt project.
+
+Option        | Default          | Description
+-------------------------|-----------------|------------------
+`--verbose, -v` | `false` | Log informations about the installation process.
+`--template, -t` | `nuxt/starter#v3` | Specify a Git repository to use as a template.
+`dir` | `nuxt-app` | Name of the install directory.
diff --git a/docs/content/3.api/5.commands/preview.md b/docs/content/3.api/5.commands/preview.md
new file mode 100644
index 0000000000..c7d2b524d1
--- /dev/null
+++ b/docs/content/3.api/5.commands/preview.md
@@ -0,0 +1,17 @@
+# `nuxi preview`
+
+```{bash}
+npx nuxi preview [rootDir]
+```
+
+The `preview` command starts a server to preview your Nuxt application after running the `build` command.
+
+Option        | Default          | Description
+-------------------------|-----------------|------------------
+`rootDir` | `.` | The root directory of the application to preview.
+
+This command sets `process.env.NODE_ENV` to `production`. To override, define `NODE_ENV` in a `.env` file or as command-line argument.
+
+::alert{type=info}
+For convenience, in preview mode, your `.env` file will be loaded into `process.env`. (However, in production you will need to ensure your environment variables are set yourself.)
+::
diff --git a/docs/content/3.api/5.commands/typecheck.md b/docs/content/3.api/5.commands/typecheck.md
new file mode 100644
index 0000000000..d8232ca219
--- /dev/null
+++ b/docs/content/3.api/5.commands/typecheck.md
@@ -0,0 +1,13 @@
+# `nuxi typecheck`
+
+```{bash}
+npx nuxi typecheck [rootDir]
+```
+
+The `typecheck` command runs [`vue-tsc`](https://github.com/johnsoncodehk/volar/tree/master/packages/vue-tsc) to check types throughout your app.
+
+Option        | Default          | Description
+-------------------------|-----------------|------------------
+`rootDir` | `.` | The directory of the target application.
+
+This command sets `process.env.NODE_ENV` to `production`. To override, define `NODE_ENV` in a `.env` file or as command-line argument.
diff --git a/docs/content/3.api/5.commands/upgrade.md b/docs/content/3.api/5.commands/upgrade.md
new file mode 100644
index 0000000000..eea68bc79a
--- /dev/null
+++ b/docs/content/3.api/5.commands/upgrade.md
@@ -0,0 +1,11 @@
+# `nuxi upgrade`
+
+```{bash}
+npx nuxi upgrade [--force|-f]
+```
+
+The `upgrade` command upgrades Nuxt 3 to the latest version.
+
+Option        | Default          | Description
+-------------------------|-----------------|------------------
+`--force, -f` | `false` | Removes `node_modules` and lock files before upgrade.
diff --git a/docs/content/3.api/index.md b/docs/content/3.api/index.md
new file mode 100644
index 0000000000..6dfef09c0a
--- /dev/null
+++ b/docs/content/3.api/index.md
@@ -0,0 +1,7 @@
+---
+title: References
+layout.aside: true
+navigation.exclusive: true
+navigation.collapse: true
+navigation.redirect: /api/composables/use-async-data
+---
diff --git a/docs/content/3.docs/1.usage/8.cli.md b/docs/content/3.docs/1.usage/8.cli.md
deleted file mode 100644
index 579043d303..0000000000
--- a/docs/content/3.docs/1.usage/8.cli.md
+++ /dev/null
@@ -1,151 +0,0 @@
-# Nuxi CLI
-
-Nuxi is the new Command-line interface (CLI) for Nuxt 3. This page references the commands and options of Nuxi.
-
-## Init
-
-```{bash}
-npx nuxi init|create [--verbose|-v] [--template,-t] [dir]
-```
-
-The `init` command initializes a fresh Nuxt project.
-
-Option        | Default          | Description
--------------------------|-----------------|------------------
-`--verbose, -v` | `false` | Log informations about the installation process.
-`--template, -t` | `nuxt/starter#v3` | Specify a Git repository to use as a template.
-`dir` | `nuxt-app` | Name of the install directory.
-
-## Dev
-
-```{bash}
-npx nuxi dev [rootDir] [--clipboard] [--open, -o] [--port, -p] [--host, -h] [--https] [--ssl-cert] [--ssl-key]
-```
-
-The `dev` command starts a development server with hot module replacement at [http://localhost:3000](https://localhost:3000)
-
-Option        | Default          | Description
--------------------------|-----------------|------------------
-`rootDir` | `.` | The root directory of the application to serve.
-`--clipboard` | `false` | Copy URL to clipboard.
-`--open, -o` | `false` | Open URL in browser.
-`--port, -p` | `3000` | Port to listen.
-`--host, -h` | `localhost` | Hostname of the server.
-`--https` | `false` | Listen with `https` protocol with a self-signed certificate by default.
-`--ssl-cert` |`null` | Specify a certificate for https.
-`--ssl-key` |`null` | Specify the key for the https certificate.
-
-The port and host can also be set via NUXT_PORT, PORT, NUXT_HOST or HOST environment variables.
-
-This command sets `process.env.NODE_ENV` to `development`. To override, define `NODE_ENV` in a `.env` file or as command-line argument.
-
-## Build
-
-```{bash}
-npx nuxi build [rootDir]
-```
-
-The `build` command creates a `.output` directory with all your application, server and dependencies ready for production.
-
-Option        | Default          | Description
--------------------------|-----------------|------------------
-`rootDir` | `.` | The root directory of the application to bundle.
-
-This command sets `process.env.NODE_ENV` to `production`. To override, define `NODE_ENV` in a `.env` file or as command-line argument.
-
-## Preview
-
-```{bash}
-npx nuxi preview [rootDir]
-```
-
-The `preview` command starts a server to preview your Nuxt application after running the `build` command.
-
-Option        | Default          | Description
--------------------------|-----------------|------------------
-`rootDir` | `.` | The root directory of the application to preview.
-
-This command sets `process.env.NODE_ENV` to `production`. To override, define `NODE_ENV` in a `.env` file or as command-line argument.
-
-::alert{type=info}
-For convenience, in preview mode, your `.env` file will be loaded into `process.env`. (However, in production you will need to ensure your environment variables are set yourself.)
-::
-
-## Info
-
-```{bash}
-npx nuxi info [rootDir]
-```
-
-The `info` command logs informations about the current or specified Nuxt project.
-
-Option        | Default          | Description
--------------------------|-----------------|------------------
-`rootDir` | `.` | The directory of the target application.
-
-## Analyze
-
-```{bash}
-npx nuxi analyze [rootDir]
-```
-
-The `analyze` command builds nuxt and analyzes the production bundle (experimental)
-
-Option        | Default          | Description
--------------------------|-----------------|------------------
-`rootDir` | `.` | The directory of the target application.
-
-## Typecheck
-
-```{bash}
-npx nuxi typecheck [rootDir]
-```
-
-The `typecheck` command runs [`vue-tsc`](https://github.com/johnsoncodehk/volar/tree/master/packages/vue-tsc) to check types throughout your app.
-
-Option        | Default          | Description
--------------------------|-----------------|------------------
-`rootDir` | `.` | The directory of the target application.
-
-This command sets `process.env.NODE_ENV` to `production`. To override, define `NODE_ENV` in a `.env` file or as command-line argument.
-
-## Upgrade
-
-```{bash}
-npx nuxi upgrade [--force|-f]
-```
-
-The `upgrade` command upgrades Nuxt 3 to the latest version.
-
-Option        | Default          | Description
--------------------------|-----------------|------------------
-`--force, -f` | `false` | Removes `node_modules` and lock files before upgrade.
-
-## Add
-
-```{bash}
-npx nuxi add [--cwd] [--force] <TEMPLATE> <NAME>
-```
-
-Option        | Default          | Description
--------------------------|-----------------|------------------
-`TEMPLATE` | - | Specify a template of the file to be generated.
-`NAME` | - | Specify a name of the file that will be created.
-`--cwd` | `.` | The directory of the target application.
-`--force` | `false` | Force override file if it already exists.
-
-**Example:**
-
-```{bash}
-npx nuxi add component TheHeader
-```
-
-The `add` command generates new elements:
-
-* **component**: `npx nuxi add component TheHeader`
-* **composable**: `npx nuxi add composable foo`
-* **layout**: `npx nuxi add layout custom`
-* **plugin**: `npx nuxi add plugin analytics`
-* **page**: `npx nuxi add page about` or `npx nuxi add page "category/[id]"`
-* **middleware**: `npx nuxi add middleware auth`
-* **api**: `npx nuxi add api hello` (CLI will generate file under `/server/api`)
diff --git a/docs/content/3.docs/1.usage/index.md b/docs/content/3.docs/1.usage/index.md
deleted file mode 100644
index 444ace6fad..0000000000
--- a/docs/content/3.docs/1.usage/index.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: 'Usage'
-layout.aside: true
-layout.asideClass: ''
-navigation.collapse: false
-navigation.redirect: /docs/usage/data-fetching
----
diff --git a/docs/content/3.docs/3.migration/index.md b/docs/content/3.docs/3.migration/index.md
deleted file mode 100644
index 5fb80179f5..0000000000
--- a/docs/content/3.docs/3.migration/index.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-navigation.collapse: true
-layout.aside: true
-layout.asideClass: ''
-navigation.redirect: /docs/migration/overview
----
diff --git a/docs/content/3.docs/8.deployment/99.presets.md b/docs/content/3.docs/8.deployment/99.presets.md
deleted file mode 100644
index a80e26c0b6..0000000000
--- a/docs/content/3.docs/8.deployment/99.presets.md
+++ /dev/null
@@ -1,17 +0,0 @@
----
-icon: IconPresets
----
-
-# Presets
-
-Nuxt provides four generic presets that you can use out-of-the-box.
-
-::list{type=success}
-
-- [Node.js server *(default)*](/docs/deployment/presets/server)
-- [Node.js function](/docs/deployment/presets/node)
-- [Lambda function](/docs/deployment/presets/lambda)
-- [Service worker](/docs/deployment/presets/service-worker)
-::
-
-If you need to [create a custom preset](/docs/deployment/presets/custom), that's possible too. 🚀
diff --git a/docs/content/3.docs/9.advanced/4.hooks.md b/docs/content/3.docs/9.advanced/4.hooks.md
deleted file mode 100644
index 3b61909fa6..0000000000
--- a/docs/content/3.docs/9.advanced/4.hooks.md
+++ /dev/null
@@ -1,63 +0,0 @@
-# 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
-
-This hooks are available for [Nuxt Modules](/docs/advanced/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 () => { })
-  })
-})
-```
-
-### Available hooks
-
-Check the [source code](https://github.com/nuxt/framework/blob/main/packages/schema/src/types/hooks.ts#L55) for all available hooks.
-
-## Runtime Hooks
-
-App hooks can be mainly used by [Nuxt Plugins](/docs/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', () => { })
-}
-```
-
-### Available hooks
-
-Check the [source code](https://github.com/nuxt/framework/blob/main/packages/nuxt3/src/app/nuxt.ts#L18) for all available hooks.
-
-**Note:** Please note
-
-Hook                   | Arguments         | Description
------------------------|-------------------|---------------
-`app:created`          | `vueApp`          | When initial `vueApp` instance is created
-`app:beforeMount`      | `vueApp`          | Same as `app:created`
-`app:mounted`          | `vueApp`          | When Vue app is initialized and mounted in browser
-`app:rendered`         | -                 | When SSR rendering is done
-`app:suspense:resolve` | `appComponent`    | On [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) resolved event
-`page:start`           | `pageComponent`   | On [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) pending event
-`page:finish`          | `pageComponent`   | On [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) resolved event
-`meta:register`        | `metaRenderers`   | (internal)
-`vue:setup`            | -                 | (internal)
diff --git a/docs/content/3.docs/index.md b/docs/content/3.docs/index.md
deleted file mode 100644
index 8910808d2a..0000000000
--- a/docs/content/3.docs/index.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: Docs
-layout.aside: true
-navigation.exclusive: true
-navigation.redirect: /docs/usage/data-fetching
----
diff --git a/docs/content/4.examples/0.essentials/hello-world.md b/docs/content/4.examples/0.essentials/hello-world.md
index 243c63daf2..458989e097 100644
--- a/docs/content/4.examples/0.essentials/hello-world.md
+++ b/docs/content/4.examples/0.essentials/hello-world.md
@@ -6,8 +6,7 @@ template: Example
 
 A minimal Nuxt 3 application only requires the `app.vue` and `nuxt.config.js` files.
 
-::alert{type=info icon=👉}
-Read more about [installation](/getting-started/installation).
+::ReadMore{link="/getting-started/quick-start"}
 ::
 
 ::sandbox{repo="nuxt/framework" branch="main" dir="examples/essentials/hello-world" file="app.vue"}
diff --git a/docs/content/4.examples/1.app/error-handling.md b/docs/content/4.examples/1.app/error-handling.md
index 3269256500..820c6ea8c2 100644
--- a/docs/content/4.examples/1.app/error-handling.md
+++ b/docs/content/4.examples/1.app/error-handling.md
@@ -6,8 +6,7 @@ template: Example
 
 This example shows how to handle errors in different contexts: pages, plugins, components and middleware.
 
-::alert{type=info icon=👉}
-Learn more about [error handling](/docs/usage/error-handling).
+::ReadMore{link="/guide/features/error-handling"}
 ::
 
 ::sandbox{repo="nuxt/framework" branch="main" dir="examples/app/error-handling" file="app.vue"}
diff --git a/docs/content/4.examples/1.app/plugins.md b/docs/content/4.examples/1.app/plugins.md
index 93fa2e938f..94c1e34682 100644
--- a/docs/content/4.examples/1.app/plugins.md
+++ b/docs/content/4.examples/1.app/plugins.md
@@ -6,8 +6,7 @@ template: Example
 
 This example shows how to use the `plugins/` directory to auto-register plugins.
 
-::alert{type=info icon=👉}
-Learn more about [plugins](/docs/directory-structure/plugins).
+::ReadMore{link="/guide/directory-structure/plugins"}
 ::
 
 ::sandbox{repo="nuxt/framework" branch="main" dir="examples/app/plugins" file="app.vue"}
diff --git a/docs/content/4.examples/1.app/teleport.md b/docs/content/4.examples/1.app/teleport.md
index 9efd5d149d..3832047238 100644
--- a/docs/content/4.examples/1.app/teleport.md
+++ b/docs/content/4.examples/1.app/teleport.md
@@ -8,8 +8,7 @@ Vue 3 provides the [`<Teleport>` component](https://vuejs.org/guide/built-ins/te
 
 This example shows how to use the `<Teleport>` with client-side and server-side rendering.
 
-::alert{type=info icon=👉}
-Learn more about [teleports](/docs/usage/teleports).
+::ReadMore{link="/guide/features/teleports"}
 ::
 
 ::sandbox{repo="nuxt/framework" branch="main" dir="examples/app/teleport" file="app.vue"}
diff --git a/docs/content/4.examples/2.auto-imports/components.md b/docs/content/4.examples/2.auto-imports/components.md
index 43d7c9e811..a13b4d2aa9 100644
--- a/docs/content/4.examples/2.auto-imports/components.md
+++ b/docs/content/4.examples/2.auto-imports/components.md
@@ -7,8 +7,7 @@ template: Example
 Components in the `components/` directory are auto imported and can be directly used in your templates.
 You can configure other directories to support components auto-imports.
 
-::alert{type=info icon=👉}
-Read more about [the components directory](/docs/directory-structure/components).
+::ReadMore{link="/guide/directory-structure/components"}
 ::
 
 ::sandbox{repo="nuxt/framework" branch="main" dir="examples/auto-imports/components" file="app.vue"}
diff --git a/docs/content/4.examples/2.auto-imports/composables.md b/docs/content/4.examples/2.auto-imports/composables.md
index 7dfa050ecf..7289ed43b5 100644
--- a/docs/content/4.examples/2.auto-imports/composables.md
+++ b/docs/content/4.examples/2.auto-imports/composables.md
@@ -7,8 +7,7 @@ template: Example
 This example shows how to use the `composables/` directory to auto import composables.
 If the component file provides a default export, the name of the composable will be mapped to the name of the file. Named exports can be used as-is.
 
-::alert{type=info icon=👉}
-Read more about [the composables directory](/docs/directory-structure/composables).
+::ReadMore{link="/guide/directory-structure/composables"}
 ::
 
 ::sandbox{repo="nuxt/framework" branch="main" dir="examples/auto-imports/composables" file="app.vue"}
diff --git a/docs/content/4.examples/3.composables/use-async-data.md b/docs/content/4.examples/3.composables/use-async-data.md
index e5fe6becfa..9fe9143ab6 100644
--- a/docs/content/4.examples/3.composables/use-async-data.md
+++ b/docs/content/4.examples/3.composables/use-async-data.md
@@ -2,7 +2,7 @@
 template: Example
 ---
 
-# useAsyncData
+# `useAsyncData`
 
 This example shows how to use `useAsyncData` to fetch data from an API endpoint.
 
@@ -10,8 +10,10 @@ This example shows how to use `useAsyncData` to fetch data from an API endpoint.
 Nuxt will automatically read files in the ~/server/api directory to create API endpoints.
 ::
 
-::alert{type=info icon=👉}
-Learn more about [data fetching](/docs/usage/data-fetching).
+::ReadMore{link="/api/composables/use-async-data"}
+::
+
+::ReadMore{link="/guide/features/data-fetching"}
 ::
 
 ::sandbox{repo="nuxt/framework" branch="main" dir="examples/composables/use-async-data" file="app.vue"}
diff --git a/docs/content/4.examples/3.composables/use-cookie.md b/docs/content/4.examples/3.composables/use-cookie.md
index bd71e42421..1b0dad55df 100644
--- a/docs/content/4.examples/3.composables/use-cookie.md
+++ b/docs/content/4.examples/3.composables/use-cookie.md
@@ -2,12 +2,11 @@
 template: Example
 ---
 
-# useCookie
+# `useCookie`
 
 This example shows how to use the `useCookie` API to persist small amounts of data that both client-side and server-side can use.
 
-::alert{type=info icon=👉}
-Learn more about [useCookie](/docs/usage/cookies).
+::ReadMore{link="/api/composables/use-cookie"}
 ::
 
 ::sandbox{repo="nuxt/framework" branch="main" dir="examples/composables/use-cookie" file="app.vue"}
diff --git a/docs/content/4.examples/3.composables/use-fetch.md b/docs/content/4.examples/3.composables/use-fetch.md
index 05ab182db9..f6365ee228 100644
--- a/docs/content/4.examples/3.composables/use-fetch.md
+++ b/docs/content/4.examples/3.composables/use-fetch.md
@@ -2,7 +2,7 @@
 template: Example
 ---
 
-# useFetch
+# `useFetch`
 
 This example shows how to use `useFetch` to fetch data from an API endpoint.
 
@@ -10,8 +10,10 @@ This example shows how to use `useFetch` to fetch data from an API endpoint.
 Nuxt will automatically read files in the ~/server/api directory to create API endpoints.
 ::
 
-::alert{type=info icon=👉}
-Learn more about [data fetching](/docs/usage/data-fetching).
+::ReadMore{link="/api/composables/use-fetch"}
+::
+
+::ReadMore{link="/guide/features/data-fetching"}
 ::
 
 ::sandbox{repo="nuxt/framework" branch="main" dir="examples/composables/use-fetch" file="app.vue"}
diff --git a/docs/content/4.examples/3.composables/use-head.md b/docs/content/4.examples/3.composables/use-head.md
index 4060dd628a..9b34888938 100644
--- a/docs/content/4.examples/3.composables/use-head.md
+++ b/docs/content/4.examples/3.composables/use-head.md
@@ -2,12 +2,18 @@
 template: Example
 ---
 
-# useHead
+# `useHead`
 
 This example shows how to use `useHead` and Nuxt built-in components to bind meta data to the head of the page.
 
 ::alert{type=info icon=👉}
-Learn more about [meta tags](/docs/usage/meta-tags).
+Learn more about [meta tags](/api/composables/use-meta).
+::
+
+::ReadMore{link="/api/composables/use-fetch"}
+::
+
+::ReadMore{link="/guide/features/head-management"}
 ::
 
 ::sandbox{repo="nuxt/framework" branch="main" dir="examples/composables/use-head" file="app.vue"}
diff --git a/docs/content/4.examples/3.composables/use-state.md b/docs/content/4.examples/3.composables/use-state.md
index 524a2fe73a..71e2535821 100644
--- a/docs/content/4.examples/3.composables/use-state.md
+++ b/docs/content/4.examples/3.composables/use-state.md
@@ -2,12 +2,18 @@
 template: Example
 ---
 
-# useState
+# `useState`
 
 `useState` is an SSR-friendly ref replacement. Its value will be preserved after server-side rendering and shared across all components using a unique key.
 
 ::alert{type=info icon=👉}
-Learn more about [useState](/docs/usage/state).
+Learn more about [useState](/api/composables/use-state).
+::
+
+::ReadMore{link="/api/composables/use-state"}
+::
+
+::ReadMore{link="/guide/features/state-management"}
 ::
 
 ::sandbox{repo="nuxt/framework" branch="main" dir="examples/composables/use-state" file="app.vue"}
diff --git a/docs/content/4.examples/4.routing/layouts.md b/docs/content/4.examples/4.routing/layouts.md
index 309aba9486..811a49a264 100644
--- a/docs/content/4.examples/4.routing/layouts.md
+++ b/docs/content/4.examples/4.routing/layouts.md
@@ -6,8 +6,7 @@ template: Example
 
 This example shows how to define default and custom layouts.
 
-::alert{type=info icon=👉}
-Learn more about [layouts](/docs/directory-structure/layouts).
+::ReadMore{link="/guide/directory-structure/layouts"}
 ::
 
 ::sandbox{repo="nuxt/framework" branch="main" dir="examples/routing/layouts" file="pages/index.vue"}
diff --git a/docs/content/4.examples/4.routing/middleware.md b/docs/content/4.examples/4.routing/middleware.md
index a867f19c67..b6136df2bd 100644
--- a/docs/content/4.examples/4.routing/middleware.md
+++ b/docs/content/4.examples/4.routing/middleware.md
@@ -6,8 +6,7 @@ template: Example
 
 This example shows how to add route middleware with the middleware/ directory or with a plugin, and how to use them globally or per page.
 
-::alert{type=info icon=👉}
-Learn more about [middleware](/docs/directory-structure/middleware).
+::ReadMore{link="/guide/directory-structure/middleware"}
 ::
 
 ::sandbox{repo="nuxt/framework" branch="main" dir="examples/routing/middleware" file="app.vue"}
diff --git a/docs/content/4.examples/4.routing/nuxt-link.md b/docs/content/4.examples/4.routing/nuxt-link.md
index 8be8cd7ae5..6298400e32 100644
--- a/docs/content/4.examples/4.routing/nuxt-link.md
+++ b/docs/content/4.examples/4.routing/nuxt-link.md
@@ -2,16 +2,15 @@
 template: Example
 ---
 
-# NuxtLink
+# `<NuxtLink>`
 
-This example shows different ways to use Nuxtlink.
+This example shows different ways to use `<NuxtLink>`.
 
 ::alert{type=info icon=💡}
-`components/myNuxtLink.js` defines a custom NuxtLink.
+`components/myNuxtLink.js` defines a custom `<NuxtLink>`.
 ::
 
-::alert{type=info icon=👉}
-Learn more about [NuxtLink](/docs/usage/nuxt-link).
+::ReadMore{link="/api/components/nuxt-link"}
 ::
 
 ::sandbox{repo="nuxt/framework" branch="main" dir="examples/routing/nuxt-link" file="app.vue"}
diff --git a/docs/content/4.examples/4.routing/pages.md b/docs/content/4.examples/4.routing/pages.md
index 96d3f63d89..9852b128fb 100644
--- a/docs/content/4.examples/4.routing/pages.md
+++ b/docs/content/4.examples/4.routing/pages.md
@@ -6,8 +6,7 @@ template: Example
 
 This example shows how to use the `pages/` directory to create application routes.
 
-::alert{type=info icon=👉}
-Learn more about [pages](/docs/directory-structure/pages).
+::ReadMore{link="/guide/directory-structure/pages"}
 ::
 
 ::sandbox{repo="nuxt/framework" branch="main" dir="examples/routing/pages" file="app.vue"}
diff --git a/docs/content/4.examples/4.routing/universal-router.md b/docs/content/4.examples/4.routing/universal-router.md
index f52df48370..7109063905 100644
--- a/docs/content/4.examples/4.routing/universal-router.md
+++ b/docs/content/4.examples/4.routing/universal-router.md
@@ -6,4 +6,7 @@ template: Example
 
 This example demonstrates Nuxt universal routing utilities without depending on `pages/` and `vue-router`.
 
+::ReadMore{link="/guide/features/routing"}
+::
+
 ::sandbox{repo="nuxt/framework" branch="main" dir="examples/routing/universal-router" file="app.vue"}
diff --git a/docs/content/4.examples/5.advanced/module-extend-pages.md b/docs/content/4.examples/5.advanced/module-extend-pages.md
index c34fd92af3..f7f9ea258f 100644
--- a/docs/content/4.examples/5.advanced/module-extend-pages.md
+++ b/docs/content/4.examples/5.advanced/module-extend-pages.md
@@ -6,8 +6,7 @@ template: Example
 
 This example defines a new `test` page using `extendPages` within a module.
 
-::alert{type=info icon=👉}
-Learn more about [modules creation](/docs/advanced/modules).
+::ReadMore{link="/guide/going-further/modules"}
 ::
 
 ::sandbox{repo="nuxt/framework" branch="main" dir="examples/advanced/module-extend-pages" file="pages/index.vue"}
diff --git a/docs/content/4.examples/5.advanced/test.md b/docs/content/4.examples/5.advanced/test.md
deleted file mode 100644
index fdf3078207..0000000000
--- a/docs/content/4.examples/5.advanced/test.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-template: Example
----
-
-# Test
-
-::sandbox{repo="nuxt/framework" branch="main" dir="examples/advanced/test" file="app.vue"}
diff --git a/docs/content/4.examples/5.advanced/testing.md b/docs/content/4.examples/5.advanced/testing.md
new file mode 100644
index 0000000000..797138966a
--- /dev/null
+++ b/docs/content/4.examples/5.advanced/testing.md
@@ -0,0 +1,14 @@
+---
+template: Example
+---
+
+# Testing
+
+::alert{type=info icon=👉}
+Learn more about [testing](/guide/going-further/testing).
+::
+
+::ReadMore{link="/guide/going-further/testing"}
+::
+
+::sandbox{repo="nuxt/framework" branch="main" dir="examples/advanced/testing" file="app.vue"}
diff --git a/docs/content/4.examples/6.experimental/reactivity-transform.md b/docs/content/4.examples/6.experimental/reactivity-transform.md
index 888b6c4f87..baa15cf02f 100644
--- a/docs/content/4.examples/6.experimental/reactivity-transform.md
+++ b/docs/content/4.examples/6.experimental/reactivity-transform.md
@@ -6,8 +6,7 @@ template: Example
 
 This example demonstrates the support of Reactivity transform in Nuxt 3.
 
-::alert{type=info icon=👉}
-Learn more about [Reactivity transform](https://vuejs.org/guide/extras/reactivity-transform.html) on the Vue docs.
+::ReadMore{link="https://vuejs.org/guide/extras/reactivity-transform.html" title="Reactivity transform"}
 ::
 
 ::sandbox{repo="nuxt/framework" branch="main" dir="examples/experimental/reactivity-transform" file="app.vue"}
diff --git a/docs/content/_collections/header.md b/docs/content/_collections/header.md
index 69ad9598b0..fbd2feb0b1 100644
--- a/docs/content/_collections/header.md
+++ b/docs/content/_collections/header.md
@@ -2,13 +2,13 @@
 links:
   -
     title: 'Getting Started'
-    to: '/getting-started/introduction'
+    to: '/getting-started/quick-start'
   -
-    title: 'Concepts'
-    to: '/concepts/introduction'
+    title: 'Guide'
+    to: '/guide/concepts/introduction'
   -
-    title: 'Docs'
-    to: '/docs/usage/data-fetching'
+    title: 'API'
+    to: '/api/composables/use-async-data'
   -
     title: 'Examples'
     to: '/examples/essentials/hello-world'
diff --git a/docs/content/1.getting-started/4.bridge.md b/docs/content/bridge/1.overview.md
similarity index 88%
rename from docs/content/1.getting-started/4.bridge.md
rename to docs/content/bridge/1.overview.md
index e2d83cfecd..3a417cd89f 100644
--- a/docs/content/1.getting-started/4.bridge.md
+++ b/docs/content/bridge/1.overview.md
@@ -1,14 +1,19 @@
-# Migrating to Bridge
+---
+title: Overview
+head.title: 'Migrate from Nuxt 2 to Nuxt Bridge'
+head.titleTemplate: ''
+---
+
+# Migrate from Nuxt 2 to Nuxt Bridge
 
 Experience Nuxt 3 features on existing Nuxt 2 projects.
 
 ::alert
-If you're starting a fresh Nuxt 3 project, please skip this section and go to [Nuxt 3 Installation](/getting-started/installation).<br>
-Learn more in [Introduction](/getting-started/introduction).
+If you're starting a fresh Nuxt 3 project, please skip this section and go to [Nuxt 3 Installation](/getting-started/quick-start).
 ::
 
 ::alert{type=warning}
-Nuxt Bridge provides identical features to Nuxt 3 ([docs](/docs/usage)) but there are some limitations, notably that `useAsyncData` and `useFetch` composables are not available. Please read the rest of this page for details.
+Nuxt Bridge provides identical features to Nuxt 3 ([docs](/guide/features)) but there are some limitations, notably that `useAsyncData` and `useFetch` composables are not available. Please read the rest of this page for details.
 ::
 
 Bridge is a forward-compatibility layer that allows you to experience many of the new Nuxt 3 features by simply installing and enabling a Nuxt module.
@@ -64,7 +69,7 @@ You will also need to update your scripts within your `package.json` to reflect
 
 ### Nuxi
 
-Nuxt 3 introduced the new Nuxt CLI command [`nuxi`](/getting-started/commands/). Update your scripts as follows to leverage the better support from Nuxt Bridge:
+Nuxt 3 introduced the new Nuxt CLI command [`nuxi`](/api/commands/add). Update your scripts as follows to leverage the better support from Nuxt Bridge:
 
 ```diff
 {
@@ -143,11 +148,11 @@ In case you need to extend options provided by `./.nuxt/tsconfig.json` further,
 
 ## Migrate Composition API
 
-If you were using `@vue/composition-api` or `@nuxtjs/composition-api`, please read the [composition api migration guide](/getting-started/bridge-composition-api).
+If you were using `@vue/composition-api` or `@nuxtjs/composition-api`, please read the [composition api migration guide](/bridge/bridge-composition-api).
 
 ### Migrate from CommonJS to ESM
 
-Nuxt 3 natively supports TypeScript and ECMAScript Modules. Please check [Native ES Modules](/concepts/esm) for more info and upgrading.
+Nuxt 3 natively supports TypeScript and ECMAScript Modules. Please check [Native ES Modules](/guide/going-further/esm) for more info and upgrading.
 
 ## Remove incompatible and obsolete modules
 
@@ -156,8 +161,8 @@ Nuxt 3 natively supports TypeScript and ECMAScript Modules. Please check [Native
 - Remove `@nuxt/typescript-build`: Bridge enables same functionality
 - Remove `@nuxt/typescript-runtime` and `nuxt-ts`: Nuxt 2 has built-in runtime support
 - Remove `@nuxt/nitro`: Bridge injects same functionality
-- Remove `@vue/composition-api` from your dependencies ([migration guide](/getting-started/bridge-composition-api)).
-- Remove `@nuxtjs/composition-api` from your dependencies (and from your modules in `nuxt.config`) ([migration guide](/getting-started/bridge-composition-api)).
+- Remove `@vue/composition-api` from your dependencies ([migration guide](/bridge/bridge-composition-api)).
+- Remove `@nuxtjs/composition-api` from your dependencies (and from your modules in `nuxt.config`) ([migration guide](/bridge/bridge-composition-api)).
 
 ## Exclude built Nitro folder from git
 
@@ -181,7 +186,7 @@ export default defineNuxtConfig({
 
 You can now migrate to the Nuxt 3 plugins API, which is slightly different in format from Nuxt 2.
 
-Plugins now take only one argument (`nuxtApp`). You can find out more in [the docs](/docs/directory-structure/plugins).
+Plugins now take only one argument (`nuxtApp`). You can find out more in [the docs](/guide/directory-structure/plugins).
 
 ```js
 export default defineNuxtPlugin(nuxtApp => {
@@ -225,7 +230,7 @@ export default defineNuxtConfig({
 This `useHead` composable uses `@vueuse/head` under the hood (rather than `vue-meta`) to manipulate your `<head>`.
 Accordingly, we recommend not to use both the native Nuxt 2 `head()` properties as well as `useHead`, as they may conflict.
 
-For more information on how to use this composable, see [the docs](/docs/usage/meta-tags#usehead-composable).
+For more information on how to use this composable, see [the docs](/guide/features/head-management).
 
 ## Feature Flags
 
diff --git a/docs/content/1.getting-started/5.bridge-composition-api.md b/docs/content/bridge/2.bridge-composition-api.md
similarity index 93%
rename from docs/content/1.getting-started/5.bridge-composition-api.md
rename to docs/content/bridge/2.bridge-composition-api.md
index 1ca27398ef..95b0e2183b 100644
--- a/docs/content/1.getting-started/5.bridge-composition-api.md
+++ b/docs/content/bridge/2.bridge-composition-api.md
@@ -1,8 +1,9 @@
 ---
-navigation: false
+head.title: 'Nuxt 2 to Nuxt Bridge: Composition API'
+head.titleTemplate: ''
 ---
 
-# Migrating to Bridge Composition API
+# Composition API
 
 Nuxt Bridge provides access to Composition API syntax. It is specifically designed to be aligned with Nuxt 3. Because of this, there are a few extra steps to take when enabling Nuxt Bridge, if you have been using the Composition API previously.
 
@@ -38,7 +39,7 @@ Because some composables have been removed and don't yet have a replacement, thi
 2. Remove any explicit imports of the basic Vue Composition API composables.
 
    ::alert{type=info}
-   Nuxt Bridge [auto-imports](/concepts/auto-imports) Vue composables, you don't have to explicitly import them.
+   Nuxt Bridge [auto-imports](/guide/concepts/auto-imports) Vue composables, you don't have to explicitly import them.
    ::
 
    ```diff
@@ -90,7 +91,7 @@ export default <Plugin> function (ctx, inject) {}
 ```
 
 ::alert
-You may wish to [migrate your plugins to Nuxt 3-style plugins](/getting-started/bridge#new-plugins-format-optional) as a next (optional) step.
+You may wish to [migrate your plugins to Nuxt 3-style plugins](/bridge#new-plugins-format-optional) as a next (optional) step.
 ::
 
 ### `onGlobalSetup`
@@ -129,7 +130,7 @@ The key differences are that you must provide a _key_ for this state (which Nuxt
 
 Because the state is keyed, you can access the same state from multiple locations, as long as you are using the same key.
 
-You can read more about how to use this composable in [the Nuxt 3 docs](/docs/usage/state#usestate).
+You can read more about how to use this composable in [the Nuxt 3 docs](/api/composables/use-state).
 
 ### `ssrPromise`
 
@@ -186,7 +187,7 @@ const wrapProperty = (property, makeComputed = true) => () => {
 
 ### `useAsync` and `useFetch`
 
-These two composables can be replaced with `useLazyAsyncData` and `useLazyFetch`, which are documented [in the Nuxt 3 docs](/docs/usage/data-fetching). Just like the previous `@nuxtjs/composition-api` composables, these composables do not block route navigation on the client-side (hence the 'lazy' part of the name).
+These two composables can be replaced with `useLazyAsyncData` and `useLazyFetch`, which are documented [in the Nuxt 3 docs](/guide/features/data-fetching). Just like the previous `@nuxtjs/composition-api` composables, these composables do not block route navigation on the client-side (hence the 'lazy' part of the name).
 
 ::alert
 Note that the API is entirely different, despite similar sounding names. Importantly, you should not attempt to change the value of other variables outside the composable (as you may have been doing with the previous `useFetch`).
@@ -274,4 +275,4 @@ export default defineNuxtConfig({
 
 This `useHead` composable uses `@vueuse/head` under the hood (rather than `vue-meta`) to manipulate your `<head>`. Accordingly, it is recommended not to use both the native Nuxt 2 `head()` properties as well as `useHead`, as they may conflict.
 
-For more information on how to use this composable, see [the Nuxt 3 docs](/docs/usage/meta-tags#usehead-composable).
+For more information on how to use this composable, see [the Nuxt 3 docs](/guide/features/head-management).
diff --git a/docs/content/2.concepts/index.md b/docs/content/bridge/index.md
similarity index 55%
rename from docs/content/2.concepts/index.md
rename to docs/content/bridge/index.md
index e2c77433b9..c3f43b0398 100644
--- a/docs/content/2.concepts/index.md
+++ b/docs/content/bridge/index.md
@@ -1,7 +1,6 @@
 ---
-title: Concepts
+navigation.exclusive: true
+navigation.redirect: /bridge/overview
 layout.aside: true
 layout.asideClass: ''
-navigation.exclusive: true
-navigation.redirect: /concepts/introduction
 ---
diff --git a/docs/content/index.md b/docs/content/index.md
index 238e28c9c1..66954ffc94 100644
--- a/docs/content/index.md
+++ b/docs/content/index.md
@@ -21,7 +21,7 @@ Build your next application with Vue 3 and experience hybrid rendering, powerful
 Nuxt 3 is an open source framework making web development simple and powerful.
 
 #secondary-button
-:button-link[Get started]{ href="/getting-started" size="medium" aria-label="Get started" }
+:button-link[Get started]{ href="/getting-started/quick-start" size="medium" aria-label="Get started" }
 ::
 
 ::home-features{.dark:bg-secondary-darkest .bg-gray-50}
@@ -142,17 +142,17 @@ Nuxt 3 has been re-architected with a smaller core and optimized for faster perf
     :icon-nuxt-nitro{.h-32}
     :headline[Nitro Engine]
 
-    We worked for 9 months on Nuxt's new server engine for Nuxt: [**Nitro**](/concepts/server-engine). It unlocks new **full-stack capabilities** to Nuxt server and beyond.
+    We worked for 9 months on Nuxt's new server engine for Nuxt: [**Nitro**](/guide/concepts/server-engine). It unlocks new **full-stack capabilities** to Nuxt server and beyond.
 
-    In development, it uses [Rollup](https://rollupjs.org/guide/en/) and [Node.js workers](https://nodejs.org/api/worker_threads.html) for your server code and context isolation. It also **generates your server API** by reading files in [`server/api/`](/docs/directory-structure/server#api-routes) and **server middleware** from [`server/middleware/`](/docs/directory-structure/server#server-middleware).
+    In development, it uses [Rollup](https://rollupjs.org/guide/en/) and [Node.js workers](https://nodejs.org/api/worker_threads.html) for your server code and context isolation. It also **generates your server API** by reading files in [`server/api/`](/guide/directory-structure/server#api-routes) and **server middleware** from [`server/middleware/`](/guide/directory-structure/server#server-middleware).
 
-    In production, it builds your app and server into one universal [`.output`](/docs/directory-structure/output) directory. This **output is light**: minified and removed from any Node.js modules (except polyfills). You can deploy this output on any system supporting JavaScript, from Node.js, Serverless, Workers, Edge-side rendering or purely static.
+    In production, it builds your app and server into one universal [`.output`](/guide/directory-structure/output) directory. This **output is light**: minified and removed from any Node.js modules (except polyfills). You can deploy this output on any system supporting JavaScript, from Node.js, Serverless, Workers, Edge-side rendering or purely static.
 
     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.
 
     The foundation of the Nitro server is rollup and [h3](https://github.com/unjs/h3): a minimal http framework built for high performance and portability.
 
-    :button-link[Learn more about Nitro]{ href="/concepts/server-engine" size="medium" aria-label="Learn more about Nitro" }
+    :button-link[Learn more about Nitro]{ href="/guide/concepts/server-engine" size="medium" aria-label="Learn more about Nitro" }
   ::
 ::
 
@@ -178,7 +178,7 @@ Nuxt 3 has been re-architected with a smaller core and optimized for faster perf
     As we've been working on new features for Nuxt 3, we've back-ported some of them to Nuxt 2.
 
     ::list{.mb-8}
-    - Using [Nitro server](/concepts/server-engine) with Nuxt 2
+    - Using [Nitro server](/guide/concepts/server-engine) with Nuxt 2
     - Using Composition API (same as Nuxt 3) with Nuxt 2
     - Using new CLI and DevTools with Nuxt 2
     - Progressively upgrade to Nuxt 3
@@ -186,6 +186,6 @@ Nuxt 3 has been re-architected with a smaller core and optimized for faster perf
     - Upgrade piece by piece (Nitro, Composition API, Nuxt Kit)
     ::
 
-    :button-link[Get started with Nuxt Bridge]{ href="/getting-started/bridge" size="medium" aria-label="Get started" }
+    :button-link[Get started with Nuxt Bridge]{ href="/bridge" size="medium" aria-label="Get started" }
   ::
 ::
diff --git a/docs/content/3.docs/3.migration/1.overview.md b/docs/content/migration/1.overview.md
similarity index 85%
rename from docs/content/3.docs/3.migration/1.overview.md
rename to docs/content/migration/1.overview.md
index c34c890aa9..3b1aa20c76 100644
--- a/docs/content/3.docs/3.migration/1.overview.md
+++ b/docs/content/migration/1.overview.md
@@ -1,15 +1,23 @@
-# Overview
+---
+title: Overview
+head.title: 'Migrate from Nuxt 2 to Nuxt 3'
+head.titleTemplate: ''
+---
 
-<!-- ::alert{type=info}
+# Migrate from Nuxt 2 to Nuxt 3
+
+Nuxt 3 is a complete rewrite of Nuxt 2, and also based on a new set of underlying technologies. That means there will be significant changes when migrating a Nuxt 2 app to Nuxt 3, although you can expect migration to become more straightforward as we move toward a stable release.
+
+<!-- 
+::alert{type=info}
 Nuxt 3 is now in release candidate stage. The main goal of the release candidate stage is to **increase the adoption rate of Nuxt 3** and **increase stability**. However, it is still in continued development. Read more about [Nuxt 3 release candidate status](https://github.com/nuxt/framework/discussions/3447).
-:: -->
+:: 
+-->
 
 ::alert{type=info}
 This migration guide is under progress to align with the development of Nuxt 3.
 ::
 
-Nuxt 3 is a complete rewrite of Nuxt 2, and also based on a new set of underlying technologies. That means there will be significant changes when migrating a Nuxt 2 app to Nuxt 3, although you can expect migration to become more straightforward as we move toward a stable release.
-
 Some of these significant changes include:
 
 1. Moving from Vue 2 to Vue 3, including defaulting to the Composition API and script setup.
@@ -17,5 +25,5 @@ Some of these significant changes include:
 1. Moving from a runtime Nuxt dependency to a minimal, standalone server compiled with nitropack.
 
 ::alert{type=info}
-If you need to remain on Nuxt 2, but want to benefit from Nuxt 3 features in Nuxt 2, you can alternatively check out [how to get started with Bridge](/getting-started/bridge).
+If you need to remain on Nuxt 2, but want to benefit from Nuxt 3 features in Nuxt 2, you can alternatively check out [how to get started with Bridge](/bridge).
 ::
diff --git a/docs/content/3.docs/3.migration/10.bundling.md b/docs/content/migration/10.bundling.md
similarity index 89%
rename from docs/content/3.docs/3.migration/10.bundling.md
rename to docs/content/migration/10.bundling.md
index b5eca20693..d145812574 100644
--- a/docs/content/3.docs/3.migration/10.bundling.md
+++ b/docs/content/migration/10.bundling.md
@@ -1,3 +1,8 @@
+---
+head.title: 'Nuxt 2 to Nuxt 3: Build Tooling'
+head.titleTemplate: ''
+---
+
 # Build Tooling
 
 We use the following build tools by default:
@@ -11,7 +16,7 @@ For this reason, most of your previous `build` configuration in `nuxt.config` wi
 
 If you need to configure any of Nuxt's build tools, you can do so in your `nuxt.config`, using the new top-level `vite`, `webpack` and `postcss` keys.
 
-In addition, Nuxt ships with TypeScript support. [Find out more](/docs/concepts/typescript).
+In addition, Nuxt ships with TypeScript support. [Find out more](/guide/concepts/typescript).
 
 ## Steps
 
diff --git a/docs/content/3.docs/3.migration/11.server.md b/docs/content/migration/11.server.md
similarity index 84%
rename from docs/content/3.docs/3.migration/11.server.md
rename to docs/content/migration/11.server.md
index 107e630a21..6a8aa255f4 100644
--- a/docs/content/3.docs/3.migration/11.server.md
+++ b/docs/content/migration/11.server.md
@@ -1,8 +1,13 @@
+---
+head.title: 'Nuxt 2 to Nuxt 3: Server'
+head.titleTemplate: ''
+---
+
 # Server
 
 In a built Nuxt 3 application, there is no runtime Nuxt dependency. That means your site will be highly performant, and ultra-slim. But it also means you can no longer hook into runtime Nuxt server hooks.
 
-[Read more about the Nitro server engine](/concepts/server-engine).
+[Read more about the Nitro server engine](/guide/concepts/server-engine).
 
 ## Steps
 
diff --git a/docs/content/3.docs/3.migration/2.configuration.md b/docs/content/migration/2.configuration.md
similarity index 84%
rename from docs/content/3.docs/3.migration/2.configuration.md
rename to docs/content/migration/2.configuration.md
index f534e8a72b..7ab0088251 100644
--- a/docs/content/3.docs/3.migration/2.configuration.md
+++ b/docs/content/migration/2.configuration.md
@@ -1,7 +1,9 @@
 ---
-title: Configuration
+head.title: 'Nuxt 2 to Nuxt 3: Configuration'
+head.titleTemplate: ''
 ---
-# Project Configuration
+
+# Configuration
 
 ## `nuxt.config`
 
@@ -25,7 +27,7 @@ Nuxt configuration will be loaded using [`unjs/jiti`](https://github.com/unjs/ji
 
    ```ts [Nuxt 3]
    import { defineNuxtConfig } from 'nuxt3'
-   
+
    export default defineNuxtConfig({
      // ...
    })
@@ -49,7 +51,7 @@ Nuxt configuration will be loaded using [`unjs/jiti`](https://github.com/unjs/ji
 
    ```ts [Nuxt 3]
    import { defineNuxtConfig } from 'nuxt3'
-   
+
    export default defineNuxtConfig({
      hooks: {
        'pages:extend' (routes) {
@@ -63,7 +65,7 @@ Nuxt configuration will be loaded using [`unjs/jiti`](https://github.com/unjs/ji
 
 #### ESM Syntax
 
-Nuxt 3 is an [ESM native framework](/concepts/esm). Although [`unjs/jiti`](https://github.com/unjs/jiti) provides semi compatibility when loading `nuxt.config` file, avoid any usage of `require` and `module.exports` in this file.
+Nuxt 3 is an [ESM native framework](/guide/going-further/esm). Although [`unjs/jiti`](https://github.com/unjs/jiti) provides semi compatibility when loading `nuxt.config` file, avoid any usage of `require` and `module.exports` in this file.
 
 1. Change `module.exports` to `export default`
 1. Change `const lib = require('lib')` to `import lib from 'lib'`
@@ -86,14 +88,14 @@ Nuxt and Nuxt Modules are now build-time-only.
 2. Check for Nuxt 3 compatibility of modules.
 
 ::alert
-If you are a module author, you can check out [more information about module compatibility](/docs/migration/module-authors) and [our module author guide](/docs/advanced/modules).
+If you are a module author, you can check out [more information about module compatibility](/migration/module-authors) and [our module author guide](/guide/going-further/modules).
 ::
 
 ## TypeScript
 
 It will be much easier to migrate your application if you use Nuxt's TypeScript integration. This does not mean you need to write your application in TypeScript, just that Nuxt will provide automatic type hints for your editor.
 
-You can read more about Nuxt's TypeScript support [in the docs](/docs/concepts/typescript).
+You can read more about Nuxt's TypeScript support [in the docs](/guide/concepts/typescript).
 
 ::alert{icon=📦}
 Nuxt can type-check your app using [`vue-tsc`](https://github.com/johnsoncodehk/volar/tree/master/packages/vue-tsc) with `nuxi typecheck` command.
@@ -110,7 +112,7 @@ Nuxt can type-check your app using [`vue-tsc`](https://github.com/johnsoncodehk/
    ```
 
 1. Run `npx nuxi prepare` to generate `.nuxt/tsconfig.json`.
-1. Install Volar following the instructions in the [docs](/docs/getting-started/introduction).
+1. Install Volar following the instructions in the [docs](/getting-started/quick-start#prerequisites).
 
 ## Vue changes
 
diff --git a/docs/content/3.docs/3.migration/20.module-authors.md b/docs/content/migration/20.module-authors.md
similarity index 76%
rename from docs/content/3.docs/3.migration/20.module-authors.md
rename to docs/content/migration/20.module-authors.md
index 5faf0bd29b..3c5c0f2ba8 100644
--- a/docs/content/3.docs/3.migration/20.module-authors.md
+++ b/docs/content/migration/20.module-authors.md
@@ -1,10 +1,15 @@
+---
+head.title: 'Nuxt 2 to Nuxt 3: Modules'
+head.titleTemplate: ''
+---
+
 # Modules
 
 ## Module Compatibility
 
 Nuxt 3 has a basic backward compatibility layer for Nuxt 2 modules using `@nuxt/kit` auto wrappers. But there are usually steps to follow to make modules compatible with Nuxt 3 and sometimes, using Nuxt Bridge is required for cross-version compatibility.
 
-We have prepared a [Dedicated Guide](/docs/advanced/modules) for authoring Nuxt 3 ready modules using `@nuxt/kit`. Currently best migration path is to follow it and rewrite your modules. Rest of this guide includes preparation steps if you prefer to avoid a full rewrite yet making modules compatibile with Nuxt 3.
+We have prepared a [Dedicated Guide](/guide/going-further/modules) for authoring Nuxt 3 ready modules using `@nuxt/kit`. Currently best migration path is to follow it and rewrite your modules. Rest of this guide includes preparation steps if you prefer to avoid a full rewrite yet making modules compatibile with Nuxt 3.
 
 ::alert
 You can check for a list of Nuxt 3 ready modules from [Nuxt Modules](https://modules.nuxtjs.org/?version=3.x).
@@ -28,11 +33,11 @@ When Nuxt 3 users add your module, a compatible module container layer from `@nu
 
 Migrating to `@nuxt/bridge` is the first and most important step for supporting Nuxt 3.
 
-If you have a fixture or example in your module, add `@nuxt/bridge` package to its config (see [example](/getting-started/bridge#update-nuxtconfig))
+If you have a fixture or example in your module, add `@nuxt/bridge` package to its config (see [example](/bridge#update-nuxtconfig))
 
 ### Migrate from CommonJS to ESM
 
-Nuxt 3 natively supports TypeScript and ECMAScript Modules. Please check [Native ES Modules](/concepts/esm) for more info and upgrading.
+Nuxt 3 natively supports TypeScript and ECMAScript Modules. Please check [Native ES Modules](/guide/going-further/esm) for more info and upgrading.
 
 ### Ensure plugins default export
 
@@ -64,16 +69,16 @@ export default () => { }
 
 With Nuxt 3, Nuxt is now a build-time-only dependency, which means that modules shouldn't attempt to hook into the Nuxt runtime.
 
-Your module should work even if it's only added to [`buildModules`](/docs/directory-structure/nuxt.config#buildmodules) (instead of `modules`). For example:
+Your module should work even if it's only added to [`buildModules`](/guide/directory-structure/nuxt.config#buildmodules) (instead of `modules`). For example:
 
-- Avoid updating `process.env` within a Nuxt module and reading by a nuxt plugin; use [`runtimeConfig`](/docs/directory-structure/nuxt.config#publicruntimeconfig) instead.
+- Avoid updating `process.env` within a Nuxt module and reading by a nuxt plugin; use [`runtimeConfig`](/guide/directory-structure/nuxt.config#publicruntimeconfig) instead.
 - (*) Avoid depending on runtime hooks like `vue-renderer:*` for production
 - (*) Avoid adding `serverMiddleware` by importing them inside the module. Instead, add them by referencing a file path so that they are independent of the module's context
 
 (*) Unless it is for `nuxt dev` purpose only and guarded with `if (nuxt.options.dev) { }`.
 
 ::alert{type=info icon=🔎}
-Continue reading about Nuxt 3 modules in the [Modules guide](/docs/advanced/modules).
+Continue reading about Nuxt 3 modules in the [Modules guide](/guide/going-further/modules).
 ::
 
 ### Use TypeScript (optional)
diff --git a/docs/content/3.docs/3.migration/3.auto-imports.md b/docs/content/migration/3.auto-imports.md
similarity index 70%
rename from docs/content/3.docs/3.migration/3.auto-imports.md
rename to docs/content/migration/3.auto-imports.md
index 62714d208c..4a8937322e 100644
--- a/docs/content/3.docs/3.migration/3.auto-imports.md
+++ b/docs/content/migration/3.auto-imports.md
@@ -1,16 +1,21 @@
+---
+head.title: 'Nuxt 2 to Nuxt 3: Auto Imports'
+head.titleTemplate: ''
+---
+
 # Auto Imports
 
 Nuxt 3 adopts a minimal friction approach, meaning wherever possible components and composables are auto-imported.
 
 ::alert{type=info}
-In the rest of the migration documentation, you will notice that key Nuxt and Vue utilities do not have explicit imports. This is not a typo; Nuxt will automatically import them for you, and you should get full type hinting if you have followed [the instructions](/docs/migration/configuration#typescript) to use Nuxt's TypeScript support.
+In the rest of the migration documentation, you will notice that key Nuxt and Vue utilities do not have explicit imports. This is not a typo; Nuxt will automatically import them for you, and you should get full type hinting if you have followed [the instructions](/migration/configuration#typescript) to use Nuxt's TypeScript support.
 ::
 
-[Read more about auto imports](/concepts/auto-imports)
+[Read more about auto imports](/guide/concepts/auto-imports)
 
 ## Migration
 
-1. If you have been using `@nuxt/components` in Nuxt 2, you can remove `components: true` in your `nuxt.config`. If you had a more complex setup, then note that the component options have changed somewhat. See the [components documentation](/docs/directory-structure/components) for more information.
+1. If you have been using `@nuxt/components` in Nuxt 2, you can remove `components: true` in your `nuxt.config`. If you had a more complex setup, then note that the component options have changed somewhat. See the [components documentation](/guide/directory-structure/components) for more information.
 
 ::alert{type=info}
 You can look at `.nuxt/types/components.d.ts` and `.nuxt/types/auto-imports.d.ts` to see how Nuxt has resolved your components and composable auto-imports.
diff --git a/docs/content/3.docs/3.migration/4.meta.md b/docs/content/migration/4.meta.md
similarity index 88%
rename from docs/content/3.docs/3.migration/4.meta.md
rename to docs/content/migration/4.meta.md
index a46b4bffbf..cd49aa187c 100644
--- a/docs/content/3.docs/3.migration/4.meta.md
+++ b/docs/content/migration/4.meta.md
@@ -1,10 +1,15 @@
+---
+head.title: 'Nuxt 2 to Nuxt 3: Meta Tags'
+head.titleTemplate: ''
+---
+
 # Meta Tags
 
 Nuxt 3 provides several different ways to manage your meta tags.
 
 1. Through your `nuxt.config`.
-1. Through the `useHead` [composable](/docs/usage/meta-tags#usehead-composable)
-1. Through [global meta components](/docs/usage/meta-tags#meta-components)
+2. Through the `useHead` [composable](/guide/features/head-management)
+3. Through [global meta components](/guide/features/head-management)
 
 You can customize `title`, `base`, `script`, `style`, `meta`, `link`, `htmlAttrs` and `bodyAttrs`.
 
@@ -12,7 +17,7 @@ You can customize `title`, `base`, `script`, `style`, `meta`, `link`, `htmlAttrs
 Nuxt currently uses [`vueuse/head`](https://github.com/vueuse/head) to manage your meta tags, but implementation details may change.
 ::
 
-[Read more about meta tags](/docs/usage/meta-tags).
+[Read more about meta tags](/guide/features/head-management).
 
 ## Migration
 
@@ -94,7 +99,7 @@ export default {
     </Head>
     <!-- -->
   </div>
-</template>  
+</template>
 ```
 
 ::
diff --git a/docs/content/3.docs/3.migration/5.plugins-and-middleware.md b/docs/content/migration/5.plugins-and-middleware.md
similarity index 87%
rename from docs/content/3.docs/3.migration/5.plugins-and-middleware.md
rename to docs/content/migration/5.plugins-and-middleware.md
index e848a16af7..b733ad1eb3 100644
--- a/docs/content/3.docs/3.migration/5.plugins-and-middleware.md
+++ b/docs/content/migration/5.plugins-and-middleware.md
@@ -1,8 +1,13 @@
+---
+head.title: 'Nuxt 2 to Nuxt 3: Plugins and Middleware'
+head.titleTemplate: ''
+---
+
 # Plugins and Middleware
 
 ## Plugins
 
-Plugins now have a different format, and take only one argument (`nuxtApp`). Read more in [the docs](/docs/directory-structure/plugins).
+Plugins now have a different format, and take only one argument (`nuxtApp`). Read more in [the docs](/guide/directory-structure/plugins).
 
 ::code-group
 
@@ -29,7 +34,7 @@ export default defineNuxtPlugin(nuxtApp => {
 ::
 
 ::alert{icon=👉}
-You can read more about the format of `nuxtApp` in [the docs](/docs/usage/nuxt-app).
+You can read more about the format of `nuxtApp` in [the docs](/api/composables/use-nuxt-app).
 ::
 
 ### Migration
@@ -65,7 +70,7 @@ export default defineNuxtRouteMiddleware((to, from) => {
 
 Much like Nuxt 2, route middleware placed in your `~/middleware` folder is automatically registered. You can then specify it by name in a component. However, this is done with `definePageMeta` rather than as a component option.
 
-`navigateTo` is one of a number of route helper functions, which you can read more about in [the documentation about route middleware](/docs/directory-structure/middleware).
+`navigateTo` is one of a number of route helper functions, which you can read more about in [the documentation about route middleware](/guide/directory-structure/middleware).
 
 ### Migration
 
diff --git a/docs/content/3.docs/3.migration/6.pages-and-layouts.md b/docs/content/migration/6.pages-and-layouts.md
similarity index 87%
rename from docs/content/3.docs/3.migration/6.pages-and-layouts.md
rename to docs/content/migration/6.pages-and-layouts.md
index aee31e2160..472625dc54 100644
--- a/docs/content/3.docs/3.migration/6.pages-and-layouts.md
+++ b/docs/content/migration/6.pages-and-layouts.md
@@ -1,3 +1,8 @@
+---
+head.title: 'Nuxt 2 to Nuxt 3: Pages and Layouts'
+head.titleTemplate: ''
+---
+
 # Pages and Layouts
 
 ## `app.vue`
@@ -6,17 +11,17 @@ Nuxt 3 provides a central entrypoint to your app via `~/app.vue`. If you don't h
 
 This file is a great place to put any custom code that needs to be run once when your app starts up, as well as any components that are present on every page of your app. For example, if you only have one layout, you can move this to `app.vue` instead.
 
-[Read more about `app.vue`](/docs/directory-structure/app).
+[Read more about `app.vue`](/guide/directory-structure/app).
 
 ### Migration
 
-1. Consider creating an `app.vue` file and including any logic that needs to run once at the top-level of your app. You can check out [an example here](/docs/directory-structure/app).
+1. Consider creating an `app.vue` file and including any logic that needs to run once at the top-level of your app. You can check out [an example here](/guide/directory-structure/app).
 
 ## Layouts
 
 If you are using layouts in your app for multiple pages, there is only a slight change required.
 
-In Nuxt 2, the `<Nuxt>` component is used within a layout to render the current page. In Nuxt 3, layouts use slots instead, so you will have to replace that component with a `<slot />`. This also allows advanced use cases with named and scoped slots. [Read more about layouts](/docs/directory-structure/layouts).
+In Nuxt 2, the `<Nuxt>` component is used within a layout to render the current page. In Nuxt 3, layouts use slots instead, so you will have to replace that component with a `<slot />`. This also allows advanced use cases with named and scoped slots. [Read more about layouts](/guide/directory-structure/layouts).
 
 You will also need to change how you define the layout used by a page using the `definePageMeta` compiler macro. Layouts will be kebab-cased. So `layouts/customLayout.vue` becomes `custom-layout` when referenced in your page.
 
@@ -24,7 +29,7 @@ You will also need to change how you define the layout used by a page using the
 
 1. Replace `<Nuxt />` with `<slot />`
 1. Use `definePageMeta` to select the layout used by your page.
-1. Move `~/layouts/_error.vue` to `~/error.vue`. See [the error handling docs](/docs/usage/error-handling).
+1. Move `~/layouts/_error.vue` to `~/error.vue`. See [the error handling docs](/guide/features/error-handling).
 
 ### Example: `~/layouts/custom.vue`
 
@@ -71,13 +76,13 @@ In Nuxt 2, you will have defined any nested routes (with parent and child compon
 
 If you were passing a custom page key or keep-alive props to `<Nuxt>`, you will now use `definePageMeta` to set these options.
 
-See [more about migrating Nuxt component hooks](/docs/migration/nuxt-hooks).
+See [more about migrating Nuxt component hooks](/migration/nuxt-hooks).
 
 ### Page and layout transitions
 
 If you have been defining transitions for your page or layout directly in your component options, you will now need to use `definePageMeta` to set the transition.
 
-[Read more about `pages/`](/docs/directory-structure/pages).
+[Read more about `pages/`](/guide/directory-structure/pages).
 
 ### Migration
 
@@ -169,6 +174,6 @@ definePageMeta({
 
 ## NuxtLink component
 
-Most of the syntax and functionality are the same for the global [NuxtLink](/docs/usage/nuxt-link#nuxtlink) component. If you have been using the shortcut `<NLink>` format, you should update this to use `<NuxtLink>`.
+Most of the syntax and functionality are the same for the global [NuxtLink](/api/components/nuxt-link) component. If you have been using the shortcut `<NLink>` format, you should update this to use `<NuxtLink>`.
 
-`<NuxtLink>` is now a drop-in replacement for _all_ links, even external ones. You can read more about it, and how to extend it to provide your own link component, [in the docs](/docs/usage/nuxt-link#nuxtlink).
+`<NuxtLink>` is now a drop-in replacement for _all_ links, even external ones. You can read more about it, and how to extend it to provide your own link component, [in the docs](/api/components/nuxt-link).
diff --git a/docs/content/3.docs/3.migration/7.component-options.md b/docs/content/migration/7.component-options.md
similarity index 82%
rename from docs/content/3.docs/3.migration/7.component-options.md
rename to docs/content/migration/7.component-options.md
index 698fe02065..b75857d06e 100644
--- a/docs/content/3.docs/3.migration/7.component-options.md
+++ b/docs/content/migration/7.component-options.md
@@ -1,8 +1,13 @@
+---
+head.title: 'Nuxt 2 to Nuxt 3: Component Options'
+head.titleTemplate: ''
+---
+
 # Component Options
 
 ## `asyncData` and `fetch` component options
 
-Nuxt 3 provides new options for [fetching data from an API](/docs/usage/data-fetching).
+Nuxt 3 provides new options for [fetching data from an API](/guide/features/data-fetching).
 
 <!-- TODO: Intro to <script setup> -->
 <!-- TODO: Mention about options compatibility with asyncData -->
@@ -13,11 +18,11 @@ In Nuxt 2 you might use `@nuxtjs/axios` or `@nuxt/http` to fetch your data - or
 
 In Nuxt 3 you can use a globally available `fetch` method that has the same API as [the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) or `$fetch` method which is using [unjs/ohmyfetch](https://github.com/unjs/ohmyfetch). It has a number of benefits, including:
 
-1. It will handle 'smartly' making [direct API calls](/concepts/server-engine#direct-api-calls) if it's running on the server, or making a client-side call to your API if it's running on the client. (It can also handle calling third-party APIs.)
+1. It will handle 'smartly' making [direct API calls](/guide/concepts/server-engine#direct-api-calls) if it's running on the server, or making a client-side call to your API if it's running on the client. (It can also handle calling third-party APIs.)
 
 2. Plus, it comes with convenience features including automatically parsing responses and stringifying data.
 
-You can read more [about direct API calls](/concepts/server-engine#direct-api-calls) or [fetching data](/docs/usage/data-fetching).
+You can read more [about direct API calls](/guide/concepts/server-engine#direct-api-calls) or [fetching data](/guide/features/data-fetching).
 
 ### Using composables
 
@@ -64,7 +69,7 @@ Despite the names, `useFetch` is not a direct replacement of the `fetch()` hook.
 
 ## `head`
 
-See [meta tag migration](/docs/migration/meta).
+See [meta tag migration](/migration/meta).
 
 ## `key`
 
@@ -92,7 +97,7 @@ You can now define a key within the `definePageMeta` compiler macro.
 
 ## `layout`
 
-See [layout migration](/docs/migration/pages-and-layouts).
+See [layout migration](/migration/pages-and-layouts).
 
 ## `loading`
 
@@ -100,15 +105,15 @@ This feature is not yet supported in Nuxt 3.
 
 ## `middleware`
 
-See [middleware migration](/docs/migration/plugins-and-middleware).
+See [middleware migration](/migration/plugins-and-middleware).
 
 ## `scrollToTop`
 
-This feature is not yet supported in Nuxt 3. If you want to overwrite the default scroll behavior of `vue-router`, you can do so in `~/app/router.options.ts` (see [docs](/docs/directory-structure/pages/#router-options)) for more info.
+This feature is not yet supported in Nuxt 3. If you want to overwrite the default scroll behavior of `vue-router`, you can do so in `~/app/router.options.ts` (see [docs](/guide/directory-structure/pages/#router-options)) for more info.
 
 ## `transition`
 
-See [layout migration](/docs/migration/pages-and-layouts).
+See [layout migration](/migration/pages-and-layouts).
 
 ## `validate`
 
diff --git a/docs/content/3.docs/3.migration/8.runtime-config.md b/docs/content/migration/8.runtime-config.md
similarity index 77%
rename from docs/content/3.docs/3.migration/8.runtime-config.md
rename to docs/content/migration/8.runtime-config.md
index 17999ff85e..68ae431cfc 100644
--- a/docs/content/3.docs/3.migration/8.runtime-config.md
+++ b/docs/content/migration/8.runtime-config.md
@@ -1,10 +1,15 @@
+---
+head.title: 'Nuxt 2 to Nuxt 3: Runtime Config'
+head.titleTemplate: ''
+---
+
 # Runtime Config
 
 If you wish to reference environment variables within your Nuxt 3 app, you will need to use runtime config.
 
-When referencing these variables within your components, you will have to use the `useRuntimeConfig` composable in your setup method (or Nuxt plugin). In the Nitro portion of your app, you can import directly from `#config`.
+When referencing these variables within your components, you will have to use the `useRuntimeConfig` composable in your setup method (or Nuxt plugin). In the `server/` portion of your app, you can import directly from `#config`.
 
-[Read more about runtime config](/docs/usage/runtime-config).
+[Read more about runtime config](/guide/features/runtime-config).
 
 ## Migration
 
@@ -30,13 +35,13 @@ export default defineNuxtConfig({
 
 ```vue [pages/index.vue]
 <script setup>
-  const config = useRuntimeConfig();
+  const config = useRuntimeConfig()
   // instead of process.env.BASE_URL you will now access config.BASE_URL
 </script>
 ```
 
 ```ts [server/api/hello.ts]
-import config from '#config';
+import config from '#config'
 
 export default (req, res) => {
   // you can now access config.BASE_URL
diff --git a/docs/content/migration/index.md b/docs/content/migration/index.md
new file mode 100644
index 0000000000..2a7663145d
--- /dev/null
+++ b/docs/content/migration/index.md
@@ -0,0 +1,6 @@
+---
+navigation.exclusive: true
+navigation.redirect: /migration/overview
+layout.aside: true
+layout.asideClass: ''
+---
diff --git a/docs/package.json b/docs/package.json
index b2e2790687..138f6cadd9 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -5,6 +5,8 @@
     "dev": "yarn gendocs && nuxt dev",
     "build": "yarn gendocs && nuxt generate --force-build",
     "build:ci": "./scripts/make-schema.sh && yarn build",
+    "lint:docs": "cd .. && yarn lint:docs",
+    "lint:docs:fix": "cd .. && yarn lint:docs:fix",
     "gendocs": "jiti ./scripts/gen-docs.ts"
   },
   "devDependencies": {
diff --git a/docs/scripts/gen-docs.ts b/docs/scripts/gen-docs.ts
index 5bc874b021..32928339df 100644
--- a/docs/scripts/gen-docs.ts
+++ b/docs/scripts/gen-docs.ts
@@ -1,4 +1,5 @@
-import { readFile, writeFile } from 'fs/promises'
+import { readFile, writeFile, mkdir } from 'fs/promises'
+import { dirname } from 'path'
 import type { Schema } from 'untyped'
 import { resolve } from 'pathe'
 import { upperFirst } from 'scule'
@@ -6,7 +7,7 @@ import { upperFirst } from 'scule'
 export async function main () {
   const rootDir = resolve(__dirname, '..')
   const configTemplate = resolve(__dirname, 'nuxt.config.md')
-  const configFile = resolve(rootDir, 'content/3.docs/2.directory-structure/16.nuxt.config.md')
+  const configFile = resolve(rootDir, 'content/3.api/6.configuration/nuxt.config.md')
   await generateDocs({ configFile, configTemplate })
 }
 
@@ -38,11 +39,15 @@ function generateMarkdown (schema: Schema, title: string, level: string, parentV
       lines.push(`- **Type**: \`${schema.type}\``)
     }
     const defaultValue = formatValue(schema.default)
-    if (defaultValue) {
-      lines.push('- **Default**', ...defaultValue)
+    if (defaultValue && defaultValue.length) {
+      if (defaultValue.length === 1) {
+        lines.push(`- **Default:** ${defaultValue[0]}`)
+      } else {
+        lines.push('- **Default**', ...defaultValue)
+      }
     }
 
-    lines.push(`- **Version**: ${versions.join(', ')}`)
+    // lines.push(`- **Version**: ${versions.join(', ')}`)
 
     lines.push('')
   }
@@ -92,8 +97,12 @@ const InternalTypes = new Set([
 
 function formatValue (val) {
   const stringified = JSON.stringify(val, null, 2)
-  if (stringified === '{}' || stringified === '[]') { return null }
-  return ['```json', stringified, '```']
+  if (!stringified || stringified === '{}' || stringified === '[]') { return null }
+  if (stringified.includes('\n')) {
+    return ['```json', stringified, '```']
+  } else {
+    return ['`' + stringified + '`']
+  }
 }
 
 function renderTag (tag: string) {
@@ -141,6 +150,7 @@ async function generateDocs ({ configFile, configTemplate }) {
   }
 
   const body = template.replace(GENERATE_KEY, generatedDocs)
+  await mkdir(dirname(configFile), { recursive: true })
   await writeFile(configFile, body)
 
   console.log(`Generate done in ${(Date.now() - start) / 1000} seconds!`)
diff --git a/docs/scripts/nuxt.config.md b/docs/scripts/nuxt.config.md
index be8a41c528..119ccae5f4 100644
--- a/docs/scripts/nuxt.config.md
+++ b/docs/scripts/nuxt.config.md
@@ -1,21 +1,17 @@
 ---
-icon: IconFile
-title: nuxt.config.ts
-head.title: Nuxt configuration file
+title: Nuxt Config
+head.title: Nuxt configuration reference
 ---
 
-# Nuxt configuration file
+# Nuxt configuration reference
 
-Nuxt can be easily configured with a single `nuxt.config` file, which can have either a `.js`, `.ts` or `.mjs` extension.
+::AutoGenerated
+::
 
-```ts
-import { defineNuxtConfig } from 'nuxt3'
-
-export default defineNuxtConfig({
-  // My Nuxt config
-})
-```
-
-Learn more about all the different config properties
+::ReadMore{link="/guide/directory-structure/nuxt.config"}
+::
 
 <!-- GENERATED_CONFIG_DOCS -->
+
+::AutoGenerated
+::
diff --git a/docs/static/_redirects b/docs/static/_redirects
new file mode 100644
index 0000000000..3045606daf
--- /dev/null
+++ b/docs/static/_redirects
@@ -0,0 +1,33 @@
+# Getting started
+/getting-started/introduction     /getting-started/quick-start 302!
+/getting-started/installation     /getting-started/quick-start 302!
+/getting-started/commands         /api/commands/add 302!
+/getting-started/bridge           /bridge 302!
+# Concepts
+/concepts/introduction            /guide/concepts/introduction 302!
+/concepts/vuejs-development       /guide/concepts/vuejs-development 302!
+/concepts/rendering               /guide/concepts/rendering 302!
+/concepts/auto-imports            /guide/concepts/auto-imports 302!
+/concepts/server-engine           /guide/concepts/server-engine 302!
+/concepts/typescript              /guide/concepts/typescript 302!
+/concepts/esm                     /guide/going-further/esm 302!
+# Docs
+/docs/usage/data-fetching         /guide/features/data-fetching 302!
+/docs/usage/state                 /guide/features/state-management 302!
+/docs/usage/meta-tags             /guide/features/head-management 302!
+/docs/usage/nuxt-app              /guide/going-further/nuxt-app 302!
+/docs/usage/runtime-config        /guide/going-further/runtime-config 302!
+/docs/usage/cookies               /api/composables/use-cookie 302!
+/docs/usage/ssr                   /api/composables/use-request-headers 302!
+/docs/usage/cli                   /api/commands/add 302!
+/docs/usage/error-handling        /guide/features/error-handling 302!
+/docs/usage/nuxt-link             /api/components/nuxt-link 302!
+/docs/usage/teleports             /guide/features/teleports 302!
+/docs/directory-structure/*       /guide/directory-structure/:splat 302!
+/docs/deployment/*                /guide/deployment/:splat 302!
+/docs/advanced/testing            /guide/going-further/testing 302!
+/docs/advanced/nuxt               /guide/going-further/internals 302!
+/docs/advanced/modules            /guide/going-further/modules 302!
+/docs/advanced/kit                /guide/going-further/kit 302!
+/docs/advanced/hooks              /guide/going-further/hooks 302!
+/docs/migration/*                 /migration/:splat 302!
diff --git a/examples/advanced/test/app.vue b/examples/advanced/testing/app.vue
similarity index 100%
rename from examples/advanced/test/app.vue
rename to examples/advanced/testing/app.vue
diff --git a/examples/advanced/test/nuxt.config.ts b/examples/advanced/testing/nuxt.config.ts
similarity index 100%
rename from examples/advanced/test/nuxt.config.ts
rename to examples/advanced/testing/nuxt.config.ts
diff --git a/examples/advanced/test/package.json b/examples/advanced/testing/package.json
similarity index 85%
rename from examples/advanced/test/package.json
rename to examples/advanced/testing/package.json
index 50a91c5b67..42bac9855c 100644
--- a/examples/advanced/test/package.json
+++ b/examples/advanced/testing/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "example-test",
+  "name": "example-testing",
   "private": true,
   "scripts": {
     "build": "nuxi build",
diff --git a/examples/advanced/test/tests/basic.test.ts b/examples/advanced/testing/tests/basic.test.ts
similarity index 100%
rename from examples/advanced/test/tests/basic.test.ts
rename to examples/advanced/testing/tests/basic.test.ts
diff --git a/examples/advanced/test/tsconfig.json b/examples/advanced/testing/tsconfig.json
similarity index 100%
rename from examples/advanced/test/tsconfig.json
rename to examples/advanced/testing/tsconfig.json
diff --git a/package.json b/package.json
index b495a4cbc3..504cb43267 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,8 @@
     "example": "yarn workspace example-$0 dev",
     "example:build": "yarn workspace example-$0 build",
     "lint": "eslint --ext .vue,.ts,.js,.mjs .",
-    "lint:docs": "./node_modules/.bin/markdownlint ./ && case-police '**/*.md'",
+    "lint:docs": "markdownlint ./docs/content && case-police 'docs/content**/*.md'",
+    "lint:docs:fix": "markdownlint ./docs/content --fix && case-police 'docs/content**/*.md' --fix",
     "nuxi": "./node_modules/.bin/nuxi",
     "nuxt": "./node_modules/.bin/nuxi",
     "play": "echo use yarn dev && exit 1",
diff --git a/yarn.lock b/yarn.lock
index 577c2be6fe..6b84dc58d6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10851,9 +10851,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"example-test@workspace:examples/advanced/test":
+"example-testing@workspace:examples/advanced/testing":
   version: 0.0.0-use.local
-  resolution: "example-test@workspace:examples/advanced/test"
+  resolution: "example-testing@workspace:examples/advanced/testing"
   dependencies:
     nuxt3: latest
   languageName: unknown