diff --git a/.github/workflows/docs-e2e.yml b/.github/workflows/docs-e2e.yml
new file mode 100644
index 000000000000..b6a329e214df
--- /dev/null
+++ b/.github/workflows/docs-e2e.yml
@@ -0,0 +1,32 @@
+name: docs-e2e
+
+on:
+ workflow_dispatch:
+ inputs:
+ url:
+ required: false
+ description: The URL to run the test suite against.
+ type: string
+ deployment_status:
+
+jobs:
+ crawl-docs:
+ environment:
+ name: ${{ github.event.deployment.environment || 'Production' }}
+ url: ${{ github.event.inputs.url || github.event.deployment.payload.web_url || github.event.deployment_status.target_url }}
+ if: github.event.deployment_status.state == 'success' || github.event_name == 'workflow_dispatch'
+ runs-on: ubuntu-latest
+
+ steps:
+ - uses: actions/checkout@v3
+ - uses: actions/setup-node@v3
+ with:
+ node-version: ${{ matrix.node }}
+ cache: "yarn"
+
+ - name: Install dependencies
+ run: yarn --immutable
+
+ - run: node ./scripts/crawl.mjs
+ env:
+ BASE_URL: ${{ github.event.inputs.url || github.event.deployment.payload.web_url || github.event.deployment_status.target_url }}
diff --git a/docs/.gitignore b/docs/.gitignore
index b4a500fb84f4..988de6ce14af 100644
--- a/docs/.gitignore
+++ b/docs/.gitignore
@@ -1,2 +1,3 @@
schema
**/*.configuration/nuxt.config.md
+**/*.configuration/nuxt-config.md
diff --git a/docs/content/2.guide/1.concepts/1.introduction.md b/docs/content/1.getting-started/1.introduction.md
similarity index 99%
rename from docs/content/2.guide/1.concepts/1.introduction.md
rename to docs/content/1.getting-started/1.introduction.md
index a5b82621ade7..69fd45cb70ff 100644
--- a/docs/content/2.guide/1.concepts/1.introduction.md
+++ b/docs/content/1.getting-started/1.introduction.md
@@ -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 to the [Installation section](/getting-started/quick-start).
+Ready to try? Head over to the [Installation section](/getting-started/installation).
::
### Are You *Courageously* Nuxt?
diff --git a/docs/content/1.getting-started/10.deployment.md b/docs/content/1.getting-started/10.deployment.md
new file mode 100644
index 000000000000..6ef4a6a4a87b
--- /dev/null
+++ b/docs/content/1.getting-started/10.deployment.md
@@ -0,0 +1,145 @@
+# Deployment
+
+A Nuxt application can be deployed on a Node.js server, pre-rendered for static hosting, or deployed to serverless or edge (CDN) environments.
+
+::alert{type=info}
+If you are looking for a list of cloud providers that support Nuxt 3, see the [list below](#supported-hosting-providers).
+::
+
+## Node.js Server
+
+Discover the Node.js server preset with Nitro to deploy on any Node hosting.
+
+::list
+
+- **Default output format** if none is specified or auto-detected
+- Loads only the required chunks to render the request for optimal cold start timing
+- Useful for deploying Nuxt apps to any Node.js hosting
+::
+
+### Entry Point
+
+When running `nuxt build` with the Node server preset, the result will be an entry point that launches a ready-to-run Node server.
+
+```bash
+node .output/server/index.mjs
+```
+
+### Example
+
+```bash
+$ node .output/server/index.mjs
+Listening on http://localhost:3000
+```
+
+### Configuring Defaults at Runtime
+
+This preset will respect the following runtime environment variables:
+
+- `NITRO_PORT` or `PORT` (defaults to `3000`)
+- `NITRO_HOST` or `HOST` (defaults to `'0.0.0.0'`)
+- `NITRO_SSL_CERT` and `NITRO_SSL_KEY` - if both are present, this will launch the server in HTTPS mode. In the vast majority of cases, this should not be used other than for testing, and the Nitro server should be run behind a reverse proxy like nginx or Cloudflare which terminates SSL.
+
+#### Using PM2
+
+To use `pm2`, use an `ecosystem.config.js`:
+
+```js [ecosystem.config.js]
+module.exports = {
+ apps: [
+ {
+ name: 'NuxtAppName',
+ exec_mode: 'cluster',
+ instances: 'max',
+ script: './.output/server/index.mjs'
+ }
+ ]
+}
+```
+
+#### Using Cluster Mode
+
+You can use `NITRO_PRESET=node_cluster` in order to leverage multi-process performance using Node.js [cluster](https://nodejs.org/dist/latest/docs/api/cluster.html) module.
+
+By default, the workload gets distributed to the workers with the round robin strategy.
+
+### Learn More
+
+:ReadMore{link="https://nitro.unjs.io/deploy/node" title="the Nitro documentation for node-server preset"}
+
+## Static Hosting
+
+There are two ways to deploy a Nuxt application to any static hosting services:
+
+- Static site generation (SSG) pre-renders routes of your application at build time.
+- Using `ssr: false` to produce a pure client-side output.
+
+### Crawl-based Pre-rendering
+
+Use the [`nuxi generate` command](/api/commands/generate) to build your application. For every page, Nuxt uses a crawler to generate a corresponding HTML and payload files. The built files will be generated in the `.output/public` directory.
+
+```bash
+npx nuxi generate
+```
+
+### Manual Pre-rendering
+
+You can manually specify routes that [Nitro](/guide/concepts/server-engine) will fetch and pre-render during the build.
+
+```ts [nuxt.config.ts|js]
+defineNuxtConfig({
+ nitro: {
+ prerender: {
+ routes: ['/user/1', '/user/2']
+ }
+ }
+})
+```
+
+### Client-side Only Rendering
+
+If you don't want to pre-render your routes, another way of using static hosting is to set the `ssr` property to `false` in the `nuxt.config` file. The `nuxi generate` command will then output an `.output/public/index.html` entrypoint and JavaScript bundles like a classic client-side Vue.js application.
+
+```ts [nuxt.config.ts|js]
+defineNuxtConfig({
+ ssr: false
+})
+```
+
+## Presets
+
+In addition to Node.js servers and static hosting services, a Nuxt 3 project can be deployed with several well-tested presets and minimal amount of configuration.
+
+You can explicitly set the desired preset in the [`nuxt.config`](/guide/directory-structure/nuxt.config) file:
+
+```js [nuxt.config.js|ts]
+export default {
+ nitro: {
+ preset: 'node-server'
+ }
+}
+```
+
+... or use the `NITRO_PRESET` environment variable when running `nuxt build`:
+
+```bash
+NITRO_PRESET=node-server nuxt build
+```
+
+π Check [the Nitro deployment](https://nitro.unjs.io/deploy) for all possible deployment presets and providers.
+
+### Supported Hosting Providers
+
+Nuxt 3 can be deployed to several cloud providers with a minimal amount of configuration:
+
+- :IconCloud{class="h-5 w-4 inline mb-2"} [AWS](https://nitro.unjs.io/deploy/providers/aws)
+- :LogoAzure{class="h-5 w-4 inline mb-2"} [Azure](https://nitro.unjs.io/deploy/providers/azure)
+- :LogoCloudFlare{class="h-5 w-4 inline mb-2"} [CloudFlare](https://nitro.unjs.io/deploy/providers/cloudflare)
+- :IconCloud{class="h-5 w-4 inline mb-2"} [Digital Ocean](https://nitro.unjs.io/deploy/providers/digitalocean)
+- :LogoFirebase{class="h-5 w-4 inline mb-2"} [Firebase](https://nitro.unjs.io/deploy/providers/firebase)
+- :IconCloud{class="h-5 w-4 inline mb-2"} [heroku](https://nitro.unjs.io/deploy/providers/heroku)
+- :IconCloud{class="h-5 w-4 inline mb-2"} [layer0](https://nitro.unjs.io/deploy/providers/layer0)
+- :LogoNetlify{class="h-5 w-4 inline mb-2"} [Netlify](https://nitro.unjs.io/deploy/providers/netlify)
+- :IconCloud{class="h-5 w-4 inline mb-2"} [Render](https://nitro.unjs.io/deploy/providers/render)
+- :IconCloud{class="h-5 w-4 inline mb-2"} [Stormkit](https://nitro.unjs.io/deploy/providers/stormkit)
+- :LogoVercel{class="h-5 w-4 inline mb-2"} [Vercel](https://nitro.unjs.io/deploy/providers/vercel)
diff --git a/docs/content/1.getting-started/10.upgrade.md b/docs/content/1.getting-started/10.upgrade.md
new file mode 100644
index 000000000000..37d5dd875ec7
--- /dev/null
+++ b/docs/content/1.getting-started/10.upgrade.md
@@ -0,0 +1,59 @@
+# Upgrade Guide
+
+Have a Nuxt 2 project to migrate? Use these guides to upgrade your Nuxt applications to Nuxt 3 or take the first step in that direction with Nuxt Bridge.
+
+If you are already using Nuxt 3 and want to upgrade to the latest release or test new features before their release, head over to the [Upgrading Nuxt 3](#upgrading-nuxt-3) section.
+
+## Feature 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 | Release candidate
+Performance | π Fast | βοΈ Faster | π Fastest
+Nitro Engine | β | β | β
+ESM support | π Partial | π Better | β
+TypeScript | βοΈ Opt-in | π§ Partial | β
+Composition API | β | π§ Partial | β
+Options API | β | β | β
+Components Auto Import | β | β | β
+`
+```
+
+:ReadMore{link="/guide/going-further/runtime-config"}
+
+## App Configuration
+
+The `app.config.ts` file, also located at the root of a Nuxt project, is used to expose public variables that can be determined at build time. Contrary to the `runtimeConfig` option, these can not be overriden using environment variables.
+
+A minimal configuration file exports the `defineAppConfig` function containing an object with your configuration. The `defineAppConfig` helper is globally available without import.
+
+```ts [app.config.ts]
+export default defineAppConfig({
+ title: 'Hello Nuxt',
+ theme: {
+ dark: true,
+ colors: {
+ primary: '#ff0000'
+ }
+ }
+})
+```
+
+These variables are exposed to the rest of your application using the [`useAppConfig`](/api/composables/use-app-config) composable.
+
+```vue [pages/index.vue]
+
+```
+
+:ReadMore{link="/guide/directory-structure/app.config"}
+
+## `runtimeConfig` vs `app.config`
+
+As stated above, `runtimeConfig` and `app.config` are both used to expose variables to the rest of your application. To determine whether you should use one or the other, here are some guidelines:
+
+- `runtimeConfig`: Private or public tokens that need to be specified after build using environment variables.
+- `app.config` : Public tokens that are determined at build time, website configuration such as theme variant, title and any project config that are not sensitive.
+
+Feature | `runtimeConfig` | `app.config`
+-------------------------------|------------------|-------------------
+Client Side | Hydrated | Bundled
+Environment Variables | β Yes | β No
+Reactive | β Yes | β Yes
+Types support | β Partial | β Yes
+Configuration per Request | β No | β Yes
+Hot Module Replacement | β No | β Yes
+Non primitive JS types | β No | β Yes
diff --git a/docs/content/1.getting-started/3.views.md b/docs/content/1.getting-started/3.views.md
new file mode 100644
index 000000000000..ad1f82f7e9af
--- /dev/null
+++ b/docs/content/1.getting-started/3.views.md
@@ -0,0 +1,130 @@
+# Views
+
+Nuxt provides several component layers to implement the user interface of your application.
+
+## `app.vue`
+
+![The `app.vue` file is the entry point of your application](/img/getting-started/views/app.svg)
+
+By default, Nuxt will treat this file as the **entrypoint** and render its content for every route of the application.
+
+```vue [app.vue]
+
+
+
Welcome to the homepage
+
+
+```
+
+::alert
+If you are familiar with Vue, you might wonder where `main.js` is (the file is that normally creates a Vue app). Nuxt does this behind the scene.
+::
+
+## Components
+
+![Components are reusable pieces of UI](/img/getting-started/views/components.svg)
+
+Most components are reusable pieces of the user interface, like buttons and menus. In Nuxt, you can create these components in the `components/` directory, and they will be automatically available across your application without having to explicitly import them.
+
+::code-group
+
+```vue [App.vue]
+
+
+
Welcome to the homepage
+
+ This is an auto-imported component.
+
+
+
+```
+
+```vue [components/AppAlert.vue]
+
+
+
+
+
+```
+
+::
+
+## Pages
+
+![Pages are views tied to a specific route](/img/getting-started/views/pages.svg)
+
+Pages represent views use for each specific route pattern. Every file in the `pages/` directory represents a different route displaying its content.
+
+To use pages, create `pages/index.vue` file and add `` component to the `app.vue` (or remove `app.vue` for default entry). You can now create more pages and their corresponding routes by adding new files in the `pages/` directory.
+
+::code-group
+
+```vue [pages/index.vue]
+
+
+
Welcome to the homepage
+
+ This is an auto-imported component
+
+
+
+```
+
+```vue [pages/about.vue]
+
+
+
This page will be displayed at the /about route.
+
+
+```
+
+::
+
+::alert
+You will learn more about pages in the [Routing section](/getting-started/routing)
+::
+
+## Layouts
+
+![Layouts are wrapper around pages](/img/getting-started/views/layouts.svg)
+
+Layouts are wrappers around pages that contain a common User Interface for several pages, such as a header and footer display. Layouts are Vue files using `` components to display the **page** content. The `layouts/default.vue` file will be used by default. Custom layouts can be set as part of your page metadata.
+
+::alert
+If you only have a single layout in your application, we recommend using app.vue with the [`` component](/api/components/nuxt-page) instead.
+::
+
+::code-group
+
+```vue [layouts/default.vue]
+
+