Merge branch 'main' into feat/named_export_components

This commit is contained in:
Alexander Lichter 2024-06-01 14:32:19 +02:00 committed by GitHub
commit cf9f8ccf09
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
131 changed files with 2622 additions and 1657 deletions

View File

@ -17,7 +17,7 @@ jobs:
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
- run: corepack enable - run: corepack enable
- uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2 - uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
with: with:

View File

@ -13,7 +13,7 @@ jobs:
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
- run: corepack enable - run: corepack enable
- uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2 - uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
with: with:

View File

@ -29,7 +29,7 @@ jobs:
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
- run: corepack enable - run: corepack enable
- uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2 - uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
with: with:

View File

@ -20,7 +20,7 @@ jobs:
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
with: with:
fetch-depth: 0 fetch-depth: 0
- run: corepack enable - run: corepack enable

View File

@ -25,10 +25,10 @@ jobs:
restore-keys: cache-lychee- restore-keys: cache-lychee-
# check links with Lychee # check links with Lychee
- uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
- name: Lychee link checker - name: Lychee link checker
uses: lycheeverse/lychee-action@054a8e8c7a88ada133165c6633a49825a32174e2 # for v1.8.0 uses: lycheeverse/lychee-action@25a231001d1723960a301b7d4c82884dc7ef857d # for v1.8.0
with: with:
# arguments with file types to check # arguments with file types to check
args: >- args: >-

View File

@ -35,7 +35,7 @@ jobs:
timeout-minutes: 10 timeout-minutes: 10
steps: steps:
- uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
- run: corepack enable - run: corepack enable
- uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2 - uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
with: with:
@ -72,7 +72,7 @@ jobs:
- build - build
steps: steps:
- uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
- run: corepack enable - run: corepack enable
- uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2 - uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
with: with:
@ -83,7 +83,7 @@ jobs:
run: pnpm install run: pnpm install
- name: Initialize CodeQL - name: Initialize CodeQL
uses: github/codeql-action/init@ccf74c947955fd1cf117aef6a0e4e66191ef6f61 # v3.25.4 uses: github/codeql-action/init@9fdb3e49720b44c48891d036bb502feb25684276 # v3.25.6
with: with:
languages: javascript languages: javascript
queries: +security-and-quality queries: +security-and-quality
@ -95,7 +95,7 @@ jobs:
path: packages path: packages
- name: Perform CodeQL Analysis - name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@ccf74c947955fd1cf117aef6a0e4e66191ef6f61 # v3.25.4 uses: github/codeql-action/analyze@9fdb3e49720b44c48891d036bb502feb25684276 # v3.25.6
with: with:
category: "/language:javascript" category: "/language:javascript"
@ -111,7 +111,7 @@ jobs:
module: ["bundler", "node"] module: ["bundler", "node"]
steps: steps:
- uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
- run: corepack enable - run: corepack enable
- uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2 - uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
with: with:
@ -142,7 +142,7 @@ jobs:
timeout-minutes: 10 timeout-minutes: 10
steps: steps:
- uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
- run: corepack enable - run: corepack enable
- uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2 - uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
with: with:
@ -166,7 +166,7 @@ jobs:
needs: needs:
- build - build
steps: steps:
- uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
- run: corepack enable - run: corepack enable
- uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2 - uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
with: with:
@ -218,7 +218,7 @@ jobs:
timeout-minutes: 15 timeout-minutes: 15
steps: steps:
- uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
- run: corepack enable - run: corepack enable
- uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2 - uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
with: with:
@ -246,9 +246,9 @@ jobs:
TEST_CONTEXT: ${{ matrix.context }} TEST_CONTEXT: ${{ matrix.context }}
TEST_V4: ${{ matrix.version == 'v4' }} TEST_V4: ${{ matrix.version == 'v4' }}
TEST_PAYLOAD: ${{ matrix.payload }} TEST_PAYLOAD: ${{ matrix.payload }}
SKIP_BUNDLE_SIZE: ${{ github.event_name != 'push' || matrix.env == 'dev' || matrix.builder == 'webpack' || matrix.context == 'default' || runner.os == 'Windows' }} SKIP_BUNDLE_SIZE: ${{ github.event_name != 'push' || matrix.env == 'dev' || matrix.builder == 'webpack' || matrix.context == 'default' || matrix.payload == 'js' || runner.os == 'Windows' }}
- uses: codecov/codecov-action@5ecb98a3c6b747ed38dc09f787459979aebb39be # v4.3.1 - uses: codecov/codecov-action@125fc84a9a348dbcf27191600683ec096ec9021c # v4.4.1
if: github.event_name != 'push' && matrix.env == 'built' && matrix.builder == 'vite' && matrix.context == 'default' && matrix.os == 'ubuntu-latest' && matrix.manifest == 'manifest-on' if: github.event_name != 'push' && matrix.env == 'built' && matrix.builder == 'vite' && matrix.context == 'default' && matrix.os == 'ubuntu-latest' && matrix.manifest == 'manifest-on'
with: with:
token: ${{ secrets.CODECOV_TOKEN }} token: ${{ secrets.CODECOV_TOKEN }}
@ -270,7 +270,7 @@ jobs:
timeout-minutes: 20 timeout-minutes: 20
steps: steps:
- uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
with: with:
fetch-depth: 0 fetch-depth: 0
- run: corepack enable - run: corepack enable
@ -309,7 +309,7 @@ jobs:
timeout-minutes: 20 timeout-minutes: 20
steps: steps:
- uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
with: with:
fetch-depth: 0 fetch-depth: 0
- run: corepack enable - run: corepack enable

View File

@ -17,6 +17,6 @@ jobs:
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- name: 'Checkout Repository' - name: 'Checkout Repository'
uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
- name: 'Dependency Review' - name: 'Dependency Review'
uses: actions/dependency-review-action@0c155c5e8556a497adf53f2c18edabf945ed8e70 # v4.3.2 uses: actions/dependency-review-action@0c155c5e8556a497adf53f2c18edabf945ed8e70 # v4.3.2

View File

@ -20,7 +20,7 @@ jobs:
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
- run: corepack enable - run: corepack enable
- uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2 - uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
with: with:

View File

@ -21,7 +21,7 @@ jobs:
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
# From https://github.com/rhysd/actionlint/blob/main/docs/usage.md#use-actionlint-on-github-actions # From https://github.com/rhysd/actionlint/blob/main/docs/usage.md#use-actionlint-on-github-actions
- name: Check workflow files - name: Check workflow files
run: | run: |

View File

@ -21,7 +21,7 @@ jobs:
permissions: permissions:
id-token: write id-token: write
steps: steps:
- uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
with: with:
ref: '2.x' ref: '2.x'
fetch-depth: 0 # All history fetch-depth: 0 # All history

View File

@ -22,14 +22,14 @@ jobs:
steps: steps:
- name: Ensure action is by maintainer - name: Ensure action is by maintainer
uses: octokit/request-action@21d174fc38ff59af9cf4d7e07347d29df6dbaa99 # v2.3.0 uses: octokit/request-action@872c5c97b3c85c23516a572f02b31401ef82415d # v2.3.1
id: check_role id: check_role
with: with:
route: GET /repos/nuxt/nuxt/collaborators/${{ github.event.comment.user.login }} route: GET /repos/nuxt/nuxt/collaborators/${{ github.event.comment.user.login }}
env: env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
with: with:
ref: refs/pull/${{ github.event.issue.number }}/merge ref: refs/pull/${{ github.event.issue.number }}/merge
fetch-depth: 0 fetch-depth: 0

View File

@ -17,7 +17,7 @@ jobs:
runs-on: ubuntu-latest runs-on: ubuntu-latest
timeout-minutes: 20 timeout-minutes: 20
steps: steps:
- uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
with: with:
fetch-depth: 0 fetch-depth: 0
- run: corepack enable - run: corepack enable

View File

@ -10,7 +10,7 @@ jobs:
reproduire: reproduire:
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
- uses: Hebilicious/reproduire@4b686ae9cbb72dad60f001d278b6e3b2ce40a9ac # v0.0.9-mp - uses: Hebilicious/reproduire@4b686ae9cbb72dad60f001d278b6e3b2ce40a9ac # v0.0.9-mp
with: with:
label: needs reproduction label: needs reproduction

View File

@ -32,12 +32,12 @@ jobs:
steps: steps:
- name: "Checkout code" - name: "Checkout code"
uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b # v4.1.5 uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
with: with:
persist-credentials: false persist-credentials: false
- name: "Run analysis" - name: "Run analysis"
uses: ossf/scorecard-action@0864cf19026789058feabb7e87baa5f140aac736 # v2.3.1 uses: ossf/scorecard-action@dc50aa9510b46c811795eb24b2f1ba02a914e534 # v2.3.3
with: with:
results_file: results.sarif results_file: results.sarif
results_format: sarif results_format: sarif
@ -68,7 +68,7 @@ jobs:
# Upload the results to GitHub's code scanning dashboard. # Upload the results to GitHub's code scanning dashboard.
- name: "Upload to code-scanning" - name: "Upload to code-scanning"
uses: github/codeql-action/upload-sarif@ccf74c947955fd1cf117aef6a0e4e66191ef6f61 # v3.25.4 uses: github/codeql-action/upload-sarif@9fdb3e49720b44c48891d036bb502feb25684276 # v3.25.6
if: github.repository == 'nuxt/nuxt' && success() if: github.repository == 'nuxt/nuxt' && success()
with: with:
sarif_file: results.sarif sarif_file: results.sarif

View File

