Merge branch 'main' into main

buglavecz · Jan 12, 2025 · f9a206b · f9a206b
2 parents 0614a01 + 374bd29
commit f9a206b
Show file tree

Hide file tree

Showing 80 changed files with 2,138 additions and 1,727 deletions.
diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:lts@sha256:0e910f435308c36ea60b4cfd7b80208044d77a074d16b768a81901ce938a62dc
+FROM node:lts@sha256:99981c3d1aac0d98cd9f03f74b92dddf30f30ffb0b34e6df8bd96283f62f12c6
 
 RUN apt-get update && \
     apt-get install -fy libnss3 libnspr4 libatk1.0-0 libatk-bridge2.0-0 libcups2 libdbus-1-3 libdrm2 libxkbcommon0 libatspi2.0-0 libxcomposite1 libxdamage1 libxfixes3 libxrandr2 libgbm1 libasound2 && \

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -60,7 +60,7 @@ jobs:
         run: pnpm test:attw
 
       - name: Cache dist
-        uses: actions/upload-artifact@6f51ac03b9356f520e9adb1b1b7802705f340c2b # v4.5.0
+        uses: actions/upload-artifact@65c4c4a1ddee5b72f698fdd19549f0f0fb45cf08 # v4.6.0
         with:
           retention-days: 3
           name: dist
@@ -81,7 +81,7 @@ jobs:
       - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@48ab28a6f5dbc2a99bf1e0131198dd8f1df78169 # v3.28.0
+        uses: github/codeql-action/init@b6a472f63d85b9c78a3ac5e89422239fc15e9b3c # v3.28.1
         with:
           config: |
             paths:
@@ -98,7 +98,7 @@ jobs:
           languages: ${{ matrix.language }}
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@48ab28a6f5dbc2a99bf1e0131198dd8f1df78169 # v3.28.0
+        uses: github/codeql-action/analyze@b6a472f63d85b9c78a3ac5e89422239fc15e9b3c # v3.28.1
         with:
           category: "/language:${{ matrix.language }}"
 

diff --git a/.github/workflows/lint-workflows.yml b/.github/workflows/lint-workflows.yml
@@ -26,6 +26,6 @@ jobs:
       - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
       # From https://github.com/rhysd/actionlint/blob/main/docs/usage.md#use-actionlint-on-github-actions
       - name: Check workflow files
-        uses: docker://rhysd/actionlint:1.7.4@sha256:82244e1db1c60d82c7792180a48dd0bcb838370bb589d53ff132503fc9485868
+        uses: docker://rhysd/actionlint:1.7.6@sha256:e3856d413f923accc4120884ff79f6bdba3dd53fd42884d325f21af61cc15ce0
         with:
           args: -color
diff --git a/.github/workflows/scorecards.yml b/.github/workflows/scorecards.yml
@@ -59,7 +59,7 @@ jobs:
       # Upload the results as artifacts (optional). Commenting out will disable uploads of run results in SARIF
       # format to the repository Actions tab.
       - name: "Upload artifact"
-        uses: actions/upload-artifact@6f51ac03b9356f520e9adb1b1b7802705f340c2b # v4.5.0
+        uses: actions/upload-artifact@65c4c4a1ddee5b72f698fdd19549f0f0fb45cf08 # v4.6.0
         if: github.repository == 'nuxt/nuxt' && success()
         with:
           name: SARIF file
@@ -68,7 +68,7 @@ jobs:
 
       # Upload the results to GitHub's code scanning dashboard.
       - name: "Upload to code-scanning"
-        uses: github/codeql-action/upload-sarif@48ab28a6f5dbc2a99bf1e0131198dd8f1df78169 # v3.28.0
+        uses: github/codeql-action/upload-sarif@b6a472f63d85b9c78a3ac5e89422239fc15e9b3c # v3.28.1
         if: github.repository == 'nuxt/nuxt' && success()
         with:
           sarif_file: results.sarif
