Merge branch 'main' into feat/nuxt-ssr-runtime-template-compiler

.eslintrc

@@ -25,7 +25,8 @@
     "jsdoc/require-param-type": "off",
     "no-redeclare": "off",
     "import/order": [
-      "error", {
+      "error",
+      {
         "pathGroups": [
           {
             "pattern": "@nuxt/test-utils",
@@ -73,6 +74,7 @@
   },
   "settings": {
     "jsdoc": {
+      "ignoreInternal": true,
       "tagNamePreference": {
         "warning": "warning",
         "note": "note"

.github/workflows/ci.yml

@@ -45,19 +45,48 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
+      - name: Build (stub)
+        run: pnpm build:stub
+
+      - name: Typecheck
+        run: pnpm typecheck
+
       - name: Build
         run: pnpm build
 
-      - name: Test (types)
-        run: pnpm test:types
-
       - name: Cache dist
         uses: actions/upload-artifact@v3
         with:
           retention-days: 3
           name: dist
           path: packages/*/dist
 
+  typecheck:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    needs:
+      - build
+
+    steps:
+      - uses: actions/checkout@v3
+      - run: corepack enable
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Restore dist cache
+        uses: actions/download-artifact@v3
+        with:
+          name: dist
+          path: packages
+
+      - name: Test (types)
+        run: pnpm test:types
+
   lint:
     runs-on: ubuntu-latest
     timeout-minutes: 10
@@ -78,6 +107,8 @@ jobs:
 
   test-fixtures:
     runs-on: ${{ matrix.os }}
+    needs:
+      - build
 
     strategy:
       fail-fast: false
@@ -130,14 +161,11 @@ jobs:
         # does not need to explicitly set chromium after https://github.com/microsoft/playwright/issues/14862 is solved
         run: pnpm playwright install chromium
 
-      - name: Build (stub)
-        run: pnpm build:stub
-
-      - name: Typecheck
-        run: pnpm typecheck
-        env:
-          TEST_ENV: ${{ matrix.env }}
-          TEST_BUILDER: ${{ matrix.builder }}
+      - name: Restore dist cache
+        uses: actions/download-artifact@v3
+        with:
+          name: dist
+          path: packages
 
       - name: Test (unit)
         run: pnpm test:unit

.github/workflows/docs-e2e.yml

@@ -22,7 +22,6 @@ jobs:
       - run: corepack enable
       - uses: actions/setup-node@v3
         with:
-          node-version: ${{ matrix.node }}
           cache: "pnpm"
 
       - name: Install dependencies

.github/workflows/docs.yml

@@ -16,19 +16,14 @@ on:
 
 jobs:
   lint-docs:
-    runs-on: ${{ matrix.os }}
-
-    strategy:
-      matrix:
-        os: [ubuntu-latest]
-        node: [14]
+    runs-on: ubuntu-latest
 
     steps:
       - uses: actions/checkout@v3
       - run: corepack enable
       - uses: actions/setup-node@v3
         with:
-          node-version: ${{ matrix.node }}
+          node-version: 18
           cache: "pnpm"
 
       - name: Install dependencies

.github/workflows/introspect.yml

@@ -0,0 +1,25 @@
+name: Docs
+
+on:
+  push:
+    paths:
+      - ".github/workflows/**"
+    branches:
+      - main
+  pull_request:
+    paths:
+      - ".github/workflows/**"
+    branches:
+      - main
+
+jobs:
+  lint-workflows:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      # From https://github.com/rhysd/actionlint/blob/main/docs/usage.md#use-actionlint-on-github-actions
+      - name: Check workflow files
+        run: |
+          bash <(curl https://raw.githubusercontent.com/rhysd/actionlint/main/scripts/download-actionlint.bash)
+          ./actionlint -color -shellcheck=""

docs/0.index.md

@@ -1,15 +1,16 @@
 ---
 title: Documentation
 navigation: false
-description: Learn everything you need to know, from beginner to master.
+description: Learn everything you need to know about Nuxt, from beginner to master.
 ---
+
 <!-- markdownlint-disable -->
 <!-- @case-police-disable -->
 ::docs-hero
 #title
 Nuxt Docs
 #description
-Nuxt is an open-source framework under MIT license for building modern and performant web applications that can be deployed on any platform running JavaScript.
+Nuxt is a free and [open-source framework](https://github.com/nuxt/nuxt) with an intuitive and extendable way to create type-safe, performant and production-grade full-stack web applications and websites with [Vue.js](https://vuejs.org).
 ::
 
 ::card-item{ .mt-4 }

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

@@ -1,138 +1,51 @@
 ---
 navigation.icon: uil:info-circle
-description: Nuxt's goal is to make web development intuitive and performant with a great DX in mind.
+description: Nuxt's goal is to make web development intuitive and performant with a great Developer Experience in mind.
 ---
-<!-- markdownlint-disable -->
-<!-- @case-police-disable -->
-::docs-hero
----
-image:
-  path: '/assets/docs/getting-started/views/hero'
-  width: '129'
-  height: '143'
-  format: 'png'
----
-#title
-Introduction
-#description
-Nuxt provides both frontend and backend functionality so you can focus on what matters: Creating your web application.
-::
-
-## What is Nuxt?
-
-To understand what Nuxt is, we need to understand what we need in order to create a modern application:
-::card-list
----
-cardListClass: 'grid grid-cols-1 gap-y-2'
----
-  ::card-item
-  ---
-  gradientBorder: false
-  contentClass: 'gap-y-2'
-  bodyClass: 'p-4'
-  roundedClass: 'rounded-sm'
-  titleClass: 'text-base font-semibold u-text-gray-900'
-  ---
-  #title
-  JavaScript framework
-  #description
-  A JavaScript framework to bring reactivity and web components, we chose Vue.js.
-  ::
-
-  ::card-item
-  ---
-  gradientBorder: false
-  contentClass: 'gap-y-2'
-  bodyClass: 'p-4'
-  roundedClass: 'rounded-sm'
-  titleClass: 'text-base font-semibold u-text-gray-900'
-  ---
-  #title
-  Webpack and Vite
-  #description
-  A bundler to support hot module replacement in development and bundle your code for production, we support both [webpack 5](https://webpack.js.org/) and [Vite](https://vitejs.dev/).
-  ::
-
-  ::card-item
-  ---
-  gradientBorder: false
-  contentClass: 'gap-y-2'
-  bodyClass: 'p-4'
-  roundedClass: 'rounded-sm'
-  titleClass: 'text-base font-semibold u-text-gray-900'
-  ---
-  #title
-  Latest JavaScript syntax
-  #description
-  A transpiler to write the latest JavaScript syntax while supporting legacy browsers, we use [esbuild](https://esbuild.github.io) for that.
-  ::
 
-  ::card-item
-  ---
-  gradientBorder: false
-  contentClass: 'gap-y-2'
-  bodyClass: 'p-4'
-  roundedClass: 'rounded-sm'
-  titleClass: 'text-base font-semibold u-text-gray-900'
-  ---
-  #title
-  Server side
-  #description
-  A server for serving your application in development, but also to support [server-side rendering](https://vuejs.org/api/ssr.html#server-side-rendering-api) or API routes, Nuxt uses [h3](https://github.com/unjs/h3) for deployment versatility such as serverless, workers, Node.js and unmatched performance.
-  ::
+# Introduction
 
-  ::card-item
-  ---
-  gradientBorder: false
-  contentClass: 'gap-y-2'
-  bodyClass: 'p-4'
-  roundedClass: 'rounded-sm'
-  titleClass: 'text-base font-semibold u-text-gray-900'
-  ---
-  #title
-  Routing library
-  #description
-  A routing library to handle client-side navigation, we chose [vue-router](https://router.vuejs.org/).
-  ::
-::
-
-This is only the tip of the iceberg, imagine having to set up all of this for your project, make it work, and then, maintain it over time. We have been doing this since October 2016, tuning all the configurations to provide the best optimization and performance for any Vue application.
+Nuxt is a free and [open-source framework](https://github.com/nuxt/nuxt) with an intuitive and extendable way to create type-safe, performant and production-grade full-stack web applications and websites with [Vue.js](https://vuejs.org).
 
-Nuxt takes care of this and provides both frontend and backend functionality so you can focus on what matters: **creating your web application**.
+We made everything so you can start writing `.vue` files from the beginning while enjoying hot module replacement in development and a performant application in production with server-side rendering by default.
 
-### View engine
+Nuxt has no vendor lock-in, allowing you to deploy your application [**anywhere, even to the edge**](/docs/getting-started/deployment).
 
-Nuxt uses Vue.js as a view engine. All Vue 3 capabilities are available in Nuxt. You can read about the details of the Vue integration with Nuxt in the [Key Concepts section](/docs/guide/concepts/vuejs-development).
-
-### Automation and conventions
+## Automation and Conventions
 
 Nuxt uses conventions and an opinionated directory structure to automate repetitive tasks and allow developers to focus on pushing features. The configuration file can still customize and override its default behaviors.
 
 ::list{type=success}
-- Auto-imports
-- File-system routing and API layer
-- Data-fetching utilities
-- Zero-config TypeScript support
-- Configured build tools
+- **File-based routing:** define routes based on the structure of your [`pages/` directory](/docs/guide/directory-structure/pages). This can make it easier to organize your application and avoid the need for manual route configuration.
+- **Code splitting:** Nuxt automatically splits your code into smaller chunks, which can help reduce the initial load time of your application.
+- **Server-side rendering out of the box:** Nuxt comes with built-in SSR capabilities, so you don't have to set up a separate server yourself.
+- **Auto-imports:** write Vue composables and components in their respectives directories and use them without having to import them with the benefits of tree-shaking and optimised JS bundles.
+- **Data-fetching utilities:** Nuxt provides composables to handle SSR-compatible data fetching as well as different strategies.
+- **Zero-config TypeScript support:** write type-safe code without having to learn TypeScript with our auto-generated types and `tsconfig.json`
+- **Configured build tools:** we use [Vite](https://vitejs.dev) by default to support hot module replacement (HMR) in development and bundling your code for production with best-practices baked-in.
 ::
 
-::alert{type="info"}
-Discover more in the [Key concepts section](/docs/guide/concepts/auto-imports).
-::
+Nuxt takes care of these and provides both frontend and backend functionality so you can focus on what matters: **creating your web application**.
 
-### Rendering modes
+## Server-Side Rendering
 
-Nuxt offers different rendering modes to accommodate various use-cases:
+Nuxt comes with built-in server-side rendering (SSR) capabilities by default, without having to configure a server yourself, which has many benefits for web applications:
 
 ::list{type=success}
-- Universal rendering (Server-side rendering and hydration)
-- Client-side only rendering
-- Full Static site generation
-- Hybrid rendering (per-routes caching strategy)
+- **Faster initial page load time:** Nuxt sends a fully rendered HTML page to the browser, which can be displayed immediately. This can provide a faster perceived page load time and a better user experience (UX), especially on slower networks or devices.
+- **Improved SEO:** search engines can better index SSR pages because the HTML content is available immediately, rather than requiring JavaScript to render the content on the client-side.
+- **Better performance on low-powered devices:** it reduces the amount of JavaScript that needs to be downloaded and executed on the client-side, which can be beneficial for low-powered devices that may struggle with processing heavy JavaScript applications.
+- **Better accessibility:** the content is immediately available on the initial page load, improving accessibility for users who rely on screen readers or other assistive technologies.
+- **Easier caching:** pages can be cached on the server-side, which can further improve performance by reducing the amount of time it takes to generate and send the content to the client.
 ::
 
+Overall, server-side rendering can provide a faster and more efficient user experience, as well as improve search engine optimization and accessibility.
+
+As Nuxt is a versatile framework, it gives you the possibility to statically render your whole application to a static hosting with `nuxt generate`,
+disable SSR globally with the `ssr: false` option or leverage hybrid rendering by setting up the `routeRules` option.
+
 ::alert{type="info"}
-Read more about [Nuxt rendering modes](/docs/guide/concepts/rendering).
+Read more about the [Nuxt rendering modes](/docs/guide/concepts/rendering).
 ::
 
 ### Server engine

docs/1.getting-started/11.testing.md

@@ -8,7 +8,7 @@ How to test your Nuxt application.
 
 ::alert{icon=👉}
 Test utils are still in development and the API and behavior may change. Currently, it is in preview stage but not yet ready for testing production apps.
-If you are a module author, you can find more specific informations in the [Module Author's guide](/docs/guide/going-further/modules#testing)
+If you are a module author, you can find more specific information in the [Module Author's guide](/docs/guide/going-further/modules#testing)
 ::
 
 In Nuxt 3, we have a rewritten version of `@nuxt/test-utils`. We support [Vitest](https://github.com/vitest-dev/vitest) and [Jest](https://jestjs.io/) as test runners.
@@ -93,7 +93,7 @@ Whether to run a separate build step.
 
 #### `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](/docs/guide/going-further/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](/docs/getting-started/testing).)
 
 * Type: `boolean`
 * Default: `false`

docs/1.getting-started/12.upgrade.md

@@ -34,8 +34,12 @@ Static sites             | ✅             | ✅                | ✅
 
 The migration guide provides a step-by-step comparison of Nuxt 2 features to Nuxt 3 features and guidance to adapt your current application.
 
-::alert{type=info icon=👉}
-[**Migrate from From Nuxt 2 to Nuxt 3**](/docs/migration/overview)
+::alert{type=info}
+👉 Checkout the [**migration guide from From Nuxt 2 to Nuxt 3**](/docs/migration/overview).
+::
+
+::alert{type=info}
+:rocket: Migrate with confidence with our [official Nuxt 2 to Nuxt 3 workshop](/support/workshop).
 ::
 
 ## Nuxt 2 to Nuxt Bridge