@ -33,6 +33,7 @@ It provides a number of features that make it easy to build fast, SEO-friendly,
- ❤️ [Contribute](#contribute) - ❤️ [Contribute](#contribute)
- 🏠 [Local Development](#local-development) - 🏠 [Local Development](#local-development)
- ⛰️ [Nuxt 2](#nuxt-2) - ⛰️ [Nuxt 2](#nuxt-2)
- 🛟 [Professional Support](#professional-support)
- 🔗 [Follow us](#follow-us) - 🔗 [Follow us](#follow-us)
- ⚖️ [License](#license) - ⚖️ [License](#license)
@ -104,6 +105,13 @@ Follow the docs to [Set Up Your Local Development Environment](https://nuxt.com/
You can find the code for Nuxt 2 on the [`2.x` branch](https://github.com/nuxt/nuxt/tree/2.x) and the documentation at [v2.nuxt.com](https://v2.nuxt.com). You can find the code for Nuxt 2 on the [`2.x` branch](https://github.com/nuxt/nuxt/tree/2.x) and the documentation at [v2.nuxt.com](https://v2.nuxt.com).
If you expect to be using Nuxt 2 beyond the EOL (End of Life) date (June 30, 2024), and still need a maintained version that can satisfy security and browser compatibility requirements, make sure to check out [HeroDevs NES (Never-Ending Support) Nuxt 2](https://www.herodevs.com/support/nuxt-nes?utm_source=nuxt-github&utm_medium=nuxt-readme).
## <a name="professional-support">🛟 Professional Support</a>
- Technical audit & consulting: [Nuxt Experts](https://nuxt.com/enterprise/support)
- Custom development & more: [Nuxt Agencies Partners](https://nuxt.com/enterprise/agencies)
## <a name="follow-us">🔗 Follow us</a> ## <a name="follow-us">🔗 Follow us</a>
<p valign="center"> <p valign="center">

View File

@ -10,6 +10,10 @@ If you are a module author, you can find more specific information in the [Modul
Nuxt offers first-class support for end-to-end and unit testing of your Nuxt application via `@nuxt/test-utils`, a library of test utilities and configuration that currently powers the [tests we use on Nuxt itself](https://github.com/nuxt/nuxt/tree/main/test) and tests throughout the module ecosystem. Nuxt offers first-class support for end-to-end and unit testing of your Nuxt application via `@nuxt/test-utils`, a library of test utilities and configuration that currently powers the [tests we use on Nuxt itself](https://github.com/nuxt/nuxt/tree/main/test) and tests throughout the module ecosystem.
::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=yGzwk9xi9gU" target="_blank"}
Watch a video from Alexander Lichter about getting started with the `@nuxt/test-utils`.
::
## Installation ## Installation
In order to allow you to manage your other testing dependencies, `@nuxt/test-utils` ships with various optional peer dependencies. For example: In order to allow you to manage your other testing dependencies, `@nuxt/test-utils` ships with various optional peer dependencies. For example:
@ -160,21 +164,32 @@ export default defineVitestConfig({
`mountSuspended` allows you to mount any Vue component within the Nuxt environment, allowing async setup and access to injections from your Nuxt plugins. For example: `mountSuspended` allows you to mount any Vue component within the Nuxt environment, allowing async setup and access to injections from your Nuxt plugins. For example:
```ts twoslash ```ts twoslash
import type { Component } from 'vue'
import { it, expect } from 'vitest' import { it, expect } from 'vitest'
declare const SomeComponent: Component import type { Component } from 'vue'
declare const App: Component declare module '#components' {
export const SomeComponent: Component
}
// ---cut--- // ---cut---
// tests/components/SomeComponents.nuxt.spec.ts // tests/components/SomeComponents.nuxt.spec.ts
import { mountSuspended } from '@nuxt/test-utils/runtime' import { mountSuspended } from '@nuxt/test-utils/runtime'
import { SomeComponent } from '#components'
it('can mount some component', async () => { it('can mount some component', async () => {
const component = await mountSuspended(SomeComponent) const component = await mountSuspended(SomeComponent)
expect(component.text()).toMatchInlineSnapshot( expect(component.text()).toMatchInlineSnapshot(
'This is an auto-imported component' '"This is an auto-imported component"'
) )
}) })
```
```ts twoslash
import { it, expect } from 'vitest'
// ---cut---
// tests/components/SomeComponents.nuxt.spec.ts
import { mountSuspended } from '@nuxt/test-utils/runtime'
import App from '~/app.vue'
// tests/App.nuxt.spec.ts // tests/App.nuxt.spec.ts
it('can also mount an app', async () => { it('can also mount an app', async () => {
const component = await mountSuspended(App, { route: '/test' }) const component = await mountSuspended(App, { route: '/test' })
@ -199,13 +214,15 @@ The passed in component will be rendered inside a `<div id="test-wrapper"></div>
Examples: Examples:
```ts twoslash ```ts twoslash
import type { Component } from 'vue'
import { it, expect } from 'vitest' import { it, expect } from 'vitest'
declare const SomeComponent: Component import type { Component } from 'vue'
declare const App: Component declare module '#components' {
export const SomeComponent: Component
}
// ---cut--- // ---cut---
// tests/components/SomeComponents.nuxt.spec.ts // tests/components/SomeComponents.nuxt.spec.ts
import { renderSuspended } from '@nuxt/test-utils/runtime' import { renderSuspended } from '@nuxt/test-utils/runtime'
import { SomeComponent } from '#components'
import { screen } from '@testing-library/vue' import { screen } from '@testing-library/vue'
it('can render some component', async () => { it('can render some component', async () => {
@ -215,13 +232,11 @@ it('can render some component', async () => {
``` ```
```ts twoslash ```ts twoslash
import type { Component } from 'vue'
import { it, expect } from 'vitest' import { it, expect } from 'vitest'
declare const SomeComponent: Component
declare const App: Component
// ---cut--- // ---cut---
// tests/App.nuxt.spec.ts // tests/App.nuxt.spec.ts
import { renderSuspended } from '@nuxt/test-utils/runtime' import { renderSuspended } from '@nuxt/test-utils/runtime'
import App from '~/app.vue'
it('can also render an app', async () => { it('can also render an app', async () => {
const html = await renderSuspended(App, { route: '/test' }) const html = await renderSuspended(App, { route: '/test' })
@ -358,7 +373,7 @@ registerEndpoint('/test/', {
}) })
``` ```
> **Note**: If your requests in a component go to external API, you can use `baseURL` and then make it empty using Nuxt Environment Config (`$test`) so all your requests will go to Nitro server. > **Note**: If your requests in a component go to an external API, you can use `baseURL` and then make it empty using [Nuxt Environment Override Config](/docs/getting-started/configuration#environment-overrides) (`$test`) so all your requests will go to Nitro server.
#### Conflict with End-To-End Testing #### Conflict with End-To-End Testing

View File

@ -25,13 +25,17 @@ Nuxt 4 is planned to be released **on or before June 14** (though obviously this
Until then, it is possible to test many of Nuxt 4's breaking changes on the nightly release channel. Until then, it is possible to test many of Nuxt 4's breaking changes on the nightly release channel.
::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=r4wFKlcJK6c" target="_blank"}
Watch a video from Alexander Lichter showing how to opt in to Nuxt 4's breaking changes already.
::
### Opting in to Nuxt 4 ### Opting in to Nuxt 4
First, opt in to the nightly release channel [following these steps](/docs/guide/going-further/nightly-release-channel#opting-in). First, opt in to the nightly release channel [following these steps](/docs/guide/going-further/nightly-release-channel#opting-in).
Then you can set your `compatibilityVersion` to match Nuxt 4 behavior: Then you can set your `compatibilityVersion` to match Nuxt 4 behavior:
```ts ```ts twoslash [nuxt.config.ts]
export default defineNuxtConfig({ export default defineNuxtConfig({
future: { future: {
compatibilityVersion: 4, compatibilityVersion: 4,
@ -42,7 +46,9 @@ export default defineNuxtConfig({
// app: 'app' // app: 'app'
// }, // },
// experimental: { // experimental: {
// sharedPrerenderData: false,
// compileTemplate: true, // compileTemplate: true,
// resetAsyncDataToUndefined: true,
// templateUtils: true, // templateUtils: true,
// relativeWatchPaths: true, // relativeWatchPaths: true,
// defaults: { // defaults: {
@ -100,6 +106,7 @@ app/
pages/ pages/
plugins/ plugins/
utils/ utils/
app.config.ts
app.vue app.vue
router.options.ts router.options.ts
modules/ modules/
@ -126,12 +133,12 @@ nuxt.config.ts
##### Migration Steps ##### Migration Steps
1. Create a new directory called `app/`. 1. Create a new directory called `app/`.
1. Move your `assets/`, `components/`, `composables/`, `layouts/`, `middleware/`, `pages/`, `plugins/` and `utils/` folders under it, as well as `app.vue`, `error.vue`. If you have an `app/router-options.ts` or `app/spa-loading-template.html`, these paths remain the same. 1. Move your `assets/`, `components/`, `composables/`, `layouts/`, `middleware/`, `pages/`, `plugins/` and `utils/` folders under it, as well as `app.vue`, `error.vue`, `app.config.ts`. If you have an `app/router-options.ts` or `app/spa-loading-template.html`, these paths remain the same.
1. Make sure your `nuxt.config.ts`, `modules/`, `public/` and `server/` folders remain outside the `app/` folder, in the root of your project. 1. Make sure your `nuxt.config.ts`, `modules/`, `public/` and `server/` folders remain outside the `app/` folder, in the root of your project.
However, migration is _not required_. If you wish to keep your current folder structure, Nuxt should auto-detect it. (If it does not, please raise an issue.) You can also force a v3 folder structure with the following configuration: However, migration is _not required_. If you wish to keep your current folder structure, Nuxt should auto-detect it. (If it does not, please raise an issue.) You can also force a v3 folder structure with the following configuration:
```ts ```ts [nuxt.config.ts]
export default defineNuxtConfig({ export default defineNuxtConfig({
// This reverts the new srcDir default from `app` back to your root directory // This reverts the new srcDir default from `app` back to your root directory
srcDir: '.', srcDir: '.',
@ -142,6 +149,104 @@ export default defineNuxtConfig({
}) })
``` ```
#### Shared Prerender Data
🚦 **Impact Level**: Medium
##### What Changed
We enabled a previously experimental feature to share data from `useAsyncData` and `useFetch` calls, across different pages. See [original PR](https://github.com/nuxt/nuxt/pull/24894).
##### Reasons for Change
This feature automatically shares payload _data_ between pages that are prerendered. This can result in a significant performance improvement when prerendering sites that use `useAsyncData` or `useFetch` and fetch the same data in different pages.
For example, if your site requires a `useFetch` call for every page (for example, to get navigation data for a menu, or site settings from a CMS), this data would only be fetched once when prerendering the first page that uses it, and then cached for use when prerendering other pages.
##### Migration Steps
Make sure that any unique key of your data is always resolvable to the same data. For example, if you are using `useAsyncData` to fetch data related to a particular page, you should provide a key that uniquely matches that data. (`useFetch` should do this automatically for you.)
```ts [app/pages/test/[slug\\].vue]
// This would be unsafe in a dynamic page (e.g. `[slug].vue`) because the route slug makes a difference
// to the data fetched, but Nuxt can't know that because it's not reflected in the key.
const route = useRoute()
const { data } = await useAsyncData(async () => {
return await $fetch(`/api/my-page/${route.params.slug}`)
})
// Instead, you should use a key that uniquely identifies the data fetched.
const { data } = await useAsyncData(route.params.slug, async () => {
return await $fetch(`/api/my-page/${route.params.slug}`)
})
```
Alternatively, you can disable this feature with:
```ts twoslash [nuxt.config.ts]
export default defineNuxtConfig({
experimental: {
sharedPrerenderData: false
}
})
```
#### Default `data` and `error` values in `useAsyncData` and `useFetch`
🚦 **Impact Level**: Minimal
##### What Changed
`data` and `error` objects returned from `useAsyncData` will now default to `undefined`.
##### Reasons for Change
Previously `data` was initialized to `null` but reset in `clearNuxtData` to `undefined`. `error` was initialized to `null`. This change is to bring greater consistency.
##### Migration Steps
If you encounter any issues you can revert back to the previous behavior with:
```ts twoslash [nuxt.config.ts]
export default defineNuxtConfig({
experimental: {
defaults: {
useAsyncData: {
value: 'null',
errorValue: 'null'
}
}
}
})
```
Please report an issue if you are doing this, as we do not plan to keep this as configurable.
#### Respect defaults when clearing `data` in `useAsyncData` and `useFetch`
🚦 **Impact Level**: Minimal
##### What Changed
If you provide a custom `default` value for `useAsyncData`, this will now be used when calling `clear` or `clearNuxtData` and it will be reset to its default value rather than simply unset.
##### Reasons for Change
Often users set an appropriately empty value, such as an empty array, to avoid the need to check for `null`/`undefined` when iterating over it. This should be respected when resetting/clearing the data.
##### Migration Steps
If you encounter any issues you can revert back to the previous behavior, for now, with:
```ts twoslash [nuxt.config.ts]
export default defineNuxtConfig({
experimental: {
resetAsyncDataToUndefined: true,
}
})
```
Please report an issue if you are doing so, as we do not plan to keep this as configurable.
#### Shallow Data Reactivity in `useAsyncData` and `useFetch` #### Shallow Data Reactivity in `useAsyncData` and `useFetch`
🚦 **Impact Level**: Minimal 🚦 **Impact Level**: Minimal
@ -166,7 +271,7 @@ In most cases, no migration steps are required, but if you rely on the reactivit
+ const { data } = useFetch('/api/test', { deep: true }) + const { data } = useFetch('/api/test', { deep: true })
``` ```
1. You can change the default behavior on a project-wide basis (not recommended): 1. You can change the default behavior on a project-wide basis (not recommended):
```ts ```ts twoslash [nuxt.config.ts]
export default defineNuxtConfig({ export default defineNuxtConfig({
experimental: { experimental: {
defaults: { defaults: {
@ -205,6 +310,34 @@ However, if you are a module author using the `builder:watch` hook and wishing t
}) })
``` ```
#### Directory index scanning
🚦 **Impact Level**: Medium
##### What Changed
Child folders in your `middleware/` folder are also scanned for `index` files and these are now also registered as middleware in your project.
##### Reasons for Change
Nuxt scans a number of folders automatically, including `middleware/` and `plugins/`.
Child folders in your `plugins/` folder are scanned for `index` files and we wanted to make this behavior consistent between scanned directories.
##### Migration Steps
Probably no migration is necessary but if you wish to revert to previous behavior you can add a hook to filter out these middleware:
```ts
export default defineNuxtConfig({
hooks: {
'app:resolve'(app) {
app.middleware = app.middleware.filter(mw => !/\/index\.[^/]+$/.test(mw.path))
}
}
})
```
#### Template Compilation Changes #### Template Compilation Changes
🚦 **Impact Level**: Minimal 🚦 **Impact Level**: Minimal
@ -265,6 +398,29 @@ const importSources = (sources: string | string[], { lazy = false } = {}) => {
const importName = genSafeVariableName const importName = genSafeVariableName
``` ```
#### Removal of Experimental Features
🚦 **Impact Level**: Minimal
##### What Changed
Four experimental features are no longer configurable in Nuxt 4:
* `treeshakeClientOnly` will be `true` (default since v3.0)
* `configSchema` will be `true` (default since v3.3)
* `polyfillVueUseHead` will be `false` (default since v3.4)
* `respectNoSSRHeader` will be `false` (default since v3.4)
##### Reasons for Change
These options have been set to their current values for some time and we do not have a reason to believe that they need to remain configurable.
##### Migration Steps
* `polyfillVueUseHead` is implementable in user-land with [this plugin](https://github.com/nuxt/nuxt/blob/f209158352b09d1986aa320e29ff36353b91c358/packages/nuxt/src/head/runtime/plugins/vueuse-head-polyfill.ts#L10-L11)
* `respectNoSSRHeader`is implementable in user-land with [server middleware](https://github.com/nuxt/nuxt/blob/c660b39447f0d5b8790c0826092638d321cd6821/packages/nuxt/src/core/runtime/nitro/no-ssr.ts#L8-L9)
## Nuxt 2 vs Nuxt 3 ## Nuxt 2 vs Nuxt 3
In the table below, there is a quick comparison between 3 versions of Nuxt: In the table below, there is a quick comparison between 3 versions of Nuxt:
@ -272,7 +428,7 @@ In the table below, there is a quick comparison between 3 versions of Nuxt:
Feature / Version | Nuxt 2 | Nuxt Bridge | Nuxt 3 Feature / Version | Nuxt 2 | Nuxt Bridge | Nuxt 3
-------------------------|-----------------|------------------|--------- -------------------------|-----------------|------------------|---------
Vue | 2 | 2 | 3 Vue | 2 | 2 | 3
Stability | 😊 Stable | 😌 Semi-stable | 😊 Stable Stability | 😊 Stable | 😊 Stable | 😊 Stable
Performance | 🏎 Fast | ✈️ Faster | 🚀 Fastest Performance | 🏎 Fast | ✈️ Faster | 🚀 Fastest
Nitro Engine | ❌ | ✅ | ✅ Nitro Engine | ❌ | ✅ | ✅
ESM support | 🌙 Partial | 👍 Better | ✅ ESM support | 🌙 Partial | 👍 Better | ✅

View File

@ -46,6 +46,10 @@ export default defineNuxtConfig({
}) })
``` ```
::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=DFZI2iVCrNc" target="_blank"}
Watch a video from Alexander Lichter about the env-aware `nuxt.config.ts`.
::
::note ::note
If you're authoring layers, you can also use the `$meta` key to provide metadata that you or the consumers of your layer might use. If you're authoring layers, you can also use the `$meta` key to provide metadata that you or the consumers of your layer might use.
:: ::

View File

@ -54,6 +54,10 @@ const { data: count } = await useFetch('/api/count')
This composable is a wrapper around the [`useAsyncData`](/docs/api/composables/use-async-data) composable and `$fetch` utility. This composable is a wrapper around the [`useAsyncData`](/docs/api/composables/use-async-data) composable and `$fetch` utility.
::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=njsGVmcWviY" target="_blank"}
Watch the video from Alexander Lichter to avoid using `useFetch` the wrong way!
::
:read-more{to="/docs/api/composables/use-fetch"} :read-more{to="/docs/api/composables/use-fetch"}
:link-example{to="/docs/examples/features/data-fetching"} :link-example{to="/docs/examples/features/data-fetching"}
@ -93,6 +97,10 @@ The `useAsyncData` composable is responsible for wrapping async logic and return
It's developer experience sugar for the most common use case. It's developer experience sugar for the most common use case.
:: ::
::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=0X-aOpSGabA" target="_blank"}
Watch a video from Alexander Lichter to dig deeper into the difference between `useFetch` and `useAsyncData`.
::
There are some cases when using the [`useFetch`](/docs/api/composables/use-fetch) composable is not appropriate, for example when a CMS or a third-party provide their own query layer. In this case, you can use [`useAsyncData`](/docs/api/composables/use-async-data) to wrap your calls and still keep the benefits provided by the composable. There are some cases when using the [`useFetch`](/docs/api/composables/use-fetch) composable is not appropriate, for example when a CMS or a third-party provide their own query layer. In this case, you can use [`useAsyncData`](/docs/api/composables/use-async-data) to wrap your calls and still keep the benefits provided by the composable.
```vue [pages/users.vue] ```vue [pages/users.vue]

View File

@ -8,6 +8,10 @@ Nuxt provides the [`useState`](/docs/api/composables/use-state) composable to cr
[`useState`](/docs/api/composables/use-state) 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. [`useState`](/docs/api/composables/use-state) 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.
::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=mv0WcBABcIk" target="_blank"}
Watch a video from Alexander Lichter about why and when to use `useState()`.
::
::important ::important
Because the data inside [`useState`](/docs/api/composables/use-state) will be serialized to JSON, it is important that it does not contain anything that cannot be serialized, such as classes, functions or symbols. Because the data inside [`useState`](/docs/api/composables/use-state) will be serialized to JSON, it is important that it does not contain anything that cannot be serialized, such as classes, functions or symbols.
:: ::
@ -208,6 +212,10 @@ const color = useColor() // Same as useState('color')
</template> </template>
``` ```
::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=dZSNW07sO-A" target="_blank"}
Watch a video from Daniel Roe on how to deal with global state and SSR in Nuxt.
::
## Using third-party libraries ## Using third-party libraries
Nuxt **used to rely** on the Vuex library to provide global state management. If you are migrating from Nuxt 2, please head to [the migration guide](/docs/migration/configuration#vuex). Nuxt **used to rely** on the Vuex library to provide global state management. If you are migrating from Nuxt 2, please head to [the migration guide](/docs/migration/configuration#vuex).

View File

@ -20,6 +20,10 @@ Using Nitro gives Nuxt superpowers:
Nitro is internally using [h3](https://github.com/unjs/h3), a minimal H(TTP) framework built for high performance and portability. Nitro is internally using [h3](https://github.com/unjs/h3), a minimal H(TTP) framework built for high performance and portability.
::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=DkvgJa-X31k" target="_blank"}
Watch a video from Alexander Lichter to understand the responsibilities of Nuxt and Nitro in your application.
::
## Server Endpoints & Middleware ## Server Endpoints & Middleware
You can easily manage the server-only part of your Nuxt app, from API endpoints to middleware. You can easily manage the server-only part of your Nuxt app, from API endpoints to middleware.

View File

@ -51,7 +51,7 @@ Read more about layers in the **Layer Author Guide**.
Watch a video from Learn Vue about Nuxt Layers. Watch a video from Learn Vue about Nuxt Layers.
:: ::
::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=fr5yo3aVkfA&t=271s" target="_blank"} ::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=fr5yo3aVkfA" target="_blank"}
Watch a video from Alexander Lichter about Nuxt Layers. Watch a video from Alexander Lichter about Nuxt Layers.
:: ::

View File

@ -16,4 +16,7 @@ surround: false
::card{icon="i-ph-star-duotone" title="Going Further" to="/docs/guide/going-further"} ::card{icon="i-ph-star-duotone" title="Going Further" to="/docs/guide/going-further"}
Master Nuxt with advanced concepts like experimental features, hooks, modules, and more. Master Nuxt with advanced concepts like experimental features, hooks, modules, and more.
:: ::
::card{icon="i-ph-book-open-duotone" title="Recipes" to="/docs/guide/recipes"}
Find solutions to common problems and learn how to implement them in your Nuxt project.
::
:: ::

View File

@ -60,6 +60,10 @@ That means that (with very few exceptions) you cannot use them outside a Nuxt pl
If you get an error message like `Nuxt instance is unavailable` then it probably means you are calling a Nuxt composable in the wrong place in the Vue or Nuxt lifecycle. If you get an error message like `Nuxt instance is unavailable` then it probably means you are calling a Nuxt composable in the wrong place in the Vue or Nuxt lifecycle.
::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=ofuKRZLtOdY" target="_blank"}
Watch a video from Alexander Lichter about handling async code in composables and fixing `Nuxt instance is unavailable` in your app.
::
::read-more{to="/docs/guide/going-further/experimental-features#asynccontext" icon="i-ph-star-duotone"} ::read-more{to="/docs/guide/going-further/experimental-features#asynccontext" icon="i-ph-star-duotone"}
Checkout the `asyncContext` experimental feature to use Nuxt composables in async functions. Checkout the `asyncContext` experimental feature to use Nuxt composables in async functions.
:: ::
@ -168,3 +172,7 @@ export default defineNuxtConfig({
} }
}) })
``` ```
::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=FT2LQJ2NvVI" target="_blank"}
Watch a video from Alexander Lichter on how to easily set up custom auto imports.
::

View File

@ -65,6 +65,10 @@ This file contains the recommended basic TypeScript configuration for your proje
[Read more about how to extend this configuration](/docs/guide/directory-structure/tsconfig). [Read more about how to extend this configuration](/docs/guide/directory-structure/tsconfig).
::tip{icon="i-ph-video-duotone" to="https://youtu.be/umLI7SlPygY" target="_blank"}
Watch a video from Daniel Roe explaining built-in Nuxt aliases.
::
::note ::note
Nitro also [auto-generates types](/docs/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](/docs/guide/directory-structure/composables), plus other core functionality. Nitro also [auto-generates types](/docs/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](/docs/guide/directory-structure/composables), plus other core functionality.
:: ::

View File

@ -259,7 +259,7 @@ Watch Learn Vue video about Nuxt Server Components.
:: ::
::tip{icon="i-ph-article-duotone" to="https://roe.dev/blog/nuxt-server-components" target="_blank"} ::tip{icon="i-ph-article-duotone" to="https://roe.dev/blog/nuxt-server-components" target="_blank"}
Read Daniel Roe's guide to Nuxt server components Read Daniel Roe's guide to Nuxt Server Components.
:: ::
### Standalone server components ### Standalone server components

View File

@ -46,7 +46,11 @@ export default defineEventHandler(() => {
When starting Nuxt, the `hello` module will be registered and the `/api/hello` route will be available. When starting Nuxt, the `hello` module will be registered and the `/api/hello` route will be available.
Local modules are registered in alphabetical order. You can change the order by adding a number to the front of each directory name: Modules are executed in the following sequence:
- First, the modules defined in [`nuxt.config.ts`](/docs/api/nuxt-config#modules-1) are loaded.
- Then, modules found in the `modules/` directory are executed, and they load in alphabetical order.
You can change the order of local module by adding a number to the front of each directory name:
```bash [Directory structure] ```bash [Directory structure]
modules/ modules/

View File

@ -76,6 +76,10 @@ export default defineNuxtPlugin({
}) })
``` ```
::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=2aXZyXB1QGQ" target="_blank"}
Watch a video from Alexander Lichter about the Object Syntax for Nuxt plugins.
::
::note ::note
If you are using the object-syntax, the properties may be statically analyzed in future to produce a more optimized build. So you should not define them at runtime. :br If you are using the object-syntax, the properties may be statically analyzed in future to produce a more optimized build. So you should not define them at runtime. :br
For example, setting `enforce: import.meta.server ? 'pre' : 'post'` would defeat any future optimization Nuxt is able to do for your plugins. For example, setting `enforce: import.meta.server ? 'pre' : 'post'` would defeat any future optimization Nuxt is able to do for your plugins.

View File

@ -33,11 +33,25 @@ npx nuxi dev --dotenv .env.local
When updating `.env` in development mode, the Nuxt instance is automatically restarted to apply new values to the `process.env`. When updating `.env` in development mode, the Nuxt instance is automatically restarted to apply new values to the `process.env`.
## Production Preview ## Production
**After your server is built**, you are responsible for setting environment variables when you run the server. **After your server is built**, you are responsible for setting environment variables when you run the server.
Your `.env` file will not be read at this point. How you do this is different for every environment. Your `.env` files will not be read at this point. How you do this is different for every environment.
This design decision was made to ensure compatibility across various deployment environments, some of which may not have a traditional file system available, such as serverless platforms or edge networks like Cloudflare Workers.
Since `.env` files are not used in production, you must explicitly set environment variables using the tools and methods provided by your hosting environment. Here are some common approaches:
* You can pass the environment variables as arguments using the terminal:
`$ DATABASE_HOST=mydatabaseconnectionstring node .output/server/index.mjs`
* You can set environment variables in shell configuration files like `.bashrc` or `.profile`.
* Many cloud service providers, such as Vercel, Netlify, and AWS, provide interfaces for setting environment variables via their dashboards, CLI tools or configuration files.
## Production Preview
For local production preview purpose, we recommend using [`nuxi preview`](/docs/api/commands/preview) since using this command, the `.env` file will be loaded into `process.env` for convenience. Note that this command requires dependencies to be installed in the package directory. For local production preview purpose, we recommend using [`nuxi preview`](/docs/api/commands/preview) since using this command, the `.env` file will be loaded into `process.env` for convenience. Note that this command requires dependencies to be installed in the package directory.

View File

@ -306,6 +306,10 @@ Out of the box, this will enable typed usage of [`navigateTo`](/docs/api/utils/n
You can even get typed params within a page by using `const route = useRoute('route-name')`. You can even get typed params within a page by using `const route = useRoute('route-name')`.
::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=SXk-L19gTZk" target="_blank"}
Watch a video from Daniel Roe explaining type-safe routing in Nuxt.
::
## watcher ## watcher
Set an alternative watcher that will be used as the watching service for Nuxt. Set an alternative watcher that will be used as the watching service for Nuxt.
@ -340,6 +344,10 @@ export default defineNuxtConfig({
}) })
``` ```
::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=1jUupYHVvrU" target="_blank"}
Watch a video from Alexander Lichter about the experimental `sharedPrerenderData` setting.
::
It is particularly important when enabling this feature to make sure that any unique key of your data It is particularly important when enabling this feature to make sure that any unique key of your data
is always resolvable to the same data. For example, if you are using `useAsyncData` to fetch is always resolvable to the same data. For example, if you are using `useAsyncData` to fetch
data related to a particular page, you should provide a key that uniquely matches that data. (`useFetch` data related to a particular page, you should provide a key that uniquely matches that data. (`useFetch`
@ -378,6 +386,16 @@ This option allows exposing some route metadata defined in `definePageMeta` at b
This only works with static or strings/arrays rather than variables or conditional assignment. See [original issue](https://github.com/nuxt/nuxt/issues/24770) for more information and context. This only works with static or strings/arrays rather than variables or conditional assignment. See [original issue](https://github.com/nuxt/nuxt/issues/24770) for more information and context.
<!-- You can disable this feature if it causes issues in your project.
```ts twoslash [nuxt.config.ts]
export default defineNuxtConfig({
experimental: {
scanPageMeta: false
}
})
``` -->
## cookieStore ## cookieStore
Enables CookieStore support to listen for cookie updates (if supported by the browser) and refresh `useCookie` ref values. Enables CookieStore support to listen for cookie updates (if supported by the browser) and refresh `useCookie` ref values.

View File

@ -61,6 +61,10 @@ Setting the default of `runtimeConfig` values to *differently named environment
It is advised to use environment variables that match the structure of your `runtimeConfig` object. It is advised to use environment variables that match the structure of your `runtimeConfig` object.
:: ::
::tip{icon="i-ph-video-duotone" to="https://youtu.be/_FYV5WfiWvs" target="_blank"}
Watch a video from Alexander Lichter showcasing the top mistake developers make using runtimeConfig.
::
#### Example #### Example
```sh [.env] ```sh [.env]

View File

@ -15,6 +15,10 @@ Discover all Nuxt Kit utilities.
You can install the latest Nuxt Kit by adding it to the `dependencies` section of your `package.json`. However, please consider always explicitly installing the `@nuxt/kit` package even if it is already installed by Nuxt. You can install the latest Nuxt Kit by adding it to the `dependencies` section of your `package.json`. However, please consider always explicitly installing the `@nuxt/kit` package even if it is already installed by Nuxt.
::note
`@nuxt/kit` and `@nuxt/schema` are key dependencies for Nuxt. If you are installing it separately, make sure that the versions of `@nuxt/kit` and `@nuxt/schema` are equal to or greater than your `nuxt` version to avoid any unexpected behavior.
::
```json [package.json] ```json [package.json]
{ {
"dependencies": { "dependencies": {

View File

@ -0,0 +1,105 @@
---
navigation.title: 'Custom useFetch'
title: Custom useFetch in Nuxt
description: How to create a custom fetcher for calling your external API in Nuxt 3.
---
When working with Nuxt, you might be making the frontend and fetching an external API, and you might want to set some default options for fetching from your API.
The [`$fetch`](/docs/api/utils/dollarfetch) utility function (used by the [`useFetch`](/docs/api/composables/use-fetch) composable) is intentionally not globally configurable. This is important so that fetching behavior throughout your application remains consistent, and other integrations (like modules) can rely on the behavior of core utilities like `$fetch`.
However, Nuxt provides a way to create a custom fetcher for your API (or multiple fetchers if you have multiple APIs to call).
## Custom `$fetch`
Let's create a custom `$fetch` instance with a [Nuxt plugin](/docs/guide/directory-structure/plugins).
::note
`$fetch` is a configured instance of [ofetch](https://github.com/unjs/ofetch) which supports adding the base URL of your Nuxt server as well as direct function calls during SSR (avoiding HTTP roundtrips).
::
Let's pretend here that:
- The main API is https://api.nuxt.com
- We are storing the JWT token in a session with [nuxt-auth-utils](https://github.com/atinux/nuxt-auth-utils)
- If the API responds with a `401` status code, we redirect the user to the `/login` page
```ts [plugins/api.ts]
export default defineNuxtPlugin(() => {
const { session } = useUserSession()
const api = $fetch.create({
baseURL: 'https://api.nuxt.com',
onRequest({ request, options, error }) {
if (session.value?.token) {
const headers = options.headers ||= {}
if (Array.isArray(headers)) {
headers.push(['Authorization', `Bearer ${session.value?.token}`])
} else if (headers instanceof Headers) {
headers.set('Authorization', `Bearer ${session.value?.token}`)
} else {
headers.Authorization = `Bearer ${session.value?.token}`
}
}
},
async onResponseError({ response }) {
if (response.status === 401) {
await navigateTo('/login')
}
}
})
// Expose to useNuxtApp().$api
return {
provide: {
api
}
}
})
```
With this Nuxt plugin, `$api` is exposed from `useNuxtApp()` to make API calls directly from the Vue components:
```vue [app.vue]
<script setup>
const { $api } = useNuxtApp()
const { data: modules } = await useAsyncData('modules', () => $api('/modules'))
</script>
```
::callout
Wrapping with [`useAsyncData`](/docs/api/composables/use-async-data) **avoid double data fetching when doing server-side rendering** (server & client on hydration).
::
## Custom `useFetch`
Now that `$api` has the logic we want, let's create a `useAPI` composable to replace the usage of `useAsyncData` + `$api`:
```ts [composables/useAPI.ts]
import type { UseFetchOptions } from 'nuxt/app'
export function useAPI<T>(
url: string | (() => string),
options: Omit<UseFetchOptions<T>, 'default'> & { default: () => T | Ref<T> },
) {
return useFetch(url, {
...options,
$fetch: useNuxtApp().$api
})
}
```
Let's use the new composable and have a nice and clean component:
```vue [app.vue]
<script setup>
const { data: modules } = await useAPI('/modules')
</script>
```
::callout{icon="i-simple-icons-youtube" color="red" to="https://www.youtube.com/watch?v=jXH8Tr-exhI"}
Watch a video about custom `$fetch` and Repository Pattern in Nuxt.
::
::note
We are currently discussing to find a cleaner way to let you create a custom fetcher, see https://github.com/nuxt/nuxt/issues/14736.
::

View File

@ -25,6 +25,22 @@ In this example, we use `<NuxtLink>` component to link to another page of the ap
</template> </template>
``` ```
### Passing Params to Dynamic Routes
In this example, we pass the `id` param to link to the route `~/pages/posts/[id].vue`.
```vue [pages/index.vue]
<template>
<NuxtLink :to="{ name: 'posts-id', params: { id: 123 } }">
Post 123
</NuxtLink>
</template>
```
::tip
Check out the Pages panel in Nuxt DevTools to see the route name and the params it might take.
::
### Handling 404s ### Handling 404s
When using `<NuxtLink>` for `/public` directory files or when pointing to a different app on the same domain, you should use the `external` prop. When using `<NuxtLink>` for `/public` directory files or when pointing to a different app on the same domain, you should use the `external` prop.

View File

@ -30,6 +30,7 @@ You can pass custom HTML or components through the loading indicator's default s
## Props ## Props
- `color`: The color of the loading bar. It can be set to `false` to turn off explicit color styling. - `color`: The color of the loading bar. It can be set to `false` to turn off explicit color styling.
- `errorColor`: The color of the loading bar when `error` is set to `true`.
- `height`: Height of the loading bar, in pixels (default `3`). - `height`: Height of the loading bar, in pixels (default `3`).
- `duration`: Duration of the loading bar, in milliseconds (default `2000`). - `duration`: Duration of the loading bar, in milliseconds (default `2000`).
- `throttle`: Throttle the appearing and hiding, in milliseconds (default `200`). - `throttle`: Throttle the appearing and hiding, in milliseconds (default `200`).

View File

@ -59,13 +59,10 @@ Use these options to set the expiration of the cookie.
The given number will be converted to an integer by rounding down. By default, no maximum age is set. The given number will be converted to an integer by rounding down. By default, no maximum age is set.
`expires`: Specifies the `Date` object to be the value for the [`Expires` `Set-Cookie` attribute](https://tools.ietf.org/html/rfc6265#section-5.2.1). `expires`: Specifies the `Date` object to be the value for the [`Expires` `Set-Cookie` attribute](https://tools.ietf.org/html/rfc6265#section-5.2.1).
By default, no expiration is set. Most clients will consider this a "non-persistent cookie" and By default, no expiration is set. Most clients will consider this a "non-persistent cookie" and will delete it on a condition like exiting a web browser application.
will delete it on a condition like exiting a web browser application.
::note ::note
The [cookie storage model specification](https://tools.ietf.org/html/rfc6265#section-5.3) states that if both `expires` and The [cookie storage model specification](https://tools.ietf.org/html/rfc6265#section-5.3) states that if both `expires` and `maxAge` is set, then `maxAge` takes precedence, but not all clients may obey this, so if both are set, they should point to the same date and time!
`maxAge` is set, then `maxAge` takes precedence, but not all clients may obey this,
so if both are set, they should point to the same date and time!
:: ::
::note ::note
@ -74,22 +71,29 @@ If neither of `expires` and `maxAge` is set, the cookie will be session-only and
### `httpOnly` ### `httpOnly`
Specifies the `boolean` value for the [`HttpOnly` `Set-Cookie` attribute](https://tools.ietf.org/html/rfc6265#section-5.2.6). When truthy, Specifies the `boolean` value for the [`HttpOnly` `Set-Cookie` attribute](https://tools.ietf.org/html/rfc6265#section-5.2.6). When truthy, the `HttpOnly` attribute is set; otherwise it is not. By default, the `HttpOnly` attribute is not set.
the `HttpOnly` attribute is set; otherwise it is not. By default, the `HttpOnly` attribute is not set.
::warning ::warning
Be careful when setting this to `true`, as compliant clients will not allow client-side Be careful when setting this to `true`, as compliant clients will not allow client-side JavaScript to see the cookie in `document.cookie`.
JavaScript to see the cookie in `document.cookie`.
:: ::
### `secure` ### `secure`
Specifies the `boolean` value for the [`Secure` `Set-Cookie` attribute](https://tools.ietf.org/html/rfc6265#section-5.2.5). When truthy, Specifies the `boolean` value for the [`Secure` `Set-Cookie` attribute](https://tools.ietf.org/html/rfc6265#section-5.2.5). When truthy, the `Secure` attribute is set; otherwise it is not. By default, the `Secure` attribute is not set.
the `Secure` attribute is set; otherwise it is not. By default, the `Secure` attribute is not set.
::warning ::warning
Be careful when setting this to `true`, as compliant clients will not send the cookie back to Be careful when setting this to `true`, as compliant clients will not send the cookie back to the server in the future if the browser does not have an HTTPS connection. This can lead to hydration errors.
the server in the future if the browser does not have an HTTPS connection. This can lead to hydration errors. ::
### `partitioned`
Specifies the `boolean` value for the [`Partitioned` `Set-Cookie`](https://datatracker.ietf.org/doc/html/draft-cutler-httpbis-partitioned-cookies#section-2.1) attribute. When truthy, the `Partitioned` attribute is set, otherwise it is not. By default, the `Partitioned` attribute is not set.
::note
This is an attribute that has not yet been fully standardized, and may change in the future.
This also means many clients may ignore this attribute until they understand it.
More information can be found in the [proposal](https://github.com/privacycg/CHIPS).
:: ::
### `domain` ### `domain`
@ -114,23 +118,18 @@ More information about the different enforcement levels can be found in [the spe
### `encode` ### `encode`
Specifies a function that will be used to encode a cookie's value. Since the value of a cookie Specifies a function that will be used to encode a cookie's value. Since the value of a cookie has a limited character set (and must be a simple string), this function can be used to encode a value into a string suited for a cookie's value.
has a limited character set (and must be a simple string), this function can be used to encode
a value into a string suited for a cookie's value.
The default encoder is the `JSON.stringify` + `encodeURIComponent`. The default encoder is the `JSON.stringify` + `encodeURIComponent`.
### `decode` ### `decode`
Specifies a function that will be used to decode a cookie's value. Since the value of a cookie Specifies a function that will be used to decode a cookie's value. Since the value of a cookie has a limited character set (and must be a simple string), this function can be used to decode a previously encoded cookie value into a JavaScript string or other object.
has a limited character set (and must be a simple string), this function can be used to decode
a previously encoded cookie value into a JavaScript string or other object.
The default decoder is `decodeURIComponent` + [destr](https://github.com/unjs/destr). The default decoder is `decodeURIComponent` + [destr](https://github.com/unjs/destr).
::note ::note
If an error is thrown from this function, the original, non-decoded cookie value will If an error is thrown from this function, the original, non-decoded cookie value will be returned as the cookie's value.
be returned as the cookie's value.
:: ::
### `default` ### `default`

View File

@ -66,6 +66,10 @@ const { data, pending, error, refresh } = await useFetch('/api/auth/login', {
`useFetch` is a reserved function name transformed by the compiler, so you should not name your own function `useFetch`. `useFetch` is a reserved function name transformed by the compiler, so you should not name your own function `useFetch`.
:: ::
::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=njsGVmcWviY" target="_blank"}
Watch the video from Alexander Lichter to avoid using `useFetch` the wrong way!
::
:link-example{to="/docs/examples/advanced/use-custom-fetch-composable"} :link-example{to="/docs/examples/advanced/use-custom-fetch-composable"}
:read-more{to="/docs/getting-started/data-fetching"} :read-more{to="/docs/getting-started/data-fetching"}
@ -83,6 +87,8 @@ const { data, pending, error, refresh } = await useFetch('/api/auth/login', {
- `headers`: Request headers. - `headers`: Request headers.
- `baseURL`: Base URL for the request. - `baseURL`: Base URL for the request.
- `timeout`: Milliseconds to automatically abort request - `timeout`: Milliseconds to automatically abort request
- `cache`: Handles cache control according to [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/fetch#cache)
- You can pass boolean to disable the cache or you can pass one of the following values: `default`, `no-store`, `reload`, `no-cache`, `force-cache`, and `only-if-cached`.
::note ::note
All fetch options can be given a `computed` or `ref` value. These will be watched and new requests made automatically with any new values if they are updated. All fetch options can be given a `computed` or `ref` value. These will be watched and new requests made automatically with any new values if they are updated.

View File

@ -26,6 +26,11 @@ It hooks into [`page:loading:start`](/docs/api/advanced/hooks#app-hooks-runtime)
- **type**: `Ref<boolean>` - **type**: `Ref<boolean>`
- **description**: The loading state - **description**: The loading state
### `error`
- **type**: `Ref<boolean>`
- **description**: The error state
### `progress` ### `progress`
- **type**: `Ref<number>` - **type**: `Ref<number>`
@ -39,7 +44,7 @@ Set `isLoading` to true and start to increase the `progress` value.
### `finish()` ### `finish()`
Set the `progress` value to `100`, stop all timers and intervals then reset the loading state `500` ms later. `finish` accepts a `{ force: true }` option to skip the interval before the state is reset. Set the `progress` value to `100`, stop all timers and intervals then reset the loading state `500` ms later. `finish` accepts a `{ force: true }` option to skip the interval before the state is reset, and `{ error: true }` to change the loading bar color and set the error property to true.
### `clear()` ### `clear()`

View File

@ -138,6 +138,10 @@ Nuxt exposes the following properties through `ssrContext`:
Since [Nuxt v3.4](https://nuxt.com/blog/v3-4#payload-enhancements), it is possible to define your own reducer/reviver for types that are not supported by Nuxt. Since [Nuxt v3.4](https://nuxt.com/blog/v3-4#payload-enhancements), it is possible to define your own reducer/reviver for types that are not supported by Nuxt.
::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=8w6ffRBs8a4" target="_blank"}
Watch a video from Alexander Lichter about serializing payloads, especially with regards to classes.
::
In the example below, we define a reducer (or a serializer) and a reviver (or deserializer) for the [Luxon](https://moment.github.io/luxon/#/) DateTime class, using a payload plugin. In the example below, we define a reducer (or a serializer) and a reviver (or deserializer) for the [Luxon](https://moment.github.io/luxon/#/) DateTime class, using a payload plugin.
```ts [plugins/date-time-payload.ts] ```ts [plugins/date-time-payload.ts]

View File

@ -25,6 +25,10 @@ Because the data inside `useState` will be serialized to JSON, it is important t
`useState` is a reserved function name transformed by the compiler, so you should not name your own function `useState`. `useState` is a reserved function name transformed by the compiler, so you should not name your own function `useState`.
:: ::
::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=mv0WcBABcIk" target="_blank"}
Watch a video from Alexander Lichter about why and when to use `useState()`.
::
## Using `shallowRef` ## Using `shallowRef`
If you don't need your state to be deeply reactive, you can combine `useState` with [`shallowRef`](https://vuejs.org/api/reactivity-advanced.html#shallowref). This can improve performance when your state contains large objects and arrays. If you don't need your state to be deeply reactive, you can combine `useState` with [`shallowRef`](https://vuejs.org/api/reactivity-advanced.html#shallowref). This can improve performance when your state contains large objects and arrays.

View File

@ -32,6 +32,10 @@ We'll do our best to follow our [internal issue decision making flowchart](https
### Send a Pull Request ### Send a Pull Request
::Tip
On windows, you need to clone the repository with `git clone -c core.symlinks=true https://github.com/nuxt/nuxt.git` to make symlinks work.
::
We always welcome pull requests! ❤️ We always welcome pull requests! ❤️
#### Before You Start #### Before You Start

View File

@ -38,12 +38,12 @@ Translations | - | [nuxt/translations#4](https://github.com/nuxt/tra
In addition to the Nuxt framework, there are modules that are vital for the ecosystem. Their status will be updated below. In addition to the Nuxt framework, there are modules that are vital for the ecosystem. Their status will be updated below.
Module | Status | Nuxt Support | Repository | Description Module | Status | Nuxt Support | Repository | Description
---------------|---------------------|--------------|------------|------------------- ------------------------------------|---------------------|--------------|------------|-------------------
Scripts | April 2024 | 3.x | `nuxt/scripts` to be announced | Easy 3rd party script management. [nuxt/nuxt#22016](https://github.com/nuxt/nuxt/discussions/22016) [Scripts](https://scripts.nuxt.com) | Public Preview | 3.x | [nuxt/scripts](https://github.com/nuxt/scripts) | Easy 3rd party script management.
A11y | Planned | 3.x | `nuxt/a11y` to be announced | Accessibility hinting and utilities [nuxt/nuxt#23255](https://github.com/nuxt/nuxt/issues/23255) A11y | Planned | 3.x | `nuxt/a11y` to be announced | Accessibility hinting and utilities [nuxt/nuxt#23255](https://github.com/nuxt/nuxt/issues/23255)
Auth | Planned | 3.x | `nuxt/auth` to be announced | Nuxt 3 support is planned after session support Auth | Planned | 3.x | `nuxt/auth` to be announced | Nuxt 3 support is planned after session support.
Hints | Planned | 3.x | `nuxt/hints` to be announced | Guidance and suggestions for enhancing development practices Hints | Planned | 3.x | `nuxt/hints` to be announced | Guidance and suggestions for enhancing development practices.
## Release Cycle ## Release Cycle
@ -64,9 +64,9 @@ Each active version has its own nightly releases which are generated automatical
Release | | Initial release | End Of Life | Docs Release | | Initial release | End Of Life | Docs
----------------------------------------|---------------------------------------------------------------------------------------------------|-----------------|--------------|------- ----------------------------------------|---------------------------------------------------------------------------------------------------|-----------------|--------------|-------
**4.x** (scheduled) | | 2024 Q2 | | &nbsp; **4.x** (scheduled) | | 2024 Q2 | | &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="></a> | 2022-11-16 | TBA | [nuxt.com](/docs) **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** (maintenance) | <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="></a> | 2018-09-21 | 2024-06-30 | [v2.nuxt.com](https://v2.nuxt.com/docs) **2.x** (maintenance) | <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="></a> | 2018-01-08 | 2019-09-21 | &nbsp; **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;
### Support Status ### Support Status

View File

@ -68,6 +68,16 @@ navigation.icon: i-ph-notification-duotone
::card ::card
--- ---
icon: i-simple-icons-github icon: i-simple-icons-github
title: nuxt/scripts
to: https://github.com/nuxt/scripts/tags
target: _blank
ui.icon.base: text-black dark:text-white
---
Nuxt Scripts releases. (Public Preview)
::
::card
---
icon: i-simple-icons-github
title: nuxt/ui title: nuxt/ui
to: https://github.com/nuxt/ui/releases to: https://github.com/nuxt/ui/releases
target: _blank target: _blank

View File

@ -20,6 +20,7 @@
"lint:knip": "pnpx knip", "lint:knip": "pnpx knip",
"play": "nuxi dev playground", "play": "nuxi dev playground",
"play:build": "nuxi build playground", "play:build": "nuxi build playground",
"play:generate": "nuxi generate playground",
"play:preview": "nuxi preview playground", "play:preview": "nuxi preview playground",
"test": "pnpm test:fixtures && pnpm test:fixtures:dev && pnpm test:fixtures:webpack && pnpm test:unit && pnpm test:runtime && pnpm test:types && pnpm typecheck", "test": "pnpm test:fixtures && pnpm test:fixtures:dev && pnpm test:fixtures:webpack && pnpm test:unit && pnpm test:runtime && pnpm test:types && pnpm typecheck",
"test:prepare": "jiti ./test/prepare.ts", "test:prepare": "jiti ./test/prepare.ts",
@ -40,20 +41,20 @@
"@nuxt/webpack-builder": "workspace:*", "@nuxt/webpack-builder": "workspace:*",
"magic-string": "^0.30.10", "magic-string": "^0.30.10",
"nuxt": "workspace:*", "nuxt": "workspace:*",
"rollup": "^4.17.2", "rollup": "^4.18.0",
"vite": "5.2.11", "vite": "5.2.12",
"vue": "3.4.27" "vue": "3.4.27"
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "9.2.0", "@eslint/js": "9.3.0",
"@nuxt/eslint-config": "0.3.12", "@nuxt/eslint-config": "0.3.13",
"@nuxt/kit": "workspace:*", "@nuxt/kit": "workspace:*",
"@nuxt/test-utils": "3.12.1", "@nuxt/test-utils": "3.13.1",
"@nuxt/webpack-builder": "workspace:*", "@nuxt/webpack-builder": "workspace:*",
"@testing-library/vue": "8.0.3", "@testing-library/vue": "8.1.0",
"@types/eslint__js": "8.42.3", "@types/eslint__js": "8.42.3",
"@types/fs-extra": "11.0.4", "@types/fs-extra": "11.0.4",
"@types/node": "20.12.11", "@types/node": "20.12.13",
"@types/semver": "7.5.8", "@types/semver": "7.5.8",
"@vitest/coverage-v8": "1.6.0", "@vitest/coverage-v8": "1.6.0",
"@vue/test-utils": "2.4.6", "@vue/test-utils": "2.4.6",
@ -61,25 +62,25 @@
"changelogen": "0.5.5", "changelogen": "0.5.5",
"consola": "3.2.3", "consola": "3.2.3",
"devalue": "5.0.0", "devalue": "5.0.0",
"eslint": "9.2.0", "eslint": "9.3.0",
"eslint-plugin-no-only-tests": "3.1.0", "eslint-plugin-no-only-tests": "3.1.0",
"eslint-plugin-perfectionist": "2.10.0", "eslint-plugin-perfectionist": "2.10.0",
"eslint-typegen": "0.2.4", "eslint-typegen": "0.2.4",
"execa": "9.0.1", "execa": "9.1.0",
"fs-extra": "11.2.0", "fs-extra": "11.2.0",
"globby": "14.0.1", "globby": "14.0.1",
"h3": "1.11.1", "h3": "1.11.1",
"happy-dom": "14.10.1", "happy-dom": "14.12.0",
"jiti": "1.21.0", "jiti": "1.21.0",
"markdownlint-cli": "0.40.0", "markdownlint-cli": "0.41.0",
"nitropack": "2.9.6", "nitropack": "2.9.6",
"nuxi": "3.11.1", "nuxi": "3.11.1",
"nuxt": "workspace:*", "nuxt": "workspace:*",
"nuxt-content-twoslash": "0.0.10", "nuxt-content-twoslash": "0.0.10",
"ofetch": "1.3.4", "ofetch": "1.3.4",
"pathe": "1.1.2", "pathe": "1.1.2",
"playwright-core": "1.44.0", "playwright-core": "1.44.1",
"rimraf": "5.0.5", "rimraf": "5.0.7",
"semver": "7.6.2", "semver": "7.6.2",
"std-env": "3.7.0", "std-env": "3.7.0",
"typescript": "5.4.5", "typescript": "5.4.5",
@ -88,9 +89,9 @@
"vitest-environment-nuxt": "1.0.0", "vitest-environment-nuxt": "1.0.0",
"vue": "3.4.27", "vue": "3.4.27",
"vue-router": "4.3.2", "vue-router": "4.3.2",
"vue-tsc": "2.0.16" "vue-tsc": "2.0.19"
}, },
"packageManager": "pnpm@9.1.0", "packageManager": "pnpm@9.1.3",
"engines": { "engines": {
"node": "^16.10.0 || >=18.0.0" "node": "^16.10.0 || >=18.0.0"
}, },

View File

@ -44,7 +44,7 @@
"semver": "^7.6.2", "semver": "^7.6.2",
"ufo": "^1.5.3", "ufo": "^1.5.3",
"unctx": "^2.3.1", "unctx": "^2.3.1",
"unimport": "^3.7.1", "unimport": "^3.7.2",
"untyped": "^1.4.2" "untyped": "^1.4.2"
}, },
"devDependencies": { "devDependencies": {
@ -54,7 +54,7 @@
"lodash-es": "4.17.21", "lodash-es": "4.17.21",
"nitropack": "2.9.6", "nitropack": "2.9.6",
"unbuild": "latest", "unbuild": "latest",
"vite": "5.2.11", "vite": "5.2.12",
"vitest": "1.6.0", "vitest": "1.6.0",
"webpack": "5.91.0" "webpack": "5.91.0"
}, },

View File

@ -4,7 +4,7 @@ import type { Nuxt, NuxtCompatibility, NuxtCompatibilityIssues } from '@nuxt/sch
import { useNuxt } from './context' import { useNuxt } from './context'
export function normalizeSemanticVersion (version: string) { export function normalizeSemanticVersion (version: string) {
return version.replace(/-[0-9]+\.[0-9a-f]+/, '') // Remove edge prefix return version.replace(/-\d+\.[0-9a-f]+/, '') // Remove edge prefix
} }
const builderMap = { const builderMap = {

View File

@ -27,7 +27,7 @@ export async function compileTemplate<T> (template: NuxtTemplate<T>, ctx: any) {
} }
/** @deprecated */ /** @deprecated */
const serialize = (data: any) => JSON.stringify(data, null, 2).replace(/"{(.+)}"(?=,?$)/gm, r => JSON.parse(r).replace(/^{(.*)}$/, '$1')) const serialize = (data: any) => JSON.stringify(data, null, 2).replace(/"\{(.+)\}"(?=,?$)/gm, r => JSON.parse(r).replace(/^\{(.*)\}$/, '$1'))
/** @deprecated */ /** @deprecated */
const importSources = (sources: string | string[], { lazy = false } = {}) => { const importSources = (sources: string | string[], { lazy = false } = {}) => {

View File

@ -4,6 +4,8 @@ import type { ConfigLayer, ConfigLayerMeta, LoadConfigOptions } from 'c12'
import { loadConfig } from 'c12' import { loadConfig } from 'c12'
import type { NuxtConfig, NuxtOptions } from '@nuxt/schema' import type { NuxtConfig, NuxtOptions } from '@nuxt/schema'
import { NuxtConfigSchema } from '@nuxt/schema' import { NuxtConfigSchema } from '@nuxt/schema'
import { globby } from 'globby'
import defu from 'defu'
export interface LoadNuxtConfigOptions extends LoadConfigOptions<NuxtConfig> {} export interface LoadNuxtConfigOptions extends LoadConfigOptions<NuxtConfig> {}
@ -11,12 +13,19 @@ const layerSchemaKeys = ['future', 'srcDir', 'rootDir', 'dir']
const layerSchema = Object.fromEntries(Object.entries(NuxtConfigSchema).filter(([key]) => layerSchemaKeys.includes(key))) const layerSchema = Object.fromEntries(Object.entries(NuxtConfigSchema).filter(([key]) => layerSchemaKeys.includes(key)))
export async function loadNuxtConfig (opts: LoadNuxtConfigOptions): Promise<NuxtOptions> { export async function loadNuxtConfig (opts: LoadNuxtConfigOptions): Promise<NuxtOptions> {
// Automatically detect and import layers from `~~/layers/` directory
opts.overrides = defu(opts.overrides, {
_extends: await globby('layers/*', {
onlyDirectories: true,
cwd: opts.cwd || process.cwd(),
}),
});
(globalThis as any).defineNuxtConfig = (c: any) => c (globalThis as any).defineNuxtConfig = (c: any) => c
const result = await loadConfig<NuxtConfig>({ const result = await loadConfig<NuxtConfig>({
name: 'nuxt', name: 'nuxt',
configFile: 'nuxt.config', configFile: 'nuxt.config',
rcFile: '.nuxtrc', rcFile: '.nuxtrc',
extend: { extendKey: ['theme', 'extends'] }, extend: { extendKey: ['theme', 'extends', '_extends'] },
dotenv: true, dotenv: true,
globalRc: true, globalRc: true,
...opts, ...opts,

View File

@ -73,8 +73,8 @@ export function defineNuxtModule<OptionsT extends ModuleOptions> (definition: Mo
const key = `nuxt:module:${uniqueKey || (Math.round(Math.random() * 10000))}` const key = `nuxt:module:${uniqueKey || (Math.round(Math.random() * 10000))}`
const mark = performance.mark(key) const mark = performance.mark(key)
const res = await module.setup?.call(null as any, _options, nuxt) ?? {} const res = await module.setup?.call(null as any, _options, nuxt) ?? {}
const perf = performance.measure(key, mark?.name) // TODO: remove when Node 14 reaches EOL const perf = performance.measure(key, mark.name)
const setupTime = perf ? Math.round((perf.duration * 100)) / 100 : 0 // TODO: remove when Node 14 reaches EOL const setupTime = Math.round((perf.duration * 100)) / 100
// Measure setup time // Measure setup time
if (setupTime > 5000 && uniqueKey !== '@nuxt/telemetry') { if (setupTime > 5000 && uniqueKey !== '@nuxt/telemetry') {

View File

@ -3,7 +3,6 @@ import type { NuxtPlugin, NuxtPluginTemplate } from '@nuxt/schema'
import { useNuxt } from './context' import { useNuxt } from './context'
import { addTemplate } from './template' import { addTemplate } from './template'
import { resolveAlias } from './resolve' import { resolveAlias } from './resolve'
import { logger } from './logger'
/** /**
* Normalize a nuxt plugin object * Normalize a nuxt plugin object
@ -20,12 +19,6 @@ export function normalizePlugin (plugin: NuxtPlugin | string): NuxtPlugin {
throw new Error('Invalid plugin. src option is required: ' + JSON.stringify(plugin)) throw new Error('Invalid plugin. src option is required: ' + JSON.stringify(plugin))
} }
// TODO: only scan top-level files #18418
const nonTopLevelPlugin = plugin.src.match(/\/plugins\/[^/]+\/index\.[^/]+$/i)
if (nonTopLevelPlugin && nonTopLevelPlugin.length > 0 && !useNuxt().options.plugins.find(i => (typeof i === 'string' ? i : i.src).endsWith(nonTopLevelPlugin[0]))) {
logger.warn(`[deprecation] You are using a plugin that is within a subfolder of your plugins directory without adding it to your config explicitly. You can move it to the top-level plugins directory, or include the file '~${nonTopLevelPlugin[0]}' in your plugins config (https://nuxt.com/docs/api/nuxt-config#plugins-1) to remove this warning.`)
}
// Normalize full path to plugin // Normalize full path to plugin
plugin.src = normalize(resolveAlias(plugin.src)) plugin.src = normalize(resolveAlias(plugin.src))

View File

@ -36,12 +36,12 @@ export function updateRuntimeConfig (runtimeConfig: Record<string, unknown>) {
} }
/** /**
* @internal
*
* https://github.com/unjs/nitro/blob/main/src/runtime/utils.env.ts. * https://github.com/unjs/nitro/blob/main/src/runtime/utils.env.ts.
* *
* These utils will be replaced by util exposed from nitropack. See https://github.com/unjs/nitro/pull/2404 * These utils will be replaced by util exposed from nitropack. See https://github.com/unjs/nitro/pull/2404
* for more context and future plans.) * for more context and future plans.)
*
* @internal
*/ */
type EnvOptions = { type EnvOptions = {
@ -94,7 +94,7 @@ function applyEnv (
return obj return obj
} }
const envExpandRx = /{{(.*?)}}/g const envExpandRx = /\{\{(.*?)\}\}/g
function _expandFromEnv (value: string, env: Record<string, any> = process.env) { function _expandFromEnv (value: string, env: Record<string, any> = process.env) {
return value.replace(envExpandRx, (match, key) => { return value.replace(envExpandRx, (match, key) => {

View File

@ -202,7 +202,7 @@ export async function _generateTypes (nuxt: Nuxt) {
} else { } else {
const path = stats?.isFile() const path = stats?.isFile()
// remove extension // remove extension
? relativePath.replace(/(?<=\w)\.\w+$/g, '') ? relativePath.replace(/\b\.\w+$/g, '')
// non-existent file probably shouldn't be resolved // non-existent file probably shouldn't be resolved
: aliases[alias] : aliases[alias]
@ -230,7 +230,7 @@ export async function _generateTypes (nuxt: Nuxt) {
tsConfig.compilerOptions!.paths[alias] = await Promise.all(paths.map(async (path: string) => { tsConfig.compilerOptions!.paths[alias] = await Promise.all(paths.map(async (path: string) => {
if (!isAbsolute(path)) { return path } if (!isAbsolute(path)) { return path }
const stats = await fsp.stat(path).catch(() => null /* file does not exist */) const stats = await fsp.stat(path).catch(() => null /* file does not exist */)
return relativeWithDot(nuxt.options.buildDir, stats?.isFile() ? path.replace(/(?<=\w)\.\w+$/g, '') /* remove extension */ : path) return relativeWithDot(nuxt.options.buildDir, stats?.isFile() ? path.replace(/\b\.\w+$/g, '') /* remove extension */ : path)
})) }))
} }

View File

@ -60,14 +60,14 @@
}, },
"dependencies": { "dependencies": {
"@nuxt/devalue": "^2.0.2", "@nuxt/devalue": "^2.0.2",
"@nuxt/devtools": "^1.2.0", "@nuxt/devtools": "^1.3.2",
"@nuxt/kit": "workspace:*", "@nuxt/kit": "workspace:*",
"@nuxt/schema": "workspace:*", "@nuxt/schema": "workspace:*",
"@nuxt/telemetry": "^2.5.4", "@nuxt/telemetry": "^2.5.4",
"@nuxt/vite-builder": "workspace:*", "@nuxt/vite-builder": "workspace:*",
"@unhead/dom": "^1.9.10", "@unhead/dom": "^1.9.11",
"@unhead/ssr": "^1.9.10", "@unhead/ssr": "^1.9.11",
"@unhead/vue": "^1.9.10", "@unhead/vue": "^1.9.11",
"@vue/shared": "^3.4.27", "@vue/shared": "^3.4.27",
"acorn": "8.11.3", "acorn": "8.11.3",
"c12": "^1.10.0", "c12": "^1.10.0",
@ -76,7 +76,7 @@
"defu": "^6.1.4", "defu": "^6.1.4",
"destr": "^2.0.3", "destr": "^2.0.3",
"devalue": "^5.0.0", "devalue": "^5.0.0",
"esbuild": "^0.21.1", "esbuild": "^0.21.4",
"escape-string-regexp": "^5.0.0", "escape-string-regexp": "^5.0.0",
"estree-walker": "^3.0.3", "estree-walker": "^3.0.3",
"fs-extra": "^11.2.0", "fs-extra": "^11.2.0",
@ -99,6 +99,7 @@
"pkg-types": "^1.1.1", "pkg-types": "^1.1.1",
"radix3": "^1.1.2", "radix3": "^1.1.2",
"scule": "^1.3.0", "scule": "^1.3.0",
"semver": "^7.6.2",
"std-env": "^3.7.0", "std-env": "^3.7.0",
"strip-literal": "^2.1.0", "strip-literal": "^2.1.0",
"ufo": "^1.5.3", "ufo": "^1.5.3",
@ -106,7 +107,7 @@
"uncrypto": "^0.1.3", "uncrypto": "^0.1.3",
"unctx": "^2.3.1", "unctx": "^2.3.1",
"unenv": "^1.9.0", "unenv": "^1.9.0",
"unimport": "^3.7.1", "unimport": "^3.7.2",
"unplugin": "^1.10.1", "unplugin": "^1.10.1",
"unplugin-vue-router": "^0.7.0", "unplugin-vue-router": "^0.7.0",
"unstorage": "^1.10.2", "unstorage": "^1.10.2",
@ -117,13 +118,13 @@
"vue-router": "^4.3.2" "vue-router": "^4.3.2"
}, },
"devDependencies": { "devDependencies": {
"@nuxt/ui-templates": "1.3.3", "@nuxt/ui-templates": "1.3.4",
"@parcel/watcher": "2.4.1", "@parcel/watcher": "2.4.1",
"@types/estree": "1.0.5", "@types/estree": "1.0.5",
"@types/fs-extra": "11.0.4", "@types/fs-extra": "11.0.4",
"@vitejs/plugin-vue": "5.0.4", "@vitejs/plugin-vue": "5.0.4",
"unbuild": "latest", "unbuild": "latest",
"vite": "5.2.11", "vite": "5.2.12",
"vitest": "1.6.0" "vitest": "1.6.0"
}, },
"peerDependencies": { "peerDependencies": {

View File

@ -20,20 +20,24 @@ export default defineComponent({
type: [String, Boolean], type: [String, Boolean],
default: 'repeating-linear-gradient(to right,#00dc82 0%,#34cdfe 50%,#0047e1 100%)', default: 'repeating-linear-gradient(to right,#00dc82 0%,#34cdfe 50%,#0047e1 100%)',
}, },
errorColor: {
type: String,
default: 'repeating-linear-gradient(to right,#f87171 0%,#ef4444 100%)',
},
estimatedProgress: { estimatedProgress: {
type: Function as unknown as () => (duration: number, elapsed: number) => number, type: Function as unknown as () => (duration: number, elapsed: number) => number,
required: false, required: false,
}, },
}, },
setup (props, { slots, expose }) { setup (props, { slots, expose }) {
const { progress, isLoading, start, finish, clear } = useLoadingIndicator({ const { progress, isLoading, error, start, finish, clear } = useLoadingIndicator({
duration: props.duration, duration: props.duration,
throttle: props.throttle, throttle: props.throttle,
estimatedProgress: props.estimatedProgress, estimatedProgress: props.estimatedProgress,
}) })
expose({ expose({
progress, isLoading, start, finish, clear, progress, isLoading, error, start, finish, clear,
}) })
return () => h('div', { return () => h('div', {
@ -47,7 +51,7 @@ export default defineComponent({
width: 'auto', width: 'auto',
height: `${props.height}px`, height: `${props.height}px`,
opacity: isLoading.value ? 1 : 0, opacity: isLoading.value ? 1 : 0,
background: props.color || undefined, background: error.value ? props.errorColor : props.color || undefined,
backgroundSize: `${(100 / progress.value) * 100}% auto`, backgroundSize: `${(100 / progress.value) * 100}% auto`,
transform: `scaleX(${progress.value}%)`, transform: `scaleX(${progress.value}%)`,
transformOrigin: 'left', transformOrigin: 'left',

View File

@ -1,7 +1,8 @@
<template> <template>
<Suspense @resolve="onResolve"> <Suspense @resolve="onResolve">
<div v-if="abortRender" />
<ErrorComponent <ErrorComponent
v-if="error" v-else-if="error"
:error="error" :error="error"
/> />
<IslandRenderer <IslandRenderer
@ -53,6 +54,8 @@ if (import.meta.dev && results && results.some(i => i && 'then' in i)) {
// error handling // error handling
const error = useError() const error = useError()
// render an empty <div> when plugins have thrown an error but we're not yet rendering the error page
const abortRender = import.meta.server && error.value && !nuxtApp.ssrContext.error
onErrorCaptured((err, target, info) => { onErrorCaptured((err, target, info) => {
nuxtApp.hooks.callHook('vue:error', err, target, info).catch(hookError => console.error('[nuxt] Error in `vue:error` hook', hookError)) nuxtApp.hooks.callHook('vue:error', err, target, info).catch(hookError => console.error('[nuxt] Error in `vue:error` hook', hookError))
if (import.meta.server || (isNuxtError(err) && (err.fatal || err.unhandled))) { if (import.meta.server || (isNuxtError(err) && (err.fatal || err.unhandled))) {

View File

@ -8,7 +8,10 @@ import { createError } from './error'
import { onNuxtReady } from './ready' import { onNuxtReady } from './ready'
// @ts-expect-error virtual file // @ts-expect-error virtual file
import { asyncDataDefaults } from '#build/nuxt.config.mjs' import { asyncDataDefaults, resetAsyncDataToUndefined } from '#build/nuxt.config.mjs'
// TODO: temporary module for backwards compatibility
import type { DefaultAsyncDataErrorValue, DefaultAsyncDataValue } from '#app/defaults'
export type AsyncDataRequestStatus = 'idle' | 'pending' | 'success' | 'error' export type AsyncDataRequestStatus = 'idle' | 'pending' | 'success' | 'error'
@ -42,7 +45,7 @@ export interface AsyncDataOptions<
ResT, ResT,
DataT = ResT, DataT = ResT,
PickKeys extends KeysOf<DataT> = KeysOf<DataT>, PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
DefaultT = null, DefaultT = DefaultAsyncDataValue,
> { > {
/** /**
* Whether to fetch on the server side. * Whether to fetch on the server side.
@ -117,7 +120,7 @@ export interface _AsyncData<DataT, ErrorT> {
refresh: (opts?: AsyncDataExecuteOptions) => Promise<void> refresh: (opts?: AsyncDataExecuteOptions) => Promise<void>
execute: (opts?: AsyncDataExecuteOptions) => Promise<void> execute: (opts?: AsyncDataExecuteOptions) => Promise<void>
clear: () => void clear: () => void
error: Ref<ErrorT | null> error: Ref<ErrorT | DefaultAsyncDataErrorValue>
status: Ref<AsyncDataRequestStatus> status: Ref<AsyncDataRequestStatus>
} }
@ -138,11 +141,11 @@ export function useAsyncData<
NuxtErrorDataT = unknown, NuxtErrorDataT = unknown,
DataT = ResT, DataT = ResT,
PickKeys extends KeysOf<DataT> = KeysOf<DataT>, PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
DefaultT = null, DefaultT = DefaultAsyncDataValue,
> ( > (
handler: (ctx?: NuxtApp) => Promise<ResT>, handler: (ctx?: NuxtApp) => Promise<ResT>,
options?: AsyncDataOptions<ResT, DataT, PickKeys, DefaultT> options?: AsyncDataOptions<ResT, DataT, PickKeys, DefaultT>
): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, (NuxtErrorDataT extends Error | NuxtError ? NuxtErrorDataT : NuxtError<NuxtErrorDataT>) | null> ): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, (NuxtErrorDataT extends Error | NuxtError ? NuxtErrorDataT : NuxtError<NuxtErrorDataT>) | DefaultAsyncDataErrorValue>
/** /**
* Provides access to data that resolves asynchronously in an SSR-friendly composable. * Provides access to data that resolves asynchronously in an SSR-friendly composable.
* See {@link https://nuxt.com/docs/api/composables/use-async-data} * See {@link https://nuxt.com/docs/api/composables/use-async-data}
@ -158,7 +161,7 @@ export function useAsyncData<
> ( > (
handler: (ctx?: NuxtApp) => Promise<ResT>, handler: (ctx?: NuxtApp) => Promise<ResT>,
options?: AsyncDataOptions<ResT, DataT, PickKeys, DefaultT> options?: AsyncDataOptions<ResT, DataT, PickKeys, DefaultT>
): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, (NuxtErrorDataT extends Error | NuxtError ? NuxtErrorDataT : NuxtError<NuxtErrorDataT>) | null> ): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, (NuxtErrorDataT extends Error | NuxtError ? NuxtErrorDataT : NuxtError<NuxtErrorDataT>) | DefaultAsyncDataErrorValue>
/** /**
* Provides access to data that resolves asynchronously in an SSR-friendly composable. * Provides access to data that resolves asynchronously in an SSR-friendly composable.
* See {@link https://nuxt.com/docs/api/composables/use-async-data} * See {@link https://nuxt.com/docs/api/composables/use-async-data}
@ -171,12 +174,12 @@ export function useAsyncData<
NuxtErrorDataT = unknown, NuxtErrorDataT = unknown,
DataT = ResT, DataT = ResT,
PickKeys extends KeysOf<DataT> = KeysOf<DataT>, PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
DefaultT = null, DefaultT = DefaultAsyncDataValue,
> ( > (
key: string, key: string,
handler: (ctx?: NuxtApp) => Promise<ResT>, handler: (ctx?: NuxtApp) => Promise<ResT>,
options?: AsyncDataOptions<ResT, DataT, PickKeys, DefaultT> options?: AsyncDataOptions<ResT, DataT, PickKeys, DefaultT>
): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, (NuxtErrorDataT extends Error | NuxtError ? NuxtErrorDataT : NuxtError<NuxtErrorDataT>) | null> ): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, (NuxtErrorDataT extends Error | NuxtError ? NuxtErrorDataT : NuxtError<NuxtErrorDataT>) | DefaultAsyncDataErrorValue>
/** /**
* Provides access to data that resolves asynchronously in an SSR-friendly composable. * Provides access to data that resolves asynchronously in an SSR-friendly composable.
* See {@link https://nuxt.com/docs/api/composables/use-async-data} * See {@link https://nuxt.com/docs/api/composables/use-async-data}
@ -194,14 +197,14 @@ export function useAsyncData<
key: string, key: string,
handler: (ctx?: NuxtApp) => Promise<ResT>, handler: (ctx?: NuxtApp) => Promise<ResT>,
options?: AsyncDataOptions<ResT, DataT, PickKeys, DefaultT> options?: AsyncDataOptions<ResT, DataT, PickKeys, DefaultT>
): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, (NuxtErrorDataT extends Error | NuxtError ? NuxtErrorDataT : NuxtError<NuxtErrorDataT>) | null> ): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, (NuxtErrorDataT extends Error | NuxtError ? NuxtErrorDataT : NuxtError<NuxtErrorDataT>) | DefaultAsyncDataErrorValue>
export function useAsyncData< export function useAsyncData<
ResT, ResT,
NuxtErrorDataT = unknown, NuxtErrorDataT = unknown,
DataT = ResT, DataT = ResT,
PickKeys extends KeysOf<DataT> = KeysOf<DataT>, PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
DefaultT = null, DefaultT = DefaultAsyncDataValue,
> (...args: any[]): AsyncData<PickFrom<DataT, PickKeys>, (NuxtErrorDataT extends Error | NuxtError ? NuxtErrorDataT : NuxtError<NuxtErrorDataT>) | null> { > (...args: any[]): AsyncData<PickFrom<DataT, PickKeys>, (NuxtErrorDataT extends Error | NuxtError ? NuxtErrorDataT : NuxtError<NuxtErrorDataT>) | DefaultAsyncDataErrorValue> {
const autoKey = typeof args[args.length - 1] === 'string' ? args.pop() : undefined const autoKey = typeof args[args.length - 1] === 'string' ? args.pop() : undefined
if (typeof args[0] !== 'string') { args.unshift(autoKey) } if (typeof args[0] !== 'string') { args.unshift(autoKey) }
@ -226,14 +229,14 @@ export function useAsyncData<
const value = nuxtApp.ssrContext!._sharedPrerenderCache!.get(key) const value = nuxtApp.ssrContext!._sharedPrerenderCache!.get(key)
if (value) { return value as Promise<ResT> } if (value) { return value as Promise<ResT> }
const promise = nuxtApp.runWithContext(_handler) const promise = Promise.resolve().then(() => nuxtApp.runWithContext(_handler))
nuxtApp.ssrContext!._sharedPrerenderCache!.set(key, promise) nuxtApp.ssrContext!._sharedPrerenderCache!.set(key, promise)
return promise return promise
} }
// Used to get default values // Used to get default values
const getDefault = () => null const getDefault = () => asyncDataDefaults.value
const getDefaultCachedData = () => nuxtApp.isHydrating ? nuxtApp.payload.data[key] : nuxtApp.static.data[key] const getDefaultCachedData = () => nuxtApp.isHydrating ? nuxtApp.payload.data[key] : nuxtApp.static.data[key]
// Apply defaults // Apply defaults
@ -250,11 +253,12 @@ export function useAsyncData<
console.warn('[nuxt] `boolean` values are deprecated for the `dedupe` option of `useAsyncData` and will be removed in the future. Use \'cancel\' or \'defer\' instead.') console.warn('[nuxt] `boolean` values are deprecated for the `dedupe` option of `useAsyncData` and will be removed in the future. Use \'cancel\' or \'defer\' instead.')
} }
// TODO: make more precise when v4 lands
const hasCachedData = () => options.getCachedData!(key, nuxtApp) != null const hasCachedData = () => options.getCachedData!(key, nuxtApp) != null
// Create or use a shared asyncData entity // Create or use a shared asyncData entity
if (!nuxtApp._asyncData[key] || !options.immediate) { if (!nuxtApp._asyncData[key] || !options.immediate) {
nuxtApp.payload._errors[key] ??= null nuxtApp.payload._errors[key] ??= asyncDataDefaults.errorValue
const _ref = options.deep ? ref : shallowRef const _ref = options.deep ? ref : shallowRef
@ -263,11 +267,15 @@ export function useAsyncData<
pending: ref(!hasCachedData()), pending: ref(!hasCachedData()),
error: toRef(nuxtApp.payload._errors, key), error: toRef(nuxtApp.payload._errors, key),
status: ref('idle'), status: ref('idle'),
_default: options.default!,
} }
} }
// TODO: Else, somehow check for conflicting keys with different defaults or fetcher // TODO: Else, somehow check for conflicting keys with different defaults or fetcher
const asyncData = { ...nuxtApp._asyncData[key] } as AsyncData<DataT | DefaultT, (NuxtErrorDataT extends Error | NuxtError ? NuxtErrorDataT : NuxtError<NuxtErrorDataT>)> const asyncData = { ...nuxtApp._asyncData[key] } as { _default?: unknown } & AsyncData<DataT | DefaultT, (NuxtErrorDataT extends Error | NuxtError ? NuxtErrorDataT : NuxtError<NuxtErrorDataT>)>
// Don't expose default function to end user
delete asyncData._default
asyncData.refresh = asyncData.execute = (opts = {}) => { asyncData.refresh = asyncData.execute = (opts = {}) => {
if (nuxtApp._asyncDataPromises[key]) { if (nuxtApp._asyncDataPromises[key]) {
@ -307,7 +315,7 @@ export function useAsyncData<
nuxtApp.payload.data[key] = result nuxtApp.payload.data[key] = result
asyncData.data.value = result asyncData.data.value = result
asyncData.error.value = null asyncData.error.value = asyncDataDefaults.errorValue
asyncData.status.value = 'success' asyncData.status.value = 'success'
}) })
.catch((error: any) => { .catch((error: any) => {
@ -404,11 +412,11 @@ export function useLazyAsyncData<
DataE = Error, DataE = Error,
DataT = ResT, DataT = ResT,
PickKeys extends KeysOf<DataT> = KeysOf<DataT>, PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
DefaultT = null, DefaultT = DefaultAsyncDataValue,
> ( > (
handler: (ctx?: NuxtApp) => Promise<ResT>, handler: (ctx?: NuxtApp) => Promise<ResT>,
options?: Omit<AsyncDataOptions<ResT, DataT, PickKeys, DefaultT>, 'lazy'> options?: Omit<AsyncDataOptions<ResT, DataT, PickKeys, DefaultT>, 'lazy'>
): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, DataE | null> ): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, DataE | DefaultAsyncDataValue>
export function useLazyAsyncData< export function useLazyAsyncData<
ResT, ResT,
DataE = Error, DataE = Error,
@ -418,18 +426,18 @@ export function useLazyAsyncData<
> ( > (
handler: (ctx?: NuxtApp) => Promise<ResT>, handler: (ctx?: NuxtApp) => Promise<ResT>,
options?: Omit<AsyncDataOptions<ResT, DataT, PickKeys, DefaultT>, 'lazy'> options?: Omit<AsyncDataOptions<ResT, DataT, PickKeys, DefaultT>, 'lazy'>
): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, DataE | null> ): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, DataE | DefaultAsyncDataValue>
export function useLazyAsyncData< export function useLazyAsyncData<
ResT, ResT,
DataE = Error, DataE = Error,
DataT = ResT, DataT = ResT,
PickKeys extends KeysOf<DataT> = KeysOf<DataT>, PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
DefaultT = null, DefaultT = DefaultAsyncDataValue,
> ( > (
key: string, key: string,
handler: (ctx?: NuxtApp) => Promise<ResT>, handler: (ctx?: NuxtApp) => Promise<ResT>,
options?: Omit<AsyncDataOptions<ResT, DataT, PickKeys, DefaultT>, 'lazy'> options?: Omit<AsyncDataOptions<ResT, DataT, PickKeys, DefaultT>, 'lazy'>
): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, DataE | null> ): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, DataE | DefaultAsyncDataValue>
export function useLazyAsyncData< export function useLazyAsyncData<
ResT, ResT,
DataE = Error, DataE = Error,
@ -440,15 +448,15 @@ export function useLazyAsyncData<
key: string, key: string,
handler: (ctx?: NuxtApp) => Promise<ResT>, handler: (ctx?: NuxtApp) => Promise<ResT>,
options?: Omit<AsyncDataOptions<ResT, DataT, PickKeys, DefaultT>, 'lazy'> options?: Omit<AsyncDataOptions<ResT, DataT, PickKeys, DefaultT>, 'lazy'>
): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, DataE | null> ): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, DataE | DefaultAsyncDataValue>
export function useLazyAsyncData< export function useLazyAsyncData<
ResT, ResT,
DataE = Error, DataE = Error,
DataT = ResT, DataT = ResT,
PickKeys extends KeysOf<DataT> = KeysOf<DataT>, PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
DefaultT = null, DefaultT = DefaultAsyncDataValue,
> (...args: any[]): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, DataE | null> { > (...args: any[]): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, DataE | DefaultAsyncDataValue> {
const autoKey = typeof args[args.length - 1] === 'string' ? args.pop() : undefined const autoKey = typeof args[args.length - 1] === 'string' ? args.pop() : undefined
if (typeof args[0] !== 'string') { args.unshift(autoKey) } if (typeof args[0] !== 'string') { args.unshift(autoKey) }
const [key, handler, options = {}] = args as [string, (ctx?: NuxtApp) => Promise<ResT>, AsyncDataOptions<ResT, DataT, PickKeys, DefaultT>] const [key, handler, options = {}] = args as [string, (ctx?: NuxtApp) => Promise<ResT>, AsyncDataOptions<ResT, DataT, PickKeys, DefaultT>]
@ -463,12 +471,12 @@ export function useLazyAsyncData<
} }
/** @since 3.1.0 */ /** @since 3.1.0 */
export function useNuxtData<DataT = any> (key: string): { data: Ref<DataT | null> } { export function useNuxtData<DataT = any> (key: string): { data: Ref<DataT | DefaultAsyncDataValue> } {
const nuxtApp = useNuxtApp() const nuxtApp = useNuxtApp()
// Initialize value when key is not already set // Initialize value when key is not already set
if (!(key in nuxtApp.payload.data)) { if (!(key in nuxtApp.payload.data)) {
nuxtApp.payload.data[key] = null nuxtApp.payload.data[key] = asyncDataDefaults.value
} }
return { return {
@ -520,12 +528,12 @@ function clearNuxtDataByKey (nuxtApp: NuxtApp, key: string): void {
} }
if (key in nuxtApp.payload._errors) { if (key in nuxtApp.payload._errors) {
nuxtApp.payload._errors[key] = null nuxtApp.payload._errors[key] = asyncDataDefaults.errorValue
} }
if (nuxtApp._asyncData[key]) { if (nuxtApp._asyncData[key]) {
nuxtApp._asyncData[key]!.data.value = undefined nuxtApp._asyncData[key]!.data.value = resetAsyncDataToUndefined ? undefined : nuxtApp._asyncData[key]!._default()
nuxtApp._asyncData[key]!.error.value = null nuxtApp._asyncData[key]!.error.value = asyncDataDefaults.errorValue
nuxtApp._asyncData[key]!.pending.value = false nuxtApp._asyncData[key]!.pending.value = false
nuxtApp._asyncData[key]!.status.value = 'idle' nuxtApp._asyncData[key]!.status.value = 'idle'
} }

View File

@ -4,6 +4,9 @@ import { toRef } from 'vue'
import { useNuxtApp } from '../nuxt' import { useNuxtApp } from '../nuxt'
import { useRouter } from './router' import { useRouter } from './router'
// @ts-expect-error virtual file
import { nuxtDefaultErrorValue } from '#build/nuxt.config.mjs'
export const NUXT_ERROR_SIGNATURE = '__nuxt_error' export const NUXT_ERROR_SIGNATURE = '__nuxt_error'
/** @since 3.0.0 */ /** @since 3.0.0 */
@ -47,7 +50,7 @@ export const clearError = async (options: { redirect?: string } = {}) => {
await useRouter().replace(options.redirect) await useRouter().replace(options.redirect)
} }
error.value = null error.value = nuxtDefaultErrorValue
} }
/** @since 3.0.0 */ /** @since 3.0.0 */

View File

@ -8,6 +8,9 @@ import { useRequestFetch } from './ssr'
import type { AsyncData, AsyncDataOptions, KeysOf, MultiWatchSources, PickFrom } from './asyncData' import type { AsyncData, AsyncDataOptions, KeysOf, MultiWatchSources, PickFrom } from './asyncData'
import { useAsyncData } from './asyncData' import { useAsyncData } from './asyncData'
// TODO: temporary module for backwards compatibility
import type { DefaultAsyncDataErrorValue, DefaultAsyncDataValue } from '#app/defaults'
// @ts-expect-error virtual file // @ts-expect-error virtual file
import { fetchDefaults } from '#build/nuxt.config.mjs' import { fetchDefaults } from '#build/nuxt.config.mjs'
@ -30,7 +33,7 @@ export interface UseFetchOptions<
ResT, ResT,
DataT = ResT, DataT = ResT,
PickKeys extends KeysOf<DataT> = KeysOf<DataT>, PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
DefaultT = null, DefaultT = DefaultAsyncDataValue,
R extends NitroFetchRequest = string & {}, R extends NitroFetchRequest = string & {},
M extends AvailableRouterMethod<R> = AvailableRouterMethod<R>, M extends AvailableRouterMethod<R> = AvailableRouterMethod<R>,
> extends Omit<AsyncDataOptions<ResT, DataT, PickKeys, DefaultT>, 'watch'>, ComputedFetchOptions<R, M> { > extends Omit<AsyncDataOptions<ResT, DataT, PickKeys, DefaultT>, 'watch'>, ComputedFetchOptions<R, M> {
@ -54,11 +57,11 @@ export function useFetch<
_ResT = ResT extends void ? FetchResult<ReqT, Method> : ResT, _ResT = ResT extends void ? FetchResult<ReqT, Method> : ResT,
DataT = _ResT, DataT = _ResT,
PickKeys extends KeysOf<DataT> = KeysOf<DataT>, PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
DefaultT = null, DefaultT = DefaultAsyncDataValue,
> ( > (
request: Ref<ReqT> | ReqT | (() => ReqT), request: Ref<ReqT> | ReqT | (() => ReqT),
opts?: UseFetchOptions<_ResT, DataT, PickKeys, DefaultT, ReqT, Method> opts?: UseFetchOptions<_ResT, DataT, PickKeys, DefaultT, ReqT, Method>
): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, ErrorT | null> ): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, ErrorT | DefaultAsyncDataErrorValue>
/** /**
* Fetch data from an API endpoint with an SSR-friendly composable. * Fetch data from an API endpoint with an SSR-friendly composable.
* See {@link https://nuxt.com/docs/api/composables/use-fetch} * See {@link https://nuxt.com/docs/api/composables/use-fetch}
@ -77,7 +80,7 @@ export function useFetch<
> ( > (
request: Ref<ReqT> | ReqT | (() => ReqT), request: Ref<ReqT> | ReqT | (() => ReqT),
opts?: UseFetchOptions<_ResT, DataT, PickKeys, DefaultT, ReqT, Method> opts?: UseFetchOptions<_ResT, DataT, PickKeys, DefaultT, ReqT, Method>
): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, ErrorT | null> ): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, ErrorT | DefaultAsyncDataErrorValue>
export function useFetch< export function useFetch<
ResT = void, ResT = void,
ErrorT = FetchError, ErrorT = FetchError,
@ -86,7 +89,7 @@ export function useFetch<
_ResT = ResT extends void ? FetchResult<ReqT, Method> : ResT, _ResT = ResT extends void ? FetchResult<ReqT, Method> : ResT,
DataT = _ResT, DataT = _ResT,
PickKeys extends KeysOf<DataT> = KeysOf<DataT>, PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
DefaultT = null, DefaultT = DefaultAsyncDataValue,
> ( > (
request: Ref<ReqT> | ReqT | (() => ReqT), request: Ref<ReqT> | ReqT | (() => ReqT),
arg1?: string | UseFetchOptions<_ResT, DataT, PickKeys, DefaultT, ReqT, Method>, arg1?: string | UseFetchOptions<_ResT, DataT, PickKeys, DefaultT, ReqT, Method>,
@ -161,8 +164,10 @@ export function useFetch<
* @see https://github.com/unjs/ofetch/blob/bb2d72baa5d3f332a2185c20fc04e35d2c3e258d/src/fetch.ts#L152 * @see https://github.com/unjs/ofetch/blob/bb2d72baa5d3f332a2185c20fc04e35d2c3e258d/src/fetch.ts#L152
*/ */
const timeoutLength = toValue(opts.timeout) const timeoutLength = toValue(opts.timeout)
let timeoutId: NodeJS.Timeout
if (timeoutLength) { if (timeoutLength) {
setTimeout(() => controller.abort(), timeoutLength) timeoutId = setTimeout(() => controller.abort(), timeoutLength)
controller.signal.onabort = () => clearTimeout(timeoutId)
} }
let _$fetch = opts.$fetch || globalThis.$fetch let _$fetch = opts.$fetch || globalThis.$fetch
@ -175,7 +180,7 @@ export function useFetch<
} }
} }
return _$fetch(_request.value, { signal: controller.signal, ..._fetchOptions } as any) as Promise<_ResT> return _$fetch(_request.value, { signal: controller.signal, ..._fetchOptions } as any).finally(() => { clearTimeout(timeoutId) }) as Promise<_ResT>
}, _asyncDataOptions) }, _asyncDataOptions)
return asyncData return asyncData
@ -190,11 +195,11 @@ export function useLazyFetch<
_ResT = ResT extends void ? FetchResult<ReqT, Method> : ResT, _ResT = ResT extends void ? FetchResult<ReqT, Method> : ResT,
DataT = _ResT, DataT = _ResT,
PickKeys extends KeysOf<DataT> = KeysOf<DataT>, PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
DefaultT = null, DefaultT = DefaultAsyncDataValue,
> ( > (
request: Ref<ReqT> | ReqT | (() => ReqT), request: Ref<ReqT> | ReqT | (() => ReqT),
opts?: Omit<UseFetchOptions<_ResT, DataT, PickKeys, DefaultT, ReqT, Method>, 'lazy'> opts?: Omit<UseFetchOptions<_ResT, DataT, PickKeys, DefaultT, ReqT, Method>, 'lazy'>
): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, ErrorT | null> ): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, ErrorT | DefaultAsyncDataErrorValue>
export function useLazyFetch< export function useLazyFetch<
ResT = void, ResT = void,
ErrorT = FetchError, ErrorT = FetchError,
@ -207,7 +212,7 @@ export function useLazyFetch<
> ( > (
request: Ref<ReqT> | ReqT | (() => ReqT), request: Ref<ReqT> | ReqT | (() => ReqT),
opts?: Omit<UseFetchOptions<_ResT, DataT, PickKeys, DefaultT, ReqT, Method>, 'lazy'> opts?: Omit<UseFetchOptions<_ResT, DataT, PickKeys, DefaultT, ReqT, Method>, 'lazy'>
): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, ErrorT | null> ): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, ErrorT | DefaultAsyncDataErrorValue>
export function useLazyFetch< export function useLazyFetch<
ResT = void, ResT = void,
ErrorT = FetchError, ErrorT = FetchError,
@ -216,7 +221,7 @@ export function useLazyFetch<
_ResT = ResT extends void ? FetchResult<ReqT, Method> : ResT, _ResT = ResT extends void ? FetchResult<ReqT, Method> : ResT,
DataT = _ResT, DataT = _ResT,
PickKeys extends KeysOf<DataT> = KeysOf<DataT>, PickKeys extends KeysOf<DataT> = KeysOf<DataT>,
DefaultT = null, DefaultT = DefaultAsyncDataValue,
> ( > (
request: Ref<ReqT> | ReqT | (() => ReqT), request: Ref<ReqT> | ReqT | (() => ReqT),
arg1?: string | Omit<UseFetchOptions<_ResT, DataT, PickKeys, DefaultT, ReqT, Method>, 'lazy'>, arg1?: string | Omit<UseFetchOptions<_ResT, DataT, PickKeys, DefaultT, ReqT, Method>, 'lazy'>,

View File

@ -23,9 +23,10 @@ export type LoadingIndicator = {
_cleanup: () => void _cleanup: () => void
progress: Ref<number> progress: Ref<number>
isLoading: Ref<boolean> isLoading: Ref<boolean>
error: Ref<boolean>
start: () => void start: () => void
set: (value: number) => void set: (value: number) => void
finish: (opts?: { force?: boolean }) => void finish: (opts?: { force?: boolean, error?: boolean }) => void
clear: () => void clear: () => void
} }
@ -40,6 +41,7 @@ function createLoadingIndicator (opts: Partial<LoadingIndicatorOpts> = {}) {
const nuxtApp = useNuxtApp() const nuxtApp = useNuxtApp()
const progress = ref(0) const progress = ref(0)
const isLoading = ref(false) const isLoading = ref(false)
const error = ref(false)
let done = false let done = false
let rafId: number let rafId: number
@ -47,7 +49,10 @@ function createLoadingIndicator (opts: Partial<LoadingIndicatorOpts> = {}) {
let hideTimeout: number | NodeJS.Timeout let hideTimeout: number | NodeJS.Timeout
let resetTimeout: number | NodeJS.Timeout let resetTimeout: number | NodeJS.Timeout
const start = () => set(0) const start = () => {
error.value = false
set(0)
}
function set (at = 0) { function set (at = 0) {
if (nuxtApp.isHydrating) { if (nuxtApp.isHydrating) {
@ -76,11 +81,14 @@ function createLoadingIndicator (opts: Partial<LoadingIndicatorOpts> = {}) {
} }
} }
function finish (opts: { force?: boolean } = {}) { function finish (opts: { force?: boolean, error?: boolean } = {}) {
progress.value = 100 progress.value = 100
done = true done = true
clear() clear()
_clearTimeouts() _clearTimeouts()
if (opts.error) {
error.value = true
}
if (opts.force) { if (opts.force) {
progress.value = 0 progress.value = 0
isLoading.value = false isLoading.value = false
@ -145,6 +153,7 @@ function createLoadingIndicator (opts: Partial<LoadingIndicatorOpts> = {}) {
_cleanup, _cleanup,
progress: computed(() => progress.value), progress: computed(() => progress.value),
isLoading: computed(() => isLoading.value), isLoading: computed(() => isLoading.value),
error: computed(() => error.value),
start, start,
set, set,
finish, finish,

View File

@ -1,7 +1,6 @@
import type { MatcherExport, RouteMatcher } from 'radix3' import type { MatcherExport, RouteMatcher } from 'radix3'
import { createMatcherFromExport, createRouter as createRadixRouter, toRouteMatcher } from 'radix3' import { createMatcherFromExport, createRouter as createRadixRouter, toRouteMatcher } from 'radix3'
import { defu } from 'defu' import { defu } from 'defu'
import { useAppConfig } from '../config'
import { useRuntimeConfig } from '../nuxt' import { useRuntimeConfig } from '../nuxt'
// @ts-expect-error virtual file // @ts-expect-error virtual file
import { appManifest as isAppManifestEnabled } from '#build/nuxt.config.mjs' import { appManifest as isAppManifestEnabled } from '#build/nuxt.config.mjs'
@ -25,9 +24,7 @@ function fetchManifest () {
if (!isAppManifestEnabled) { if (!isAppManifestEnabled) {
throw new Error('[nuxt] app manifest should be enabled with `experimental.appManifest`') throw new Error('[nuxt] app manifest should be enabled with `experimental.appManifest`')
} }
// @ts-expect-error private property manifest = $fetch<NuxtAppManifest>(buildAssetsURL(`builds/meta/${useRuntimeConfig().app.buildId}.json`))
const buildId = useAppConfig().nuxt?.buildId
manifest = $fetch<NuxtAppManifest>(buildAssetsURL(`builds/meta/${buildId}.json`))
manifest.then((m) => { manifest.then((m) => {
matcher = createMatcherFromExport(m.matcher) matcher = createMatcherFromExport(m.matcher)
}) })

View File

@ -1,9 +1,8 @@
import { hasProtocol, joinURL, withoutTrailingSlash } from 'ufo' import { hasProtocol, joinURL, withoutTrailingSlash } from 'ufo'
import { parse } from 'devalue' import { parse } from 'devalue'
import { useHead } from '@unhead/vue' import { useHead } from '@unhead/vue'
import { getCurrentInstance } from 'vue' import { getCurrentInstance, onServerPrefetch } from 'vue'
import { useNuxtApp, useRuntimeConfig } from '../nuxt' import { useNuxtApp, useRuntimeConfig } from '../nuxt'
import { useAppConfig } from '../config'
import { useRoute } from './router' import { useRoute } from './router'
import { getAppManifest, getRouteRules } from './manifest' import { getAppManifest, getRouteRules } from './manifest'
@ -17,9 +16,9 @@ interface LoadPayloadOptions {
} }
/** @since 3.0.0 */ /** @since 3.0.0 */
export function loadPayload (url: string, opts: LoadPayloadOptions = {}): Record<string, any> | Promise<Record<string, any>> | null { export async function loadPayload (url: string, opts: LoadPayloadOptions = {}): Promise<Record<string, any> | null> {
if (import.meta.server || !payloadExtraction) { return null } if (import.meta.server || !payloadExtraction) { return null }
const payloadURL = _getPayloadURL(url, opts) const payloadURL = await _getPayloadURL(url, opts)
const nuxtApp = useNuxtApp() const nuxtApp = useNuxtApp()
const cache = nuxtApp._payloadCache = nuxtApp._payloadCache || {} const cache = nuxtApp._payloadCache = nuxtApp._payloadCache || {}
if (payloadURL in cache) { if (payloadURL in cache) {
@ -40,25 +39,34 @@ export function loadPayload (url: string, opts: LoadPayloadOptions = {}): Record
return cache[payloadURL] return cache[payloadURL]
} }
/** @since 3.0.0 */ /** @since 3.0.0 */
export function preloadPayload (url: string, opts: LoadPayloadOptions = {}) { export function preloadPayload (url: string, opts: LoadPayloadOptions = {}): Promise<void> {
const payloadURL = _getPayloadURL(url, opts) const nuxtApp = useNuxtApp()
useHead({ const promise = _getPayloadURL(url, opts).then((payloadURL) => {
link: [ nuxtApp.runWithContext(() => useHead({
{ rel: 'modulepreload', href: payloadURL }, link: [
], { rel: 'modulepreload', href: payloadURL },
],
}))
}) })
if (import.meta.server) {
onServerPrefetch(() => promise)
}
return promise
} }
// --- Internal --- // --- Internal ---
const filename = renderJsonPayloads ? '_payload.json' : '_payload.js' const filename = renderJsonPayloads ? '_payload.json' : '_payload.js'
function _getPayloadURL (url: string, opts: LoadPayloadOptions = {}) { async function _getPayloadURL (url: string, opts: LoadPayloadOptions = {}) {
const u = new URL(url, 'http://localhost') const u = new URL(url, 'http://localhost')
if (u.host !== 'localhost' || hasProtocol(u.pathname, { acceptRelative: true })) { if (u.host !== 'localhost' || hasProtocol(u.pathname, { acceptRelative: true })) {
throw new Error('Payload URL must not include hostname: ' + url) throw new Error('Payload URL must not include hostname: ' + url)
} }
const hash = opts.hash || (opts.fresh ? Date.now() : (useAppConfig().nuxt as any)?.buildId) const config = useRuntimeConfig()
return joinURL(useRuntimeConfig().app.baseURL, u.pathname, filename + (hash ? `?${hash}` : '')) const hash = opts.hash || (opts.fresh ? Date.now() : config.app.buildId)
const cdnURL = config.app.cdnURL
const baseOrCdnURL = cdnURL && await isPrerendered(url) ? cdnURL : config.app.baseURL
return joinURL(baseOrCdnURL, u.pathname, filename + (hash ? `?${hash}` : ''))
} }
async function _importPayload (payloadURL: string) { async function _importPayload (payloadURL: string) {

View File

@ -169,8 +169,7 @@ export const navigateTo = (to: RouteLocationRaw | undefined | null, options?: Na
nuxtApp.ssrContext!._renderResponse = { nuxtApp.ssrContext!._renderResponse = {
statusCode: sanitizeStatusCode(options?.redirectCode || 302, 302), statusCode: sanitizeStatusCode(options?.redirectCode || 302, 302),
body: `<!DOCTYPE html><html><head><meta http-equiv="refresh" content="0; url=${encodedLoc}"></head></html>`, body: `<!DOCTYPE html><html><head><meta http-equiv="refresh" content="0; url=${encodedLoc}"></head></html>`,
// do not encode as this would break some modules and some environments headers: { location: encodeURI(location) },
headers: { location },
} }
return response return response
} }

View File

@ -0,0 +1,7 @@
// TODO: temporary module for backwards compatibility
export type DefaultAsyncDataErrorValue = null
export type DefaultAsyncDataValue = null
export type DefaultErrorValue = null
export {}

View File

@ -1,4 +1,4 @@
import { effectScope, getCurrentInstance, getCurrentScope, hasInjectionContext, reactive } from 'vue' import { effectScope, getCurrentInstance, getCurrentScope, hasInjectionContext, reactive, shallowReactive } from 'vue'
import type { App, EffectScope, Ref, VNode, onErrorCaptured } from 'vue' import type { App, EffectScope, Ref, VNode, onErrorCaptured } from 'vue'
import type { RouteLocationNormalizedLoaded } from '#vue-router' import type { RouteLocationNormalizedLoaded } from '#vue-router'
import type { HookCallback, Hookable } from 'hookable' import type { HookCallback, Hookable } from 'hookable'
@ -20,13 +20,15 @@ import type { LoadingIndicator } from '../app/composables/loading-indicator'
import type { RouteAnnouncer } from '../app/composables/route-announcer' import type { RouteAnnouncer } from '../app/composables/route-announcer'
import type { ViewTransition } from './plugins/view-transitions.client' import type { ViewTransition } from './plugins/view-transitions.client'
// @ts-expect-error virtual file
import { appId } from '#build/nuxt.config.mjs'
// TODO: temporary module for backwards compatibility
import type { DefaultAsyncDataErrorValue, DefaultErrorValue } from '#app/defaults'
import type { NuxtAppLiterals } from '#app' import type { NuxtAppLiterals } from '#app'
// @ts-expect-error virtual import function getNuxtAppCtx (appName = appId || 'nuxt-app') {
import { buildId } from '#build/nuxt.config.mjs' return getContext<NuxtApp>(appName, {
function getNuxtAppCtx (appName?: string) {
return getContext<NuxtApp>(appName || buildId || 'nuxt-app', {
asyncContext: !!__NUXT_ASYNC_CONTEXT__ && import.meta.server, asyncContext: !!__NUXT_ASYNC_CONTEXT__ && import.meta.server,
}) })
} }
@ -92,8 +94,8 @@ export interface NuxtPayload {
state: Record<string, any> state: Record<string, any>
once: Set<string> once: Set<string>
config?: Pick<RuntimeConfig, 'public' | 'app'> config?: Pick<RuntimeConfig, 'public' | 'app'>
error?: NuxtError | null error?: NuxtError | DefaultErrorValue
_errors: Record<string, NuxtError | null> _errors: Record<string, NuxtError | DefaultAsyncDataErrorValue>
[key: string]: unknown [key: string]: unknown
} }
@ -120,10 +122,12 @@ interface _NuxtApp {
_asyncDataPromises: Record<string, Promise<any> | undefined> _asyncDataPromises: Record<string, Promise<any> | undefined>
/** @internal */ /** @internal */
_asyncData: Record<string, { _asyncData: Record<string, {
data: Ref<any> data: Ref<unknown>
pending: Ref<boolean> pending: Ref<boolean>
error: Ref<Error | null> error: Ref<Error | DefaultAsyncDataErrorValue>
status: Ref<AsyncDataRequestStatus> status: Ref<AsyncDataRequestStatus>
/** @internal */
_default: () => unknown
} | undefined> } | undefined>
/** @internal */ /** @internal */
@ -244,7 +248,7 @@ export interface CreateOptions {
export function createNuxtApp (options: CreateOptions) { export function createNuxtApp (options: CreateOptions) {
let hydratingCount = 0 let hydratingCount = 0
const nuxtApp: NuxtApp = { const nuxtApp: NuxtApp = {
name: buildId, _name: appId || 'nuxt-app',
_scope: effectScope(), _scope: effectScope(),
provide: undefined, provide: undefined,
globalName: 'nuxt', globalName: 'nuxt',
@ -252,12 +256,11 @@ export function createNuxtApp (options: CreateOptions) {
get nuxt () { return __NUXT_VERSION__ }, get nuxt () { return __NUXT_VERSION__ },
get vue () { return nuxtApp.vueApp.version }, get vue () { return nuxtApp.vueApp.version },
}, },
payload: reactive({ payload: shallowReactive({
data: {}, data: shallowReactive({}),
state: {}, state: reactive({}),
once: new Set<string>(), once: new Set<string>(),
_errors: {}, _errors: shallowReactive({}),
...(import.meta.client ? window.__NUXT__ ?? {} : { serverRendered: true }),
}), }),
static: { static: {
data: {}, data: {},
@ -288,11 +291,32 @@ export function createNuxtApp (options: CreateOptions) {
} }
}, },
_asyncDataPromises: {}, _asyncDataPromises: {},
_asyncData: {}, _asyncData: shallowReactive({}),
_payloadRevivers: {}, _payloadRevivers: {},
...options, ...options,
} as any as NuxtApp } as any as NuxtApp
if (import.meta.server) {
nuxtApp.payload.serverRendered = true
}
// TODO: remove/refactor in https://github.com/nuxt/nuxt/issues/25336
if (import.meta.client && window.__NUXT__) {
for (const key in window.__NUXT__) {
switch (key) {
case 'data':
case 'state':
case '_errors':
// Preserve reactivity for non-rich payload support
Object.assign(nuxtApp.payload[key], window.__NUXT__[key])
break
default:
nuxtApp.payload[key] = window.__NUXT__[key]
}
}
}
nuxtApp.hooks = createHooks<RuntimeNuxtHooks>() nuxtApp.hooks = createHooks<RuntimeNuxtHooks>()
nuxtApp.hook = nuxtApp.hooks.hook nuxtApp.hook = nuxtApp.hooks.hook

View File

@ -1,13 +1,21 @@
import { consola, createConsola } from 'consola' import { createConsola } from 'consola'
import type { LogObject } from 'consola' import type { LogObject } from 'consola'
import { parse } from 'devalue' import { parse } from 'devalue'
import { h } from 'vue'
import { defineNuxtPlugin } from '../nuxt' import { defineNuxtPlugin } from '../nuxt'
// @ts-expect-error virtual file // @ts-expect-error virtual file
import { devLogs, devRootDir } from '#build/nuxt.config.mjs' import { devLogs, devRootDir } from '#build/nuxt.config.mjs'
export default defineNuxtPlugin((nuxtApp) => { const devRevivers: Record<string, (data: any) => any> = import.meta.server
? {}
: {
VNode: data => h(data.type, data.props),
URL: data => new URL(data),
}
export default defineNuxtPlugin(async (nuxtApp) => {
if (import.meta.test) { return } if (import.meta.test) { return }
if (import.meta.server) { if (import.meta.server) {
@ -23,42 +31,18 @@ export default defineNuxtPlugin((nuxtApp) => {
date: true, date: true,
}, },
}) })
const hydrationLogs = new Set<string>()
consola.wrapConsole()
consola.addReporter({
log (logObj) {
try {
hydrationLogs.add(JSON.stringify(logObj.args))
} catch {
// silently ignore - the worst case is a user gets log twice
}
},
})
nuxtApp.hook('dev:ssr-logs', (logs) => { nuxtApp.hook('dev:ssr-logs', (logs) => {
for (const log of logs) { for (const log of logs) {
// deduplicate so we don't print out things that are logged on client logger.log(normalizeServerLog({ ...log }))
try {
if (!hydrationLogs.size || !hydrationLogs.has(JSON.stringify(log.args))) {
logger.log(normalizeServerLog({ ...log }))
}
} catch {
logger.log(normalizeServerLog({ ...log }))
}
} }
}) })
nuxtApp.hooks.hook('app:suspense:resolve', () => consola.restoreAll())
nuxtApp.hooks.hookOnce('dev:ssr-logs', () => hydrationLogs.clear())
} }
// pass SSR logs after hydration if (typeof window !== 'undefined') {
nuxtApp.hooks.hook('app:suspense:resolve', async () => { const content = document.getElementById('__NUXT_LOGS__')?.textContent
if (typeof window !== 'undefined') { const logs = content ? parse(content, { ...devRevivers, ...nuxtApp._payloadRevivers }) as LogObject[] : []
const content = document.getElementById('__NUXT_LOGS__')?.textContent await nuxtApp.hooks.callHook('dev:ssr-logs', logs)
const logs = content ? parse(content, nuxtApp._payloadRevivers) as LogObject[] : [] }
await nuxtApp.hooks.callHook('dev:ssr-logs', logs)
}
})
}) })
function normalizeFilenames (stack?: string) { function normalizeFilenames (stack?: string) {

View File

@ -10,7 +10,7 @@ interface LoaderOptions {
transform?: ComponentsOptions['transform'] transform?: ComponentsOptions['transform']
rootDir: string rootDir: string
} }
const CLIENT_FALLBACK_RE = /<(NuxtClientFallback|nuxt-client-fallback)( [^>]*)?>/ const CLIENT_FALLBACK_RE = /<(?:NuxtClientFallback|nuxt-client-fallback)(?: [^>]*)?>/
const CLIENT_FALLBACK_GLOBAL_RE = /<(NuxtClientFallback|nuxt-client-fallback)( [^>]*)?>/g const CLIENT_FALLBACK_GLOBAL_RE = /<(NuxtClientFallback|nuxt-client-fallback)( [^>]*)?>/g
export const clientFallbackAutoIdPlugin = createUnplugin((options: LoaderOptions) => { export const clientFallbackAutoIdPlugin = createUnplugin((options: LoaderOptions) => {
const exclude = options.transform?.exclude || [] const exclude = options.transform?.exclude || []
@ -37,7 +37,7 @@ export const clientFallbackAutoIdPlugin = createUnplugin((options: LoaderOptions
s.replace(CLIENT_FALLBACK_GLOBAL_RE, (full, name, attrs) => { s.replace(CLIENT_FALLBACK_GLOBAL_RE, (full, name, attrs) => {
count++ count++
if (/ :?uid=/g.test(attrs)) { return full } if (/ :?uid=/.test(attrs)) { return full }
return `<${name} :uid="'${hash(relativeID)}' + JSON.stringify($props) + '${count}'" ${attrs ?? ''}>` return `<${name} :uid="'${hash(relativeID)}' + JSON.stringify($props) + '${count}'" ${attrs ?? ''}>`
}) })

View File

@ -25,7 +25,7 @@ interface ComponentChunkOptions {
} }
const SCRIPT_RE = /<script[^>]*>/g const SCRIPT_RE = /<script[^>]*>/g
const HAS_SLOT_OR_CLIENT_RE = /(<slot[^>]*>)|(nuxt-client)/ const HAS_SLOT_OR_CLIENT_RE = /<slot[^>]*>|nuxt-client/
const TEMPLATE_RE = /<template>([\s\S]*)<\/template>/ const TEMPLATE_RE = /<template>([\s\S]*)<\/template>/
const NUXTCLIENT_ATTR_RE = /\s:?nuxt-client(="[^"]*")?/g const NUXTCLIENT_ATTR_RE = /\s:?nuxt-client(="[^"]*")?/g
const IMPORT_CODE = '\nimport { vforToArray as __vforToArray } from \'#app/components/utils\'' + '\nimport NuxtTeleportIslandComponent from \'#app/components/nuxt-teleport-island-component\'' + '\nimport NuxtTeleportSsrSlot from \'#app/components/nuxt-teleport-island-slot\'' const IMPORT_CODE = '\nimport { vforToArray as __vforToArray } from \'#app/components/utils\'' + '\nimport NuxtTeleportIslandComponent from \'#app/components/nuxt-teleport-island-component\'' + '\nimport NuxtTeleportSsrSlot from \'#app/components/nuxt-teleport-island-slot\''

View File

@ -43,7 +43,7 @@ export const loaderPlugin = createUnplugin((options: LoaderOptions) => {
const s = new MagicString(code) const s = new MagicString(code)
// replace `_resolveComponent("...")` to direct import // replace `_resolveComponent("...")` to direct import
s.replace(/(?<=[ (])_?resolveComponent\(\s*["'](lazy-|Lazy)?([^'"]*?)["'][\s,]*[^)]*\)/g, (full: string, lazy: string, name: string) => { s.replace(/(?<=[ (])_?resolveComponent\(\s*["'](lazy-|Lazy)?([^'"]*)["'][^)]*\)/g, (full: string, lazy: string, name: string) => {
const component = findComponent(components, name, options.mode) const component = findComponent(components, name, options.mode)
if (component) { if (component) {
// @ts-expect-error TODO: refactor to nuxi // @ts-expect-error TODO: refactor to nuxi

View File

@ -18,7 +18,7 @@ function compareDirByPathLength ({ path: pathA }: { path: string }, { path: path
return pathB.split(/[\\/]/).filter(Boolean).length - pathA.split(/[\\/]/).filter(Boolean).length return pathB.split(/[\\/]/).filter(Boolean).length - pathA.split(/[\\/]/).filter(Boolean).length
} }
const DEFAULT_COMPONENTS_DIRS_RE = /\/components(\/global|\/islands)?$/ const DEFAULT_COMPONENTS_DIRS_RE = /\/components(?:\/(?:global|islands))?$/
export type getComponentsT = (mode?: 'client' | 'server' | 'all') => Component[] export type getComponentsT = (mode?: 'client' | 'server' | 'all') => Component[]

View File

@ -85,8 +85,8 @@ export async function scanComponents (dirs: ComponentsDir[], srcDir: string): Pr
*/ */
let fileName = basename(filePath, fileExt) let fileName = basename(filePath, fileExt)
const island = /\.(island)(\.global)?$/.test(fileName) || dir.island const island = /\.island(?:\.global)?$/.test(fileName) || dir.island
const global = /\.(global)(\.island)?$/.test(fileName) || dir.global const global = /\.global(?:\.island)?$/.test(fileName) || dir.global
const mode = island ? 'server' : (fileName.match(/(?<=\.)(client|server)(\.global|\.island)*$/)?.[1] || 'all') as 'client' | 'server' | 'all' const mode = island ? 'server' : (fileName.match(/(?<=\.)(client|server)(\.global|\.island)*$/)?.[1] || 'all') as 'client' | 'server' | 'all'
fileName = fileName.replace(/(\.(client|server))?(\.global|\.island)*$/, '') fileName = fileName.replace(/(\.(client|server))?(\.global|\.island)*$/, '')

View File

@ -104,8 +104,8 @@ export const componentsTypeTemplate = {
const buildDir = nuxt.options.buildDir const buildDir = nuxt.options.buildDir
const componentTypes = app.components.filter(c => !c.island).map((c) => { const componentTypes = app.components.filter(c => !c.island).map((c) => {
const type = `typeof ${genDynamicImport(isAbsolute(c.filePath) const type = `typeof ${genDynamicImport(isAbsolute(c.filePath)
? relative(buildDir, c.filePath).replace(/(?<=\w)\.(?!vue)\w+$/g, '') ? relative(buildDir, c.filePath).replace(/\b\.(?!vue)\w+$/g, '')
: c.filePath.replace(/(?<=\w)\.(?!vue)\w+$/g, ''), { wrapper: false })}['${c.export}']` : c.filePath.replace(/\b\.(?!vue)\w+$/g, ''), { wrapper: false })}['${c.export}']`
return [ return [
c.pascalName, c.pascalName,
c.island || c.mode === 'server' ? `IslandComponent<${type}>` : type, c.island || c.mode === 'server' ? `IslandComponent<${type}>` : type,

View File

@ -16,7 +16,7 @@ interface TreeShakeTemplatePluginOptions {
type AcornNode<N extends Node> = N & { start: number, end: number } type AcornNode<N extends Node> = N & { start: number, end: number }
const SSR_RENDER_RE = /ssrRenderComponent/ const SSR_RENDER_RE = /ssrRenderComponent/
const PLACEHOLDER_EXACT_RE = /^(fallback|placeholder)$/ const PLACEHOLDER_EXACT_RE = /^(?:fallback|placeholder)$/
const CLIENT_ONLY_NAME_RE = /^(?:_unref\()?(?:_component_)?(?:Lazy|lazy_)?(?:client_only|ClientOnly\)?)$/ const CLIENT_ONLY_NAME_RE = /^(?:_unref\()?(?:_component_)?(?:Lazy|lazy_)?(?:client_only|ClientOnly\)?)$/
const PARSER_OPTIONS = { sourceType: 'module', ecmaVersion: 'latest' } const PARSER_OPTIONS = { sourceType: 'module', ecmaVersion: 'latest' }

View File

@ -85,8 +85,8 @@ export async function generateApp (nuxt: Nuxt, app: NuxtApp, options: { filter?:
changedTemplates.push(template) changedTemplates.push(template)
} }
const perf = performance.measure(fullPath, mark?.name) // TODO: remove when Node 14 reaches EOL const perf = performance.measure(fullPath, mark.name)
const setupTime = perf ? Math.round((perf.duration * 100)) / 100 : 0 // TODO: remove when Node 14 reaches EOL const setupTime = Math.round((perf.duration * 100)) / 100
if (nuxt.options.debug || setupTime > 500) { if (nuxt.options.debug || setupTime > 500) {
logger.info(`Compiled \`${template.filename}\` in ${setupTime}ms`) logger.info(`Compiled \`${template.filename}\` in ${setupTime}ms`)
@ -179,7 +179,12 @@ export async function resolveApp (nuxt: Nuxt, app: NuxtApp) {
app.middleware = [] app.middleware = []
for (const config of reversedConfigs) { for (const config of reversedConfigs) {
const middlewareDir = (config.rootDir === nuxt.options.rootDir ? nuxt.options : config).dir?.middleware || 'middleware' const middlewareDir = (config.rootDir === nuxt.options.rootDir ? nuxt.options : config).dir?.middleware || 'middleware'
const middlewareFiles = await resolveFiles(config.srcDir, `${middlewareDir}/*{${nuxt.options.extensions.join(',')}}`) const middlewareFiles = await resolveFiles(config.srcDir, [
`${middlewareDir}/*{${nuxt.options.extensions.join(',')}}`,
...nuxt.options.future.compatibilityVersion === 4
? [`${middlewareDir}/*/index{${nuxt.options.extensions.join(',')}}`]
: [],
])
for (const file of middlewareFiles) { for (const file of middlewareFiles) {
const name = getNameFromPath(file) const name = getNameFromPath(file)
if (!name) { if (!name) {
@ -200,7 +205,7 @@ export async function resolveApp (nuxt: Nuxt, app: NuxtApp) {
...config.srcDir ...config.srcDir
? await resolveFiles(config.srcDir, [ ? await resolveFiles(config.srcDir, [
`${pluginDir}/*{${nuxt.options.extensions.join(',')}}`, `${pluginDir}/*{${nuxt.options.extensions.join(',')}}`,
`${pluginDir}/*/index{${nuxt.options.extensions.join(',')}}`, // TODO: remove, only scan top-level plugins #18418 `${pluginDir}/*/index{${nuxt.options.extensions.join(',')}}`,
]) ])
: [], : [],
].map(plugin => normalizePlugin(plugin as NuxtPlugin))) ].map(plugin => normalizePlugin(plugin as NuxtPlugin)))

View File

@ -24,7 +24,7 @@ export async function build (nuxt: Nuxt) {
if (event === 'change') { return } if (event === 'change') { return }
const path = resolve(nuxt.options.srcDir, relativePath) const path = resolve(nuxt.options.srcDir, relativePath)
const relativePaths = nuxt.options._layers.map(l => relative(l.config.srcDir || l.cwd, path)) const relativePaths = nuxt.options._layers.map(l => relative(l.config.srcDir || l.cwd, path))
const restartPath = relativePaths.find(relativePath => /^(app\.|error\.|plugins\/|middleware\/|layouts\/)/i.test(relativePath)) const restartPath = relativePaths.find(relativePath => /^(?:app\.|error\.|plugins\/|middleware\/|layouts\/)/i.test(relativePath))
if (restartPath) { if (restartPath) {
if (restartPath.startsWith('app')) { if (restartPath.startsWith('app')) {
app.mainComponent = undefined app.mainComponent = undefined

View File

@ -161,6 +161,8 @@ export async function initNitro (nuxt: Nuxt & { _nitro?: Nitro }) {
'nuxt3/dist', 'nuxt3/dist',
'nuxt-nightly/dist', 'nuxt-nightly/dist',
distDir, distDir,
// Ensure app config files have auto-imports injected even if they are pure .js files
...nuxt.options._layers.map(layer => resolve(layer.config.srcDir, 'app.config')),
], ],
traceInclude: [ traceInclude: [
// force include files used in generated code from the runtime-compiler // force include files used in generated code from the runtime-compiler
@ -218,9 +220,7 @@ export async function initNitro (nuxt: Nuxt & { _nitro?: Nitro }) {
// Add app manifest handler and prerender configuration // Add app manifest handler and prerender configuration
if (nuxt.options.experimental.appManifest) { if (nuxt.options.experimental.appManifest) {
// @ts-expect-error untyped nuxt property const buildId = nuxt.options.runtimeConfig.app.buildId ||= nuxt.options.buildId
const buildId = nuxt.options.appConfig.nuxt!.buildId ||=
(nuxt.options.dev ? 'dev' : nuxt.options.test ? 'test' : nuxt.options.buildId)
const buildTimestamp = Date.now() const buildTimestamp = Date.now()
const manifestPrefix = joinURL(nuxt.options.app.buildAssetsDir, 'builds') const manifestPrefix = joinURL(nuxt.options.app.buildAssetsDir, 'builds')
@ -383,7 +383,7 @@ export async function initNitro (nuxt: Nuxt & { _nitro?: Nitro }) {
tsConfig.compilerOptions.paths[alias] = [absolutePath] tsConfig.compilerOptions.paths[alias] = [absolutePath]
tsConfig.compilerOptions.paths[`${alias}/*`] = [`${absolutePath}/*`] tsConfig.compilerOptions.paths[`${alias}/*`] = [`${absolutePath}/*`]
} else { } else {
tsConfig.compilerOptions.paths[alias] = [absolutePath.replace(/(?<=\w)\.\w+$/g, '')] /* remove extension */ tsConfig.compilerOptions.paths[alias] = [absolutePath.replace(/\b\.\w+$/g, '')] /* remove extension */
} }
} }

View File

@ -10,9 +10,10 @@ import { readPackageJSON, resolvePackageJSON } from 'pkg-types'
import escapeRE from 'escape-string-regexp' import escapeRE from 'escape-string-regexp'
import fse from 'fs-extra' import fse from 'fs-extra'
import { withoutLeadingSlash } from 'ufo' import { withTrailingSlash, withoutLeadingSlash } from 'ufo'
import defu from 'defu' import defu from 'defu'
import { gt, satisfies } from 'semver'
import pagesModule from '../pages/module' import pagesModule from '../pages/module'
import metaModule from '../head/module' import metaModule from '../head/module'
import componentsModule from '../components/module' import componentsModule from '../components/module'
@ -63,6 +64,11 @@ const nightlies = {
'@nuxt/kit': '@nuxt/kit-nightly', '@nuxt/kit': '@nuxt/kit-nightly',
} }
const keyDependencies = [
'@nuxt/kit',
'@nuxt/schema',
]
async function initNuxt (nuxt: Nuxt) { async function initNuxt (nuxt: Nuxt) {
// Register user hooks // Register user hooks
for (const config of nuxt.options._layers.map(layer => layer.config).reverse()) { for (const config of nuxt.options._layers.map(layer => layer.config).reverse()) {
@ -71,6 +77,17 @@ async function initNuxt (nuxt: Nuxt) {
} }
} }
// Restart Nuxt when layer directories are added or removed
const layersDir = withTrailingSlash(resolve(nuxt.options.rootDir, 'layers'))
nuxt.hook('builder:watch', (event, relativePath) => {
const path = resolve(nuxt.options.srcDir, relativePath)
if (event === 'addDir' || event === 'unlinkDir') {
if (path.startsWith(layersDir)) {
return nuxt.callHook('restart', { hard: true })
}
}
})
// Set nuxt instance for useNuxt // Set nuxt instance for useNuxt
nuxtCtx.set(nuxt) nuxtCtx.set(nuxt)
nuxt.hook('close', () => nuxtCtx.unset()) nuxt.hook('close', () => nuxtCtx.unset())
@ -112,6 +129,8 @@ async function initNuxt (nuxt: Nuxt) {
if (nuxt.options.typescript.shim) { if (nuxt.options.typescript.shim) {
opts.references.push({ path: resolve(nuxt.options.buildDir, 'types/vue-shim.d.ts') }) opts.references.push({ path: resolve(nuxt.options.buildDir, 'types/vue-shim.d.ts') })
} }
// Add shims for `#build/*` imports that do not already have matching types
opts.references.push({ path: resolve(nuxt.options.buildDir, 'types/build.d.ts') })
// Add module augmentations directly to NuxtConfig // Add module augmentations directly to NuxtConfig
opts.references.push({ path: resolve(nuxt.options.buildDir, 'types/schema.d.ts') }) opts.references.push({ path: resolve(nuxt.options.buildDir, 'types/schema.d.ts') })
opts.references.push({ path: resolve(nuxt.options.buildDir, 'types/app.config.d.ts') }) opts.references.push({ path: resolve(nuxt.options.buildDir, 'types/app.config.d.ts') })
@ -253,6 +272,9 @@ async function initNuxt (nuxt: Nuxt) {
...nuxt.options._layers.filter(i => i.cwd.includes('node_modules')).map(i => i.cwd as string), ...nuxt.options._layers.filter(i => i.cwd.includes('node_modules')).map(i => i.cwd as string),
) )
// Ensure we can resolve dependencies within layers
nuxt.options.modulesDir.push(...nuxt.options._layers.map(l => resolve(l.cwd, 'node_modules')))
// Init user modules // Init user modules
await nuxt.callHook('modules:before') await nuxt.callHook('modules:before')
const modulesToInstall = [] const modulesToInstall = []
@ -540,6 +562,12 @@ async function initNuxt (nuxt: Nuxt) {
addPlugin(resolve(nuxt.options.appDir, 'plugins/payload.client')) addPlugin(resolve(nuxt.options.appDir, 'plugins/payload.client'))
} }
// Show compatibility version banner when Nuxt is running with a compatibility version
// that is different from the current major version
if (!(satisfies(nuxt._version, nuxt.options.future.compatibilityVersion + '.x'))) {
console.info(`Running with compatibility version \`${nuxt.options.future.compatibilityVersion}\``)
}
await nuxt.callHook('ready', nuxt) await nuxt.callHook('ready', nuxt)
} }
@ -605,6 +633,8 @@ export async function loadNuxt (opts: LoadNuxtOptions): Promise<Nuxt> {
const nuxt = createNuxt(options) const nuxt = createNuxt(options)
await Promise.all(keyDependencies.map(dependency => checkDependencyVersion(dependency, nuxt._version)))
// We register hooks layer-by-layer so any overrides need to be registered separately // We register hooks layer-by-layer so any overrides need to be registered separately
if (opts.overrides?.hooks) { if (opts.overrides?.hooks) {
nuxt.hooks.addHooks(opts.overrides.hooks) nuxt.hooks.addHooks(opts.overrides.hooks)
@ -621,4 +651,15 @@ export async function loadNuxt (opts: LoadNuxtOptions): Promise<Nuxt> {
return nuxt return nuxt
} }
const RESTART_RE = /^(app|error|app\.config)\.(js|ts|mjs|jsx|tsx|vue)$/i async function checkDependencyVersion (name: string, nuxtVersion: string): Promise<void> {
const path = await resolvePath(name).catch(() => null)
if (!path) { return }
const { version } = await readPackageJSON(path)
if (version && gt(nuxtVersion, version)) {
console.warn(`[nuxt] Expected \`${name}\` to be at least \`${nuxtVersion}\` but got \`${version}\`. This might lead to unexpected behavior. Check your package.json or refresh your lockfile.`)
}
}
const RESTART_RE = /^(?:app|error|app\.config)\.(?:js|ts|mjs|jsx|tsx|vue)$/i

View File

@ -22,7 +22,7 @@ export const nuxtImportProtections = (nuxt: { options: NuxtOptions }, options: {
]) ])
patterns.push([ patterns.push([
/^((|~|~~|@|@@)\/)?nuxt\.config(\.|$)/, /^((~|~~|@|@@)?\/)?nuxt\.config(\.|$)/,
'Importing directly from a `nuxt.config` file is not allowed. Instead, use runtime config or a module.', 'Importing directly from a `nuxt.config` file is not allowed. Instead, use runtime config or a module.',
]) ])

View File

@ -6,11 +6,17 @@ import type { H3Event } from 'h3'
import { withTrailingSlash } from 'ufo' import { withTrailingSlash } from 'ufo'
import { getContext } from 'unctx' import { getContext } from 'unctx'
import { isVNode } from 'vue'
import type { NitroApp } from '#internal/nitro/app' import type { NitroApp } from '#internal/nitro/app'
// @ts-expect-error virtual file // @ts-expect-error virtual file
import { rootDir } from '#internal/dev-server-logs-options' import { rootDir } from '#internal/dev-server-logs-options'
const devReducers: Record<string, (data: any) => any> = {
VNode: data => isVNode(data) ? { type: data.type, props: data.props } : undefined,
URL: data => data instanceof URL ? data.toString() : undefined,
}
interface NuxtDevAsyncContext { interface NuxtDevAsyncContext {
logs: LogObject[] logs: LogObject[]
event: H3Event event: H3Event
@ -54,9 +60,10 @@ export default (nitroApp: NitroApp) => {
const ctx = asyncContext.tryUse() const ctx = asyncContext.tryUse()
if (!ctx) { return } if (!ctx) { return }
try { try {
htmlContext.bodyAppend.unshift(`<script type="application/json" id="__NUXT_LOGS__">${stringify(ctx.logs, ctx.event.context._payloadReducers)}</script>`) htmlContext.bodyAppend.unshift(`<script type="application/json" id="__NUXT_LOGS__">${stringify(ctx.logs, { ...devReducers, ...ctx.event.context._payloadReducers })}</script>`)
} catch (e) { } catch (e) {
console.warn('[nuxt] Failed to stringify dev server logs. You can define your own reducer/reviver for rich types following the instructions in https://nuxt.com/docs/api/composables/use-nuxt-app#payload.', e) const shortError = e instanceof Error && 'toString' in e ? ` Received \`${e.toString()}\`.` : ''
console.warn(`[nuxt] Failed to stringify dev server logs.${shortError} You can define your own reducer/reviver for rich types following the instructions in https://nuxt.com/docs/api/composables/use-nuxt-app#payload.`)
} }
}) })
} }
@ -70,8 +77,8 @@ function getStack () {
return stack.stack?.replace(EXCLUDE_TRACE_RE, '').replace(/^Error.*\n/, '') || '' return stack.stack?.replace(EXCLUDE_TRACE_RE, '').replace(/^Error.*\n/, '') || ''
} }
const FILENAME_RE = /at.*\(([^:)]+)[):]/ const FILENAME_RE = /at[^(]*\(([^:)]+)[):]/
const FILENAME_RE_GLOBAL = /at.*\(([^)]+)\)/g const FILENAME_RE_GLOBAL = /at[^(]*\(([^)]+)\)/g
function extractFilenameFromStack (stacktrace: string) { function extractFilenameFromStack (stacktrace: string) {
return stacktrace.match(FILENAME_RE)?.[1].replace(withTrailingSlash(rootDir), '') return stacktrace.match(FILENAME_RE)?.[1].replace(withTrailingSlash(rootDir), '')
} }

View File

@ -21,7 +21,7 @@ import type { HeadEntryOptions } from '@unhead/schema'
import type { Link, Script, Style } from '@unhead/vue' import type { Link, Script, Style } from '@unhead/vue'
import { createServerHead } from '@unhead/vue' import { createServerHead } from '@unhead/vue'
import { defineRenderHandler, getRouteRules, useAppConfig, useRuntimeConfig, useStorage } from '#internal/nitro' import { defineRenderHandler, getRouteRules, useRuntimeConfig, useStorage } from '#internal/nitro'
import { useNitroApp } from '#internal/nitro/app' import { useNitroApp } from '#internal/nitro/app'
// @ts-expect-error virtual file // @ts-expect-error virtual file
@ -327,7 +327,7 @@ export default defineRenderHandler(async (event): Promise<Partial<RenderResponse
// Whether we are prerendering route // Whether we are prerendering route
const _PAYLOAD_EXTRACTION = import.meta.prerender && process.env.NUXT_PAYLOAD_EXTRACTION && !ssrContext.noSSR && !isRenderingIsland const _PAYLOAD_EXTRACTION = import.meta.prerender && process.env.NUXT_PAYLOAD_EXTRACTION && !ssrContext.noSSR && !isRenderingIsland
const payloadURL = _PAYLOAD_EXTRACTION ? joinURL(ssrContext.runtimeConfig.app.baseURL, url, process.env.NUXT_JSON_PAYLOADS ? '_payload.json' : '_payload.js') + '?' + (useAppConfig().nuxt as any)?.buildId : undefined const payloadURL = _PAYLOAD_EXTRACTION ? joinURL(ssrContext.runtimeConfig.app.cdnURL || ssrContext.runtimeConfig.app.baseURL, url, process.env.NUXT_JSON_PAYLOADS ? '_payload.json' : '_payload.js') + '?' + ssrContext.runtimeConfig.app.buildId : undefined
if (import.meta.prerender) { if (import.meta.prerender) {
ssrContext.payload.prerenderedAt = Date.now() ssrContext.payload.prerenderedAt = Date.now()
} }
@ -646,7 +646,7 @@ function getServerComponentHTML (body: string[]): string {
const SSR_SLOT_TELEPORT_MARKER = /^uid=([^;]*);slot=(.*)$/ const SSR_SLOT_TELEPORT_MARKER = /^uid=([^;]*);slot=(.*)$/
const SSR_CLIENT_TELEPORT_MARKER = /^uid=([^;]*);client=(.*)$/ const SSR_CLIENT_TELEPORT_MARKER = /^uid=([^;]*);client=(.*)$/
const SSR_CLIENT_SLOT_MARKER = /^island-slot=(?:[^;]*);(.*)$/ const SSR_CLIENT_SLOT_MARKER = /^island-slot=[^;]*;(.*)$/
function getSlotIslandResponse (ssrContext: NuxtSSRContext): NuxtIslandResponse['slots'] { function getSlotIslandResponse (ssrContext: NuxtSSRContext): NuxtIslandResponse['slots'] {
if (!ssrContext.islandContext || !Object.keys(ssrContext.islandContext.slots).length) { return undefined } if (!ssrContext.islandContext || !Object.keys(ssrContext.islandContext.slots).length) { return undefined }

View File

@ -1,6 +1,6 @@
import { existsSync } from 'node:fs' import { existsSync } from 'node:fs'
import { mkdir, writeFile } from 'node:fs/promises' import { mkdir, writeFile } from 'node:fs/promises'
import { pathToFileURL } from 'node:url' import { fileURLToPath, pathToFileURL } from 'node:url'
import { dirname, resolve } from 'pathe' import { dirname, resolve } from 'pathe'
import chokidar from 'chokidar' import chokidar from 'chokidar'
import { interopDefault } from 'mlly' import { interopDefault } from 'mlly'
@ -26,7 +26,7 @@ export default defineNuxtModule({
const resolver = createResolver(import.meta.url) const resolver = createResolver(import.meta.url)
// Initialize untyped/jiti loader // Initialize untyped/jiti loader
const _resolveSchema = jiti(dirname(import.meta.url), { const _resolveSchema = jiti(dirname(fileURLToPath(import.meta.url)), {
esmResolve: true, esmResolve: true,
interopDefault: true, interopDefault: true,
cache: false, cache: false,

View File

@ -130,6 +130,12 @@ declare module '#app' {
} }
} }
declare module '#app/defaults' {
type DefaultAsyncDataErrorValue = ${ctx.nuxt.options.future.compatibilityVersion === 4 ? 'undefined' : 'null'}
type DefaultAsyncDataValue = ${ctx.nuxt.options.future.compatibilityVersion === 4 ? 'undefined' : 'null'}
type DefaultErrorValue = ${ctx.nuxt.options.future.compatibilityVersion === 4 ? 'undefined' : 'null'}
}
declare module 'vue' { declare module 'vue' {
interface ComponentCustomProperties extends NuxtAppInjections { } interface ComponentCustomProperties extends NuxtAppInjections { }
} }
@ -266,10 +272,13 @@ export const useRuntimeConfig = () => window?.__NUXT__?.config || {}
export const appConfigDeclarationTemplate: NuxtTemplate = { export const appConfigDeclarationTemplate: NuxtTemplate = {
filename: 'types/app.config.d.ts', filename: 'types/app.config.d.ts',
getContents ({ app, nuxt }) { getContents ({ app, nuxt }) {
const typesDir = join(nuxt.options.buildDir, 'types')
const configPaths = app.configs.map(path => relative(typesDir, path).replace(/\b\.\w+$/g, ''))
return ` return `
import type { CustomAppConfig } from 'nuxt/schema' import type { CustomAppConfig } from 'nuxt/schema'
import type { Defu } from 'defu' import type { Defu } from 'defu'
${app.configs.map((id: string, index: number) => `import ${`cfg${index}`} from ${JSON.stringify(id.replace(/(?<=\w)\.\w+$/g, ''))}`).join('\n')} ${configPaths.map((id: string, index: number) => `import ${`cfg${index}`} from ${JSON.stringify(id)}`).join('\n')}
declare const inlineConfig = ${JSON.stringify(nuxt.options.appConfig, null, 2)} declare const inlineConfig = ${JSON.stringify(nuxt.options.appConfig, null, 2)}
type ResolvedAppConfig = Defu<typeof inlineConfig, [${app.configs.map((_id: string, index: number) => `typeof cfg${index}`).join(', ')}]> type ResolvedAppConfig = Defu<typeof inlineConfig, [${app.configs.map((_id: string, index: number) => `typeof cfg${index}`).join(', ')}]>
@ -393,11 +402,43 @@ export const nuxtConfigTemplate: NuxtTemplate = {
`export const devRootDir = ${ctx.nuxt.options.dev ? JSON.stringify(ctx.nuxt.options.rootDir) : 'null'}`, `export const devRootDir = ${ctx.nuxt.options.dev ? JSON.stringify(ctx.nuxt.options.rootDir) : 'null'}`,
`export const devLogs = ${JSON.stringify(ctx.nuxt.options.features.devLogs)}`, `export const devLogs = ${JSON.stringify(ctx.nuxt.options.features.devLogs)}`,
`export const nuxtLinkDefaults = ${JSON.stringify(ctx.nuxt.options.experimental.defaults.nuxtLink)}`, `export const nuxtLinkDefaults = ${JSON.stringify(ctx.nuxt.options.experimental.defaults.nuxtLink)}`,
`export const asyncDataDefaults = ${JSON.stringify(ctx.nuxt.options.experimental.defaults.useAsyncData)}`, `export const asyncDataDefaults = ${JSON.stringify({
...ctx.nuxt.options.experimental.defaults.useAsyncData,
value: ctx.nuxt.options.experimental.defaults.useAsyncData.value === 'null' ? null : undefined,
errorValue: ctx.nuxt.options.experimental.defaults.useAsyncData.errorValue === 'null' ? null : undefined,
})}`,
`export const resetAsyncDataToUndefined = ${ctx.nuxt.options.experimental.resetAsyncDataToUndefined}`,
`export const nuxtDefaultErrorValue = ${ctx.nuxt.options.future.compatibilityVersion === 4 ? 'undefined' : 'null'}`,
`export const fetchDefaults = ${JSON.stringify(fetchDefaults)}`, `export const fetchDefaults = ${JSON.stringify(fetchDefaults)}`,
`export const vueAppRootContainer = ${ctx.nuxt.options.app.rootId ? `'#${ctx.nuxt.options.app.rootId}'` : `'body > ${ctx.nuxt.options.app.rootTag}'`}`, `export const vueAppRootContainer = ${ctx.nuxt.options.app.rootId ? `'#${ctx.nuxt.options.app.rootId}'` : `'body > ${ctx.nuxt.options.app.rootTag}'`}`,
`export const viewTransition = ${ctx.nuxt.options.experimental.viewTransition}`, `export const viewTransition = ${ctx.nuxt.options.experimental.viewTransition}`,
`export const buildId = ${JSON.stringify(ctx.nuxt.options.buildId)}`, `export const appId = ${JSON.stringify(ctx.nuxt.options.appId)}`,
].join('\n\n') ].join('\n\n')
}, },
} }
const TYPE_FILENAME_RE = /\.([cm])?[jt]s$/
const DECLARATION_RE = /\.d\.[cm]?ts$/
export const buildTypeTemplate: NuxtTemplate = {
filename: 'types/build.d.ts',
getContents ({ app }) {
let declarations = ''
for (const file of app.templates) {
if (file.write || !file.filename || DECLARATION_RE.test(file.filename)) {
continue
}
if (TYPE_FILENAME_RE.test(file.filename)) {
const typeFilenames = new Set([file.filename.replace(TYPE_FILENAME_RE, '.d.$1ts'), file.filename.replace(TYPE_FILENAME_RE, '.d.ts')])
if (app.templates.some(f => f.filename && typeFilenames.has(f.filename))) {
continue
}
}
declarations += 'declare module ' + JSON.stringify(join('#build', file.filename)) + ';\n'
}
return declarations
},
}

View File

@ -34,7 +34,7 @@ export function isVue (id: string, opts: { type?: Array<'template' | 'script' |
return true return true
} }
const JS_RE = /\.((c|m)?j|t)sx?$/ const JS_RE = /\.(?:[cm]?j|t)sx?$/
export function isJS (id: string) { export function isJS (id: string) {
// JavaScript files // JavaScript files

View File

@ -135,6 +135,7 @@ export const scriptsStubsPreset = {
'useScriptGoogleMaps', 'useScriptGoogleMaps',
'useScriptNpm', 'useScriptNpm',
], ],
priority: -1,
from: '#app/composables/script-stubs', from: '#app/composables/script-stubs',
} satisfies InlinePreset } satisfies InlinePreset

View File

@ -422,11 +422,6 @@ export default defineNuxtModule({
getContents: () => 'export { START_LOCATION, useRoute } from \'vue-router\'', getContents: () => 'export { START_LOCATION, useRoute } from \'vue-router\'',
}) })
// Optimize vue-router to ensure we share the same injection symbol
nuxt.options.vite.optimizeDeps = nuxt.options.vite.optimizeDeps || {}
nuxt.options.vite.optimizeDeps.include = nuxt.options.vite.optimizeDeps.include || []
nuxt.options.vite.optimizeDeps.include.push('vue-router')
nuxt.options.vite.resolve = nuxt.options.vite.resolve || {} nuxt.options.vite.resolve = nuxt.options.vite.resolve || {}
nuxt.options.vite.resolve.dedupe = nuxt.options.vite.resolve.dedupe || [] nuxt.options.vite.resolve.dedupe = nuxt.options.vite.resolve.dedupe || []
nuxt.options.vite.resolve.dedupe.push('vue-router') nuxt.options.vite.resolve.dedupe.push('vue-router')

View File

@ -1,10 +1,13 @@
import { createUnplugin } from 'unplugin' import { createUnplugin } from 'unplugin'
import MagicString from 'magic-string' import MagicString from 'magic-string'
import type { Nuxt } from '@nuxt/schema' import type { Nuxt } from '@nuxt/schema'
import { stripLiteral } from 'strip-literal'
import { isVue } from '../../core/utils' import { isVue } from '../../core/utils'
const INJECTION_RE = /\b_ctx\.\$route\b/g const INJECTION_RE_TEMPLATE = /\b_ctx\.\$route\b/g
const INJECTION_SINGLE_RE = /\b_ctx\.\$route\b/ const INJECTION_RE_SCRIPT = /\bthis\.\$route\b/g
const INJECTION_SINGLE_RE = /\bthis\.\$route\b|\b_ctx\.\$route\b/
export const RouteInjectionPlugin = (nuxt: Nuxt) => createUnplugin(() => { export const RouteInjectionPlugin = (nuxt: Nuxt) => createUnplugin(() => {
return { return {
@ -14,14 +17,30 @@ export const RouteInjectionPlugin = (nuxt: Nuxt) => createUnplugin(() => {
return isVue(id, { type: ['template', 'script'] }) return isVue(id, { type: ['template', 'script'] })
}, },
transform (code) { transform (code) {
if (!INJECTION_SINGLE_RE.test(code) || code.includes('_ctx._.provides[__nuxt_route_symbol')) { return } if (!INJECTION_SINGLE_RE.test(code) || code.includes('_ctx._.provides[__nuxt_route_symbol') || code.includes('this._.provides[__nuxt_route_symbol')) { return }
let replaced = false let replaced = false
const s = new MagicString(code) const s = new MagicString(code)
s.replace(INJECTION_RE, () => { const strippedCode = stripLiteral(code)
replaced = true
return '(_ctx._.provides[__nuxt_route_symbol] || _ctx.$route)' // Local helper function for regex-based replacements using `strippedCode`
}) const replaceMatches = (regExp: RegExp, replacement: string) => {
for (const match of strippedCode.matchAll(regExp)) {
const start = match.index!
const end = start + match[0].length
s.overwrite(start, end, replacement)
if (!replaced) {
replaced = true
}
}
}
// handles `$route` in template
replaceMatches(INJECTION_RE_TEMPLATE, '(_ctx._.provides[__nuxt_route_symbol] || _ctx.$route)')
// handles `this.$route` in script
replaceMatches(INJECTION_RE_SCRIPT, '(this._.provides[__nuxt_route_symbol] || this.$route)')
if (replaced) { if (replaced) {
s.prepend('import { PageRouteSymbol as __nuxt_route_symbol } from \'#app/components/injections\';\n') s.prepend('import { PageRouteSymbol as __nuxt_route_symbol } from \'#app/components/injections\';\n')
} }

View File

@ -23,7 +23,7 @@ export default defineNuxtPlugin(async () => {
// Implementation // Implementation
const OPTIONAL_PARAM_RE = /^\/?:.*(\?|\(\.\*\)\*)$/ const OPTIONAL_PARAM_RE = /^\/?:.*(?:\?|\(\.\*\)\*)$/
function processRoutes (routes: RouteRecordRaw[], currentPath = '/', routesToPrerender = new Set<string>()) { function processRoutes (routes: RouteRecordRaw[], currentPath = '/', routesToPrerender = new Set<string>()) {
for (const route of routes) { for (const route of routes) {

View File

@ -135,7 +135,7 @@ export async function generateRoutesFromFiles (files: ScannedFile[], options: Ge
return prepareRoutes(routes) return prepareRoutes(routes)
} }
const SFC_SCRIPT_RE = /<script\s*[^>]*>([\s\S]*?)<\/script\s*[^>]*>/i const SFC_SCRIPT_RE = /<script[^>]*>([\s\S]*?)<\/script[^>]*>/i
export function extractScriptContent (html: string) { export function extractScriptContent (html: string) {
const match = html.match(SFC_SCRIPT_RE) const match = html.match(SFC_SCRIPT_RE)
@ -146,7 +146,7 @@ export function extractScriptContent (html: string) {
return null return null
} }
const PAGE_META_RE = /(definePageMeta\([\s\S]*?\))/ const PAGE_META_RE = /definePageMeta\([\s\S]*?\)/
const DYNAMIC_META_KEY = '__nuxt_dynamic_meta_key' as const const DYNAMIC_META_KEY = '__nuxt_dynamic_meta_key' as const
const pageContentsCache: Record<string, string> = {} const pageContentsCache: Record<string, string> = {}
@ -261,7 +261,7 @@ function getRoutePath (tokens: SegmentToken[]): string {
}, '/') }, '/')
} }
const PARAM_CHAR_RE = /[\w\d_.]/ const PARAM_CHAR_RE = /[\w.]/
function parseSegment (segment: string) { function parseSegment (segment: string) {
let state: SegmentParserState = SegmentParserState.initial let state: SegmentParserState = SegmentParserState.initial
@ -537,7 +537,7 @@ export function pathToNitroGlob (path: string) {
return null return null
} }
return path.replace(/\/(?:[^:/]+)?:\w+.*$/, '/**') return path.replace(/\/[^:/]*:\w.*$/, '/**')
} }
export function resolveRoutePaths (page: NuxtPage, parent = '/'): string[] { export function resolveRoutePaths (page: NuxtPage, parent = '/'): string[] {

View File

@ -1,11 +1,32 @@
import { fileURLToPath } from 'node:url' import { fileURLToPath } from 'node:url'
import { describe, expect, it } from 'vitest' import { afterEach, describe, expect, it, vi } from 'vitest'
import { normalize } from 'pathe' import { normalize } from 'pathe'
import { withoutTrailingSlash } from 'ufo' import { withoutTrailingSlash } from 'ufo'
import { readPackageJSON } from 'pkg-types'
import { inc } from 'semver'
import { loadNuxt } from '../src' import { loadNuxt } from '../src'
import { version } from '../package.json'
const repoRoot = withoutTrailingSlash(normalize(fileURLToPath(new URL('../../../', import.meta.url)))) const repoRoot = withoutTrailingSlash(normalize(fileURLToPath(new URL('../../../', import.meta.url))))
vi.stubGlobal('console', {
...console,
error: vi.fn(console.error),
warn: vi.fn(console.warn),
})
vi.mock('pkg-types', async (og) => {
const originalPkgTypes = (await og<typeof import('pkg-types')>())
return {
...originalPkgTypes,
readPackageJSON: vi.fn(originalPkgTypes.readPackageJSON),
}
})
afterEach(() => {
vi.clearAllMocks()
})
describe('loadNuxt', () => { describe('loadNuxt', () => {
it('respects hook overrides', async () => { it('respects hook overrides', async () => {
let hookRan = false let hookRan = false
@ -24,3 +45,44 @@ describe('loadNuxt', () => {
expect(hookRan).toBe(true) expect(hookRan).toBe(true)
}) })
}) })
describe('dependency mismatch', () => {
it('expect mismatched dependency to log a warning', async () => {
vi.mocked(readPackageJSON).mockReturnValue(Promise.resolve({
version: '3.0.0',
}))
const nuxt = await loadNuxt({
cwd: repoRoot,
})
expect(console.warn).toHaveBeenCalledWith(`[nuxt] Expected \`@nuxt/kit\` to be at least \`${version}\` but got \`3.0.0\`. This might lead to unexpected behavior. Check your package.json or refresh your lockfile.`)
expect(console.warn).toHaveBeenCalledWith(`[nuxt] Expected \`@nuxt/schema\` to be at least \`${version}\` but got \`3.0.0\`. This might lead to unexpected behavior. Check your package.json or refresh your lockfile.`)
vi.mocked(readPackageJSON).mockRestore()
await nuxt.close()
})
it.each([
{
name: 'nuxt version is lower',
depVersion: inc(version, 'minor'),
},
{
name: 'version matches',
depVersion: version,
},
])('expect no warning when $name.', async ({ depVersion }) => {
vi.mocked(readPackageJSON).mockReturnValue(Promise.resolve({
depVersion,
}))
const nuxt = await loadNuxt({
cwd: repoRoot,
})
expect(console.warn).not.toHaveBeenCalled()
await nuxt.close()
vi.mocked(readPackageJSON).mockRestore()
})
})

View File

@ -0,0 +1,73 @@
import { describe, expect, it } from 'vitest'
import { compileScript, compileTemplate, parse } from '@vue/compiler-sfc'
import type { Plugin } from 'vite'
import type { Nuxt } from '@nuxt/schema'
import { RouteInjectionPlugin } from '../src/pages/plugins/route-injection'
describe('route-injection:transform', () => {
const injectionPlugin = RouteInjectionPlugin({ options: { sourcemap: { client: false, server: false } } } as Nuxt).raw({}, { framework: 'rollup' }) as Plugin
const transform = async (source: string) => {
const result = await (injectionPlugin.transform! as Function).call({ error: null, warn: null } as any, source, 'test.vue')
const code: string = typeof result === 'string' ? result : result?.code
let depth = 0
return code.split('\n').map((l) => {
l = l.trim()
if (l.match(/^[}\]]/)) { depth-- }
const res = ''.padStart(depth * 2, ' ') + l
if (l.match(/[{[]$/)) { depth++ }
return res
}).join('\n')
}
it('should correctly inject route in template', async () => {
const sfc = `<template>{{ $route.path }}</template>`
const res = compileTemplate({
filename: 'test.vue',
id: 'test.vue',
source: sfc,
})
const transformResult = await transform(res.code)
expect(transformResult).toMatchInlineSnapshot(`
"import { PageRouteSymbol as __nuxt_route_symbol } from '#app/components/injections';
import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock("template", null, [
_createTextVNode(_toDisplayString((_ctx._.provides[__nuxt_route_symbol] || _ctx.$route).path), 1 /* TEXT */)
]))
}"
`)
})
it('should correctly inject route in options api', async () => {
const sfc = `
<template>{{ thing }}</template>
<script>
export default {
computed: {
thing () {
return this.$route.path
}
}
}
</script>
`
const res = compileScript(parse(sfc).descriptor, { id: 'test.vue' })
const transformResult = await transform(res.content)
expect(transformResult).toMatchInlineSnapshot(`
"import { PageRouteSymbol as __nuxt_route_symbol } from '#app/components/injections';
export default {
computed: {
thing () {
return (this._.provides[__nuxt_route_symbol] || this.$route).path
}
}
}
"
`)
})
})

View File

@ -182,7 +182,7 @@ describe('treeshake client only in ssr', () => {
expect(treeshaken).not.toContain('ssrRenderComponent(_unref(HelloWorld') expect(treeshaken).not.toContain('ssrRenderComponent(_unref(HelloWorld')
expect(treeshaken).toContain('ssrRenderComponent(_unref(Glob') expect(treeshaken).toContain('ssrRenderComponent(_unref(Glob')
} }
expect(treeshaken.replace(/data-v-[\d\w]{8}/g, 'data-v-one-hash').replace(/scoped=[\d\w]{8}/g, 'scoped=one-hash')).toMatchSnapshot() expect(treeshaken.replace(/data-v-\w{8}/g, 'data-v-one-hash').replace(/scoped=\w{8}/g, 'scoped=one-hash')).toMatchSnapshot()
}) })
} }

View File

@ -35,16 +35,16 @@
}, },
"devDependencies": { "devDependencies": {
"@nuxt/telemetry": "2.5.4", "@nuxt/telemetry": "2.5.4",
"@nuxt/ui-templates": "1.3.3", "@nuxt/ui-templates": "1.3.4",
"@types/file-loader": "5.0.4", "@types/file-loader": "5.0.4",
"@types/pug": "2.0.10", "@types/pug": "2.0.10",
"@types/sass-loader": "8.0.8", "@types/sass-loader": "8.0.8",
"@unhead/schema": "1.9.10", "@unhead/schema": "1.9.11",
"@vitejs/plugin-vue": "5.0.4", "@vitejs/plugin-vue": "5.0.4",
"@vitejs/plugin-vue-jsx": "3.1.0", "@vitejs/plugin-vue-jsx": "3.1.0",
"@vue/compiler-core": "3.4.27", "@vue/compiler-core": "3.4.27",
"@vue/compiler-sfc": "3.4.27", "@vue/compiler-sfc": "3.4.27",
"@vue/language-core": "2.0.16", "@vue/language-core": "2.0.19",
"c12": "1.10.0", "c12": "1.10.0",
"esbuild-loader": "4.1.0", "esbuild-loader": "4.1.0",
"h3": "1.11.1", "h3": "1.11.1",
@ -54,7 +54,7 @@
"unbuild": "latest", "unbuild": "latest",
"unctx": "2.3.1", "unctx": "2.3.1",
"unenv": "1.9.0", "unenv": "1.9.0",
"vite": "5.2.11", "vite": "5.2.12",
"vue": "3.4.27", "vue": "3.4.27",
"vue-bundle-renderer": "2.1.0", "vue-bundle-renderer": "2.1.0",
"vue-loader": "17.4.2", "vue-loader": "17.4.2",
@ -71,7 +71,7 @@
"scule": "^1.3.0", "scule": "^1.3.0",
"std-env": "^3.7.0", "std-env": "^3.7.0",
"ufo": "^1.5.3", "ufo": "^1.5.3",
"unimport": "^3.7.1", "unimport": "^3.7.2",
"uncrypto": "^0.1.3", "uncrypto": "^0.1.3",
"untyped": "^1.4.2" "untyped": "^1.4.2"
}, },

View File

@ -45,7 +45,17 @@ export default defineUntypedSchema({
/** /**
* The base path of your Nuxt application. * The base path of your Nuxt application.
* *
* This can be set at runtime by setting the NUXT_APP_BASE_URL environment variable. * For example:
* @example
* ```ts
* export default defineNuxtConfig({
* app: {
* baseURL: '/prefix/'
* }
* })
* ```
*
* This can also be set at runtime by setting the NUXT_APP_BASE_URL environment variable.
* @example * @example
* ```bash * ```bash
* NUXT_APP_BASE_URL=/prefix/ node .output/server/index.mjs * NUXT_APP_BASE_URL=/prefix/ node .output/server/index.mjs
@ -63,6 +73,16 @@ export default defineUntypedSchema({
/** /**
* An absolute URL to serve the public folder from (production-only). * An absolute URL to serve the public folder from (production-only).
* *
* For example:
* @example
* ```ts
* export default defineNuxtConfig({
* app: {
* cdnURL: 'https://mycdn.org/'
* }
* })
* ```
*
* This can be set to a different value at runtime by setting the `NUXT_APP_CDN_URL` environment variable. * This can be set to a different value at runtime by setting the `NUXT_APP_CDN_URL` environment variable.
* @example * @example
* ```bash * ```bash
@ -241,6 +261,7 @@ export default defineUntypedSchema({
/** /**
* Boolean or a path to an HTML file with the contents of which will be inserted into any HTML page * Boolean or a path to an HTML file with the contents of which will be inserted into any HTML page
* rendered with `ssr: false`. * rendered with `ssr: false`.
*
* - If it is unset, it will use `~/app/spa-loading-template.html` file in one of your layers, if it exists. * - If it is unset, it will use `~/app/spa-loading-template.html` file in one of your layers, if it exists.
* - If it is false, no SPA loading indicator will be loaded. * - If it is false, no SPA loading indicator will be loaded.
* - If true, Nuxt will look for `~/app/spa-loading-template.html` file in one of your layers, or a * - If true, Nuxt will look for `~/app/spa-loading-template.html` file in one of your layers, or a

View File

@ -154,11 +154,23 @@ export default defineUntypedSchema({
$resolve: async (val: string | undefined, get): Promise<string> => resolve(await get('rootDir') as string, val || '.nuxt'), $resolve: async (val: string | undefined, get): Promise<string> => resolve(await get('rootDir') as string, val || '.nuxt'),
}, },
/**
* For multi-app projects, the unique name of the Nuxt application.
*/
appId: {
$resolve: (val: string) => val ?? 'nuxt-app',
},
/** /**
* A unique identifier matching the build. This may contain the hash of the current state of the project. * A unique identifier matching the build. This may contain the hash of the current state of the project.
*/ */
buildId: { buildId: {
$resolve: (val: string) => val ?? randomUUID(), $resolve: async (val: string | undefined, get): Promise<string> => {
if (typeof val === 'string') { return val }
const [isDev, isTest] = await Promise.all([get('dev') as Promise<boolean>, get('test') as Promise<boolean>])
return isDev ? 'dev' : isTest ? 'test' : randomUUID()
},
}, },
/** /**
@ -236,7 +248,8 @@ export default defineUntypedSchema({
* *
* Nuxt tries to resolve each item in the modules array using node require path * Nuxt tries to resolve each item in the modules array using node require path
* (in `node_modules`) and then will be resolved from project `srcDir` if `~` alias is used. * (in `node_modules`) and then will be resolved from project `srcDir` if `~` alias is used.
* @note Modules are executed sequentially so the order is important. * @note Modules are executed sequentially so the order is important. First, the modules defined in `nuxt.config.ts` are loaded. Then, modules found in the `modules/`
* directory are executed, and they load in alphabetical order.
* @example * @example
* ```js * ```js
* modules: [ * modules: [
@ -527,11 +540,12 @@ export default defineUntypedSchema({
*/ */
runtimeConfig: { runtimeConfig: {
$resolve: async (val: RuntimeConfig, get): Promise<Record<string, unknown>> => { $resolve: async (val: RuntimeConfig, get): Promise<Record<string, unknown>> => {
const app = await get('app') as Record<string, string> const [app, buildId] = await Promise.all([get('app') as Promise<Record<string, string>>, get('buildId') as Promise<string>])
provideFallbackValues(val) provideFallbackValues(val)
return defu(val, { return defu(val, {
public: {}, public: {},
app: { app: {
buildId,
baseURL: app.baseURL, baseURL: app.baseURL,
buildAssetsDir: app.buildAssetsDir, buildAssetsDir: app.buildAssetsDir,
cdnURL: app.cdnURL, cdnURL: app.cdnURL,

View File

@ -29,6 +29,7 @@ export default defineUntypedSchema({
* compileTemplate: true, * compileTemplate: true,
* templateUtils: true, * templateUtils: true,
* relativeWatchPaths: true, * relativeWatchPaths: true,
* resetAsyncDataToUndefined: true,
* defaults: { * defaults: {
* useAsyncData: { * useAsyncData: {
* deep: true * deep: true
@ -45,6 +46,11 @@ export default defineUntypedSchema({
* @type {3 | 4} * @type {3 | 4}
*/ */
compatibilityVersion: 3, compatibilityVersion: 3,
/**
* This enables early access to the experimental multi-app support.
* @see [Nuxt Issue #21635](https://github.com/nuxt/nuxt/issues/21635)
*/
multiApp: false,
/** /**
* This enables 'Bundler' module resolution mode for TypeScript, which is the recommended setting * This enables 'Bundler' module resolution mode for TypeScript, which is the recommended setting
* for frameworks like Nuxt and Vite. * for frameworks like Nuxt and Vite.
@ -136,8 +142,18 @@ export default defineUntypedSchema({
/** /**
* Tree shakes contents of client-only components from server bundle. * Tree shakes contents of client-only components from server bundle.
* @see [Nuxt PR #5750](https://github.com/nuxt/framework/pull/5750) * @see [Nuxt PR #5750](https://github.com/nuxt/framework/pull/5750)
* @deprecated This option will no longer be configurable in Nuxt v4
*/ */
treeshakeClientOnly: true, treeshakeClientOnly: {
async $resolve (val, get) {
const isV4 = ((await get('future') as Record<string, unknown>).compatibilityVersion === 4)
if (isV4 && val === false) {
console.warn('Enabling `experimental.treeshakeClientOnly` in v4 compatibility mode as it will no longer be configurable in Nuxt v4.')
return true
}
return val ?? true
},
},
/** /**
* Emit `app:chunkError` hook when there is an error loading vite/webpack * Emit `app:chunkError` hook when there is an error loading vite/webpack
@ -246,19 +262,51 @@ export default defineUntypedSchema({
/** /**
* Config schema support * Config schema support
* @see [Nuxt Issue #15592](https://github.com/nuxt/nuxt/issues/15592) * @see [Nuxt Issue #15592](https://github.com/nuxt/nuxt/issues/15592)
* @deprecated This option will no longer be configurable in Nuxt v4
*/ */
configSchema: true, configSchema: {
async $resolve (val, get) {
const isV4 = ((await get('future') as Record<string, unknown>).compatibilityVersion === 4)
if (isV4 && val === false) {
console.warn('Enabling `experimental.configSchema` in v4 compatibility mode as it will no longer be configurable in Nuxt v4.')
return true
}
return val ?? true
},
},
/** /**
* Whether or not to add a compatibility layer for modules, plugins or user code relying on the old * Whether or not to add a compatibility layer for modules, plugins or user code relying on the old
* `@vueuse/head` API. * `@vueuse/head` API.
* *
* This can be disabled for most Nuxt sites to reduce the client-side bundle by ~0.5kb. * This is disabled to reduce the client-side bundle by ~0.5kb.
* @deprecated This feature will be removed in Nuxt v4.
*/ */
polyfillVueUseHead: false, polyfillVueUseHead: {
async $resolve (val, get) {
const isV4 = ((await get('future') as Record<string, unknown>).compatibilityVersion === 4)
if (isV4 && val === true) {
console.warn('Disabling `experimental.polyfillVueUseHead` in v4 compatibility mode as it will no longer be configurable in Nuxt v4.')
return false
}
return val ?? false
},
},
/** Allow disabling Nuxt SSR responses by setting the `x-nuxt-no-ssr` header. */ /**
respectNoSSRHeader: false, * Allow disabling Nuxt SSR responses by setting the `x-nuxt-no-ssr` header.
* @deprecated This feature will be removed in Nuxt v4.
*/
respectNoSSRHeader: {
async $resolve (val, get) {
const isV4 = ((await get('future') as Record<string, unknown>).compatibilityVersion === 4)
if (isV4 && val === true) {
console.warn('Disabling `experimental.respectNoSSRHeader` in v4 compatibility mode as it will no longer be configurable in Nuxt v4.')
return false
}
return val ?? false
},
},
/** Resolve `~`, `~~`, `@` and `@@` aliases located within layers with respect to their layer source and root directories. */ /** Resolve `~`, `~~`, `@` and `@@` aliases located within layers with respect to their layer source and root directories. */
localLayerAliases: true, localLayerAliases: true,
@ -295,8 +343,10 @@ export default defineUntypedSchema({
/** /**
* Use new experimental head optimisations: * Use new experimental head optimisations:
*
* - Add the capo.js head plugin in order to render tags in of the head in a more performant way. * - Add the capo.js head plugin in order to render tags in of the head in a more performant way.
* - Uses the hash hydration plugin to reduce initial hydration * - Uses the hash hydration plugin to reduce initial hydration
*
* @see [Nuxt Discussion #22632](https://github.com/nuxt/nuxt/discussions/22632] * @see [Nuxt Discussion #22632](https://github.com/nuxt/nuxt/discussions/22632]
*/ */
headNext: true, headNext: true,
@ -345,7 +395,11 @@ export default defineUntypedSchema({
* }) * })
* ``` * ```
*/ */
sharedPrerenderData: false, sharedPrerenderData: {
async $resolve (val, get) {
return val ?? ((await get('future') as Record<string, unknown>).compatibilityVersion === 4)
},
},
/** /**
* Enables CookieStore support to listen for cookie updates (if supported by the browser) and refresh `useCookie` ref values. * Enables CookieStore support to listen for cookie updates (if supported by the browser) and refresh `useCookie` ref values.
@ -368,6 +422,18 @@ export default defineUntypedSchema({
* Options that apply to `useAsyncData` (and also therefore `useFetch`) * Options that apply to `useAsyncData` (and also therefore `useFetch`)
*/ */
useAsyncData: { useAsyncData: {
/** @type {'undefined' | 'null'} */
value: {
async $resolve (val, get) {
return val ?? ((await get('future') as Record<string, unknown>).compatibilityVersion === 4 ? 'undefined' : 'null')
},
},
/** @type {'undefined' | 'null'} */
errorValue: {
async $resolve (val, get) {
return val ?? ((await get('future') as Record<string, unknown>).compatibilityVersion === 4 ? 'undefined' : 'null')
},
},
deep: { deep: {
async $resolve (val, get) { async $resolve (val, get) {
return val ?? !((await get('future') as Record<string, unknown>).compatibilityVersion === 4) return val ?? !((await get('future') as Record<string, unknown>).compatibilityVersion === 4)
@ -429,5 +495,15 @@ export default defineUntypedSchema({
return val ?? ((await get('future') as Record<string, unknown>).compatibilityVersion !== 4) return val ?? ((await get('future') as Record<string, unknown>).compatibilityVersion !== 4)
}, },
}, },
/**
* Whether `clear` and `clearNuxtData` should reset async data to its _default_ value or update
* it to `null`/`undefined`.
*/
resetAsyncDataToUndefined: {
async $resolve (val, get) {
return val ?? ((await get('future') as Record<string, unknown>).compatibilityVersion !== 4)
},
},
}, },
}) })

View File

@ -46,11 +46,13 @@ export default defineUntypedSchema({
* Nitro server handlers. * Nitro server handlers.
* *
* Each handler accepts the following options: * Each handler accepts the following options:
*
* - handler: The path to the file defining the handler. * - handler: The path to the file defining the handler.
* - route: The route under which the handler is available. This follows the conventions of https://github.com/unjs/radix3. * - route: The route under which the handler is available. This follows the conventions of https://github.com/unjs/radix3.
* - method: The HTTP method of requests that should be handled. * - method: The HTTP method of requests that should be handled.
* - middleware: Specifies whether it is a middleware handler. * - middleware: Specifies whether it is a middleware handler.
* - lazy: Specifies whether to use lazy loading to import the handler. * - lazy: Specifies whether to use lazy loading to import the handler.
*
* @see https://nuxt.com/docs/guide/directory-structure/server * @see https://nuxt.com/docs/guide/directory-structure/server
* @note Files from `server/api`, `server/middleware` and `server/routes` will be automatically registered by Nuxt. * @note Files from `server/api`, `server/middleware` and `server/routes` will be automatically registered by Nuxt.
* @example * @example

View File

@ -41,6 +41,7 @@ export default defineUntypedSchema({
'ofetch', 'ofetch',
// Key nuxt dependencies // Key nuxt dependencies
'@unhead/vue', '@unhead/vue',
'@nuxt/devtools',
'vue', 'vue',
'@vue/runtime-core', '@vue/runtime-core',
'@vue/compiler-sfc', '@vue/compiler-sfc',

View File

@ -157,7 +157,11 @@ export default defineUntypedSchema({
* See https://github.com/esbuild-kit/esbuild-loader * See https://github.com/esbuild-kit/esbuild-loader
* @type {Omit<typeof import('esbuild-loader')['LoaderOptions'], 'loader'>} * @type {Omit<typeof import('esbuild-loader')['LoaderOptions'], 'loader'>}
*/ */
esbuild: {}, esbuild: {
jsxFactory: 'h',
jsxFragment: 'Fragment',
tsconfigRaw: '{}',
},
/** /**
* See: https://github.com/webpack-contrib/file-loader#options * See: https://github.com/webpack-contrib/file-loader#options

View File

@ -23,7 +23,7 @@ export const DevRenderingPlugin = () => {
const messages = JSON.parse(await fsp.readFile(r(page, 'messages.json'), 'utf-8')) const messages = JSON.parse(await fsp.readFile(r(page, 'messages.json'), 'utf-8'))
return template(contents, { return template(contents, {
interpolate: /{{{?([\s\S]+?)}?}}/g, interpolate: /\{\{\{?([\s\S]+?)\}?\}\}/g,
})({ })({
messages: { ...genericMessages, ...messages }, messages: { ...genericMessages, ...messages },
}) })

View File

@ -58,7 +58,7 @@ export const RenderPlugin = () => {
} }
// Inline our scripts // Inline our scripts
const scriptSources = Array.from(html.matchAll(/<script[^>]*src="(.*)"[^>]*>[\s\S]*?<\/script>/g)) const scriptSources = Array.from(html.matchAll(/<script[^>]*src="([^"]*)"[^>]*>[\s\S]*?<\/script>/g))
.filter(([_block, src]) => src?.match(/^\/.*\.js$/)) .filter(([_block, src]) => src?.match(/^\/.*\.js$/))
for (const [scriptBlock, src] of scriptSources) { for (const [scriptBlock, src] of scriptSources) {
@ -79,10 +79,10 @@ export const RenderPlugin = () => {
const messages = JSON.parse(readFileSync(r(`templates/${templateName}/messages.json`), 'utf-8')) const messages = JSON.parse(readFileSync(r(`templates/${templateName}/messages.json`), 'utf-8'))
// Serialize into a js function // Serialize into a js function
const chunks = html.split(/\{{2,3}\s*[^{}]+\s*\}{2,3}/g).map(chunk => JSON.stringify(chunk)) const chunks = html.split(/\{{2,3}[^{}]+\}{2,3}/g).map(chunk => JSON.stringify(chunk))
const hasMessages = chunks.length > 1 const hasMessages = chunks.length > 1
let templateString = chunks.shift() let templateString = chunks.shift()
for (const expression of html.matchAll(/\{{2,3}(\s*[^{}]+\s*)\}{2,3}/g)) { for (const expression of html.matchAll(/\{{2,3}([^{}]+)\}{2,3}/g)) {
templateString += ` + (${expression[1].trim()}) + ${chunks.shift()}` templateString += ` + (${expression[1].trim()}) + ${chunks.shift()}`
} }
if (chunks.length > 0) { if (chunks.length > 0) {
@ -98,28 +98,28 @@ export const RenderPlugin = () => {
].join('\n') ].join('\n')
const templateContent = html const templateContent = html
.match(/<body.*?>([\s\S]*)<\/body>/)?.[0] .match(/<body[^>]*>([\s\S]*)<\/body>/)?.[0]
.replace(/(?<=<|<\/)body/g, 'div') .replace(/(?<=<\/|<)body/g, 'div')
.replace(/messages\./g, '') .replace(/messages\./g, '')
.replace(/<script[^>]*>([\s\S]*?)<\/script>/g, '') .replace(/<script[^>]*>([\s\S]*?)<\/script>/g, '')
.replace(/<a href="(\/[^"]*)"([^>]*)>([\s\S]*)<\/a>/g, '<NuxtLink to="$1"$2>\n$3\n</NuxtLink>') .replace(/<a href="(\/[^"]*)"([^>]*)>([\s\S]*)<\/a>/g, '<NuxtLink to="$1"$2>\n$3\n</NuxtLink>')
.replace(/<([^>]+) ([a-z]+)="([^"]*)({{\s*(\w+?)\s*}})([^"]*)"([^>]*)>/g, '<$1 :$2="`$3${$5}$6`"$7>') .replace(/<([^>]+) ([a-z]+)="([^"]*)(\{\{\s*(\w+)\s*\}\})([^"]*)"([^>]*)>/g, '<$1 :$2="`$3${$5}$6`"$7>')
.replace(/>{{\s*(\w+?)\s*}}<\/[\w-]*>/g, ' v-text="$1" />') .replace(/>\{\{\s*(\w+)\s*\}\}<\/[\w-]*>/g, ' v-text="$1" />')
.replace(/>{{{\s*(\w+?)\s*}}}<\/[\w-]*>/g, ' v-html="$1" />') .replace(/>\{\{\{\s*(\w+)\s*\}\}\}<\/[\w-]*>/g, ' v-html="$1" />')
// We are not matching <link> <script> and <meta> tags as these aren't used yet in nuxt/ui // We are not matching <link> <script> and <meta> tags as these aren't used yet in nuxt/ui
// and should be taken care of wherever this SFC is used // and should be taken care of wherever this SFC is used
const title = html.match(/<title.*?>([\s\S]*)<\/title>/)?.[1].replace(/{{([\s\S]+?)}}/g, (r) => { const title = html.match(/<title[^>]*>([\s\S]*)<\/title>/)?.[1].replace(/\{\{([\s\S]+?)\}\}/g, (r) => {
return `\${${r.slice(2, -2)}}`.replace(/messages\./g, 'props.') return `\${${r.slice(2, -2)}}`.replace(/messages\./g, 'props.')
}) })
const styleContent = Array.from(html.matchAll(/<style[^>]*>([\s\S]*?)<\/style>/g)).map(block => block[1]).join('\n') const styleContent = Array.from(html.matchAll(/<style[^>]*>([\s\S]*?)<\/style>/g)).map(block => block[1]).join('\n')
const globalStyles = styleContent.replace(/(\.[^{\d][^{]*?\{[^}]*?\})+.?/g, (r) => { const globalStyles = styleContent.replace(/(\.[^{\d][^{]*\{[^}]*\})+.?/g, (r) => {
const lastChar = r[r.length - 1] const lastChar = r[r.length - 1]
if (lastChar && !['}', '.', '@', '*', ':'].includes(lastChar)) { if (lastChar && !['}', '.', '@', '*', ':'].includes(lastChar)) {
return ';' + lastChar return ';' + lastChar
} }
return lastChar return lastChar
}).replace(/@media[^{]*?\{\}/g, '') }).replace(/@media[^{]*\{\}/g, '')
const inlineScripts = Array.from(html.matchAll(/<script>([\s\S]*?)<\/script>/g)) const inlineScripts = Array.from(html.matchAll(/<script>([\s\S]*?)<\/script>/g))
.map(block => block[1]) .map(block => block[1])
.filter(i => !i.includes('const t=document.createElement("link")')) .filter(i => !i.includes('const t=document.createElement("link")'))

View File

@ -20,9 +20,9 @@
}, },
"devDependencies": { "devDependencies": {
"@types/html-minifier": "4.0.5", "@types/html-minifier": "4.0.5",
"@unocss/reset": "0.60.0", "@unocss/reset": "0.60.3",
"critters": "0.0.22", "critters": "0.0.22",
"execa": "9.0.1", "execa": "9.1.0",
"globby": "14.0.1", "globby": "14.0.1",
"html-minifier": "4.0.0", "html-minifier": "4.0.0",
"jiti": "1.21.0", "jiti": "1.21.0",
@ -30,7 +30,7 @@
"pathe": "1.1.2", "pathe": "1.1.2",
"prettier": "3.2.5", "prettier": "3.2.5",
"scule": "1.3.0", "scule": "1.3.0",
"unocss": "0.60.0", "unocss": "0.60.3",
"vite": "5.2.11" "vite": "5.2.12"
} }
} }

Some files were not shown because too many files have changed in this diff Show More