diff --git a/docs/1.getting-started/12.upgrade.md b/docs/1.getting-started/12.upgrade.md
@@ -638,11 +638,11 @@ We have raised PRs to update modules using EJS syntax, but if you need to do thi
 
 * Moving your string interpolation logic directly into `getContents()`.
 * Using a custom function to handle the replacement, such as in https://github.com/nuxt-modules/color-mode/pull/240.
-* Continuing to use `lodash`, as a dependency of _your_ project rather than Nuxt:
+* Use `es-toolkit/compat` (a drop-in replacement for lodash template), as a dependency of _your_ project rather than Nuxt:
 
 ```diff
 + import { readFileSync } from 'node:fs'
-+ import { template } from 'lodash-es'
++ import { template } from 'es-toolkit/compat'
   // ...
   addTemplate({
     fileName: 'appinsights-vue.js'

diff --git a/docs/2.guide/1.concepts/3.rendering.md b/docs/2.guide/1.concepts/3.rendering.md
@@ -100,6 +100,10 @@ Watch a video from Alexander Lichter about **Building a plain SPA with Nuxt!?**.
 
 If you deploy your app to [static hosting](/docs/getting-started/deployment#static-hosting) with the `nuxi generate` or `nuxi build --prerender` commands, then by default, Nuxt will render every page as a separate static HTML file.
 
+::warning
+If you prerender your app with the `nuxi generate` or `nuxi build --prerender` commands, then you will not be able to use any server endpoints as no server will be included in your output folder. If you need server functionality, use `nuxi build` instead.
+::
+
 If you are using purely client-side rendering, then this might be unnecessary. You might only need a single `index.html` file, plus `200.html` and `404.html` fallbacks, which you can tell your static web host to serve up for all requests.
 
 In order to achieve this we can change how the routes are prerendered. Just add this to [your hooks](/docs/api/advanced/hooks#nuxt-hooks-build-time) in your `nuxt.config.ts`:

diff --git a/docs/2.guide/2.directory-structure/1.composables.md b/docs/2.guide/2.directory-structure/1.composables.md
@@ -71,7 +71,7 @@ export const useFoo = () => {
 
 ### Access plugin injections
 
-You can access [plugin injections](/docs/guide/directory-structure/plugins#automatically-providing-helpers) from composables:
+You can access [plugin injections](/docs/guide/directory-structure/plugins#providing-helpers) from composables:
 
 ```js [composables/test.ts]
 export const useHello = () => {

diff --git a/docs/2.guide/3.going-further/1.experimental-features.md b/docs/2.guide/3.going-further/1.experimental-features.md
@@ -61,7 +61,7 @@ This feature will likely be removed in a near future.
 
 Emits `app:chunkError` hook when there is an error loading vite/webpack chunks. Default behavior is to perform a reload of the new route on navigation to a new route when a chunk fails to load.
 
-If you set this to `'automatic-immediate'` Nuxt will reload the current route immediatly, instead of waiting for a navigation. This is useful for chunk errors that are not triggered by navigation, e.g., when your Nuxt app fails to load a [lazy component](/docs/guide/directory-structure/components#dynamic-imports). A potential downside of this behavior is undesired reloads, e.g., when your app does not need the chunk that caused the error.
+If you set this to `'automatic-immediate'` Nuxt will reload the current route immediately, instead of waiting for a navigation. This is useful for chunk errors that are not triggered by navigation, e.g., when your Nuxt app fails to load a [lazy component](/docs/guide/directory-structure/components#dynamic-imports). A potential downside of this behavior is undesired reloads, e.g., when your app does not need the chunk that caused the error.
 
 You can disable automatic handling by setting this to `false`, or handle chunk errors manually by setting it to `manual`.
 

diff --git a/docs/2.guide/4.recipes/4.sessions-and-authentication.md b/docs/2.guide/4.recipes/4.sessions-and-authentication.md
@@ -162,7 +162,7 @@ export default defineNuxtRouteMiddleware(() => {
 
 ## Home Page
 
-Now that we have our app middleware to protect our routes, we can use it on our home page that display our authenticated user informations. If the user is not authenticated, they will be redirected to the login page.
+Now that we have our app middleware to protect our routes, we can use it on our home page that display our authenticated user information. If the user is not authenticated, they will be redirected to the login page.
 
 We'll use [`definePageMeta`](/docs/api/utils/define-page-meta) to apply the middleware to the route that we want to protect.
 

diff --git a/docs/3.api/2.composables/use-async-data.md b/docs/3.api/2.composables/use-async-data.md
@@ -69,7 +69,13 @@ const { data: posts } = await useAsyncData(
   - `immediate`: when set to `false`, will prevent the request from firing immediately. (defaults to `true`)
   - `default`: a factory function to set the default value of the `data`, before the async function resolves - useful with the `lazy: true` or `immediate: false` option
   - `transform`: a function that can be used to alter `handler` function result after resolving
-  - `getCachedData`: Provide a function which returns cached data. A _null_ or _undefined_ return value will trigger a fetch. By default, this is: `key => nuxt.isHydrating ? nuxt.payload.data[key] : nuxt.static.data[key]`, which only caches data when `payloadExtraction` is enabled.
+  - `getCachedData`: Provide a function which returns cached data. A `null` or `undefined` return value will trigger a fetch. By default, this is:
+    ```ts
+    const getDefaultCachedData = (key) => nuxtApp.isHydrating 
+      ? nuxtApp.payload.data[key] 
+      : nuxtApp.static.data[key]
+    ```
+    Which only caches data when `experimental.payloadExtraction` of `nuxt.config` is enabled.
   - `pick`: only pick specified keys in this array from the `handler` function result
   - `watch`: watch reactive sources to auto-refresh
   - `deep`: return data in a deep ref object. It is `false` by default to return data in a shallow ref object for performance.
@@ -94,7 +100,13 @@ Learn how to use `transform` and `getCachedData` to avoid superfluous calls to a
 - `data`: the result of the asynchronous function that is passed in.
 - `refresh`/`execute`: a function that can be used to refresh the data returned by the `handler` function.
 - `error`: an error object if the data fetching failed.
-- `status`: a string indicating the status of the data request (`"idle"`, `"pending"`, `"success"`, `"error"`).
+- `status`: a string indicating the status of the data request:
+  - `idle`: when the request has not started, such as:
+    - when `execute` has not yet been called and `{ immediate: false }` is set
+    - when rendering HTML on the server and `{ server: false }` is set
+  - `pending`: the request is in progress
+  - `success`: the request has completed successfully
+  - `error`: the request has failed
 - `clear`: a function which will set `data` to `undefined`, set `error` to `null`, set `status` to `'idle'`, and mark any currently pending requests as cancelled.
 
 By default, Nuxt waits until a `refresh` is finished before it can be executed again.

diff --git a/docs/3.api/2.composables/use-fetch.md b/docs/3.api/2.composables/use-fetch.md
@@ -109,7 +109,13 @@ All fetch options can be given a `computed` or `ref` value. These will be watche
   - `immediate`: when set to `false`, will prevent the request from firing immediately. (defaults to `true`)
   - `default`: a factory function to set the default value of the `data`, before the async function resolves - useful with the `lazy: true` or `immediate: false` option
   - `transform`: a function that can be used to alter `handler` function result after resolving
-  - `getCachedData`: Provide a function which returns cached data. A _null_ or _undefined_ return value will trigger a fetch. By default, this is: `key => nuxt.isHydrating ? nuxt.payload.data[key] : nuxt.static.data[key]`, which only caches data when `payloadExtraction` is enabled.
+  - `getCachedData`: Provide a function which returns cached data. A `null` or `undefined` return value will trigger a fetch. By default, this is:
+    ```ts
+    const getDefaultCachedData = (key) => nuxtApp.isHydrating 
+      ? nuxtApp.payload.data[key] 
+      : nuxtApp.static.data[key]
+    ```
+    Which only caches data when `experimental.payloadExtraction` of `nuxt.config` is enabled.
   - `pick`: only pick specified keys in this array from the `handler` function result
   - `watch`: watch an array of reactive sources and auto-refresh the fetch result when they change. Fetch options and URL are watched by default. You can completely ignore reactive sources by using `watch: false`. Together with `immediate: false`, this allows for a fully-manual `useFetch`. (You can [see an example here](/docs/getting-started/data-fetching#watch) of using `watch`.)
   - `deep`: return data in a deep ref object. It is `false` by default to return data in a shallow ref object for performance.
@@ -134,7 +140,13 @@ Learn how to use `transform` and `getCachedData` to avoid superfluous calls to a
 - `data`: the result of the asynchronous function that is passed in.
 - `refresh`/`execute`: a function that can be used to refresh the data returned by the `handler` function.
 - `error`: an error object if the data fetching failed.
-- `status`: a string indicating the status of the data request (`"idle"`, `"pending"`, `"success"`, `"error"`).
+- `status`: a string indicating the status of the data request:
+  - `idle`: when the request has not started, such as:
+    - when `execute` has not yet been called and `{ immediate: false }` is set
+    - when rendering HTML on the server and `{ server: false }` is set
+  - `pending`: the request is in progress
+  - `success`: the request has completed successfully
+  - `error`: the request has failed
 - `clear`: a function which will set `data` to `undefined`, set `error` to `null`, set `status` to `'idle'`, and mark any currently pending requests as cancelled.
 
 By default, Nuxt waits until a `refresh` is finished before it can be executed again.
@@ -147,7 +159,7 @@ If you have not fetched data on the server (for example, with `server: false`),
 
 ```ts [Signature]
 function useFetch<DataT, ErrorT>(
-  url: string | Request | Ref<string | Request> | (() => string) | Request,
+  url: string | Request | Ref<string | Request> | (() => string | Request),
   options?: UseFetchOptions<DataT>
 ): Promise<AsyncData<DataT, ErrorT>>
 

diff --git a/docs/3.api/4.commands/add.md b/docs/3.api/4.commands/add.md
@@ -19,7 +19,7 @@ npx nuxi add <TEMPLATE> <NAME> [--cwd=<directory>] [--logLevel=<silent|info|verb
 <!--add-args-->
 Argument | Description
 --- | ---
-`TEMPLATE` | Specify which template to generate (options: <api\|plugin\|component\|composable\|middleware\|layout\|page>)
+`TEMPLATE` | Specify which template to generate (options: <api\|plugin\|component\|composable\|middleware\|layout\|page\|layer>)
 `NAME` | Specify name of the generated file
 <!--/add-args-->
 
@@ -103,3 +103,10 @@ npx nuxi add middleware auth
 # Generates `server/api/hello.ts`
 npx nuxi add api hello
 ```
+
+## `nuxi add layer`
+
+```bash [Terminal]
+# Generates `layers/subscribe/nuxt.config.ts`
+npx nuxi add layer subscribe
+```
diff --git a/docs/3.api/4.commands/build-module.md b/docs/3.api/4.commands/build-module.md
@@ -4,7 +4,7 @@ description: 'Nuxt command to build your Nuxt module before publishing.'
 links:
   - label: Source
     icon: i-simple-icons-github
-    to: https://github.com/nuxt/cli/blob/main/src/commands/build-module.ts
+    to: https://github.com/nuxt/module-builder/blob/main/src/cli.ts
     size: xs
 ---
 

diff --git a/docs/3.api/4.commands/module.md b/docs/3.api/4.commands/module.md
@@ -14,7 +14,7 @@ Nuxi provides a few utilities to work with [Nuxt modules](/modules) seamlessly.
 
 <!--module-add-cmd-->
 ```bash [Terminal]
-npx nuxi module add <MODULENAME> [--cwd=<directory>] [--logLevel=<silent|info|verbose>] [--skipInstall] [--skipConfig]
+npx nuxi module add <MODULENAME> [--cwd=<directory>] [--logLevel=<silent|info|verbose>] [--skipInstall] [--skipConfig] [--dev]
 ```
 <!--/module-add-cmd-->
 
@@ -31,6 +31,7 @@ Option | Default | Description
 `--logLevel=<silent\|info\|verbose>` |  | Specify build-time log level
 `--skipInstall` |  | Skip npm install
 `--skipConfig` |  | Skip nuxt.config.ts update
+`--dev` |  | Install module as dev dependency
 <!--/module-add-opts-->
 
 The command lets you install [Nuxt modules](/modules) in your application with no manual work.

diff --git a/docs/5.community/6.roadmap.md b/docs/5.community/6.roadmap.md
@@ -63,7 +63,7 @@ Each active version has its own nightly releases which are generated automatical
 
 Release                                 |                                                                                                  | Initial release | End Of Life  | Docs
 ----------------------------------------|---------------------------------------------------------------------------------------------------|-----------------|--------------|-------
-**4.x** (scheduled)                     |                                                                                           | 2024 Q3         |              | &nbsp;
+**4.x** (scheduled)                     |                                                                                           | approximately 1 month after release of nitro v3             |              | &nbsp;
 **3.x** (stable)           | <a href="https://npmjs.com/package/nuxt"><img alt="Nuxt latest 3.x version" src="https://flat.badgen.net/npm/v/nuxt?label=" class="not-prose"></a>            | 2022-11-16      | TBA          | [nuxt.com](/docs)
 **2.x** (unsupported)      | <a href="https://www.npmjs.com/package/nuxt?activeTab=versions"><img alt="Nuxt 2.x version" src="https://flat.badgen.net/npm/v/nuxt/2x?label=" class="not-prose"></a>         | 2018-09-21      | 2024-06-30   | [v2.nuxt.com](https://v2.nuxt.com/docs)
 **1.x** (unsupported)      | <a href="https://www.npmjs.com/package/nuxt?activeTab=versions"><img alt="Nuxt 1.x version" src="https://flat.badgen.net/npm/v/nuxt/1x?label=" class="not-prose"></a>         | 2018-01-08      | 2019-09-21 | &nbsp;

diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -166,6 +166,55 @@ export default createConfigForNuxt({
         'no-console': 'off',
       },
     },
+    // manually specify dependencies for nuxt browser app
+    {
+      files: ['packages/nuxt/src/app/**', 'packages/nuxt/src/(components,head,imports,pages)/runtime/**'],
+      name: 'local/client-packages',
+      rules: {
+        '@typescript-eslint/no-restricted-imports': ['error', {
+          'patterns': [
+            {
+              allowTypeImports: true,
+              group: [
+                // disallow everything
+                '[@a-z]*',
+                // except certain dependencies
+                ...[
+                  // vue ecosystem
+                  '@unhead',
+                  '@vue',
+                  '@vue/shared',
+                  'vue/server-renderer',
+                  'vue',
+                  'vue-router',
+                  // other deps
+                  'devalue',
+                  'klona',
+                  // unjs ecosystem
+                  'defu',
+                  'ufo',
+                  'h3',
+                  'destr',
+                  'consola',
+                  'hookable',
+                  'unctx',
+                  'cookie-es',
+                  'perfect-debounce',
+                  'radix3',
+                  'ohash',
+                  'pathe',
+                  'uncrypto',
+                  // internal deps
+                  'nuxt/app',
+                ].map(r => `!${r}`),
+                '!#[a-z]*/**', // aliases
+                '!.*/**', // relative imports
+              ],
+            },
+          ],
+        }],
+      },
+    },
     {
       files: ['**/fixtures/**', '**/fixture/**'],
       name: 'local/disables/fixtures',

diff --git a/lychee.toml b/lychee.toml
@@ -26,6 +26,7 @@ exclude = [
   "https://awesome-lib.js/",
   "https://myawesome-lib.css/",
   "https://awesome-lib.css/",
+  "https://mycdn.org/",
   'https://www.npmjs.com/package/(.*)importName(.*)',
   # TODO: address 404s (non-prerendered files?) from nuxt.com
   "https://nuxt.com/docs/guide/going-further/modules",