mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-21 21:25:11 +00:00
Merge branch 'main' into feat/islands-use-cache
This commit is contained in:
Julien Huang
GitHub
commit
3d71ef18a2
2
.github/ISSUE_TEMPLATE/bug-report.yml
vendored
2
.github/ISSUE_TEMPLATE/bug-report.yml
vendored
@ -1,6 +1,6 @@
|
||||
name: "\U0001F41E Bug report"
|
||||
description: Create a report to help us improve Nuxt
|
||||
labels: ["pending triage", "3.x"]
|
||||
labels: ["pending triage"]
|
||||
body:
|
||||
- type: markdown
|
||||
attributes:
|
||||
|
||||
7
.github/ISSUE_TEMPLATE/config.yml
vendored
7
.github/ISSUE_TEMPLATE/config.yml
vendored
@ -1,11 +1,8 @@
|
||||
blank_issues_enabled: true
|
||||
contact_links:
|
||||
- name: 📚 Nuxt 3 Documentation
|
||||
- name: 📚 Nuxt Documentation
|
||||
url: https://nuxt.com/docs
|
||||
about: Check the documentation for usage of Nuxt 3
|
||||
- name: 📚 Nuxt 2 Documentation
|
||||
url: https://v2.nuxt.com
|
||||
about: Check the documentation for usage of Nuxt 2
|
||||
about: Check the documentation for usage of Nuxt
|
||||
- name: 💬 Discussions
|
||||
url: https://github.com/nuxt/nuxt/discussions
|
||||
about: Use discussions if you have another issue, an idea for improvement or for asking questions.
|
||||
|
||||
2
.github/ISSUE_TEMPLATE/feature-request.yml
vendored
2
.github/ISSUE_TEMPLATE/feature-request.yml
vendored
@ -1,6 +1,6 @@
|
||||
name: "🚀 Feature request"
|
||||
description: Suggest a feature that will improve Nuxt
|
||||
labels: ["pending triage", "3.x"]
|
||||
labels: ["pending triage"]
|
||||
body:
|
||||
- type: markdown
|
||||
attributes:
|
||||
|
||||
49
.github/ISSUE_TEMPLATE/z-bug-report-2.yml
vendored
49
.github/ISSUE_TEMPLATE/z-bug-report-2.yml
vendored
@ -1,49 +0,0 @@
|
||||
name: "\U0001F41E Bug report (Nuxt 2)"
|
||||
description: Create a report to help us improve Nuxt
|
||||
labels: ["pending triage", "2.x"]
|
||||
body:
|
||||
- type: markdown
|
||||
attributes:
|
||||
value: |
|
||||
Please carefully read the contribution docs before creating a bug report
|
||||
👉 https://nuxt.com/docs/community/reporting-bugs
|
||||
|
||||
Please use a template below to create a minimal reproduction
|
||||
👉 https://stackblitz.com/github/nuxt/starter/tree/v2
|
||||
👉 https://codesandbox.io/s/github/nuxt/starter/v2
|
||||
- type: textarea
|
||||
id: bug-env
|
||||
attributes:
|
||||
label: Environment
|
||||
description: You can use `npx envinfo --system --npmPackages '{nuxt,@nuxt/*}' --binaries --browsers` to fill this section
|
||||
placeholder: Environment
|
||||
validations:
|
||||
required: true
|
||||
- type: textarea
|
||||
id: reproduction
|
||||
attributes:
|
||||
label: Reproduction
|
||||
description: Please provide a link to a repo that can reproduce the problem you ran into. A [**minimal reproduction**](https://nuxt.com/docs/community/reporting-bugs#create-a-minimal-reproduction) is required unless you are absolutely sure that the issue is obvious and the provided information is enough to understand the problem. If a report is vague (e.g. just a generic error message) and has no reproduction, it will receive a "need reproduction" label. If no reproduction is provided we might close it.
|
||||
placeholder: Reproduction
|
||||
validations:
|
||||
required: true
|
||||
- type: textarea
|
||||
id: bug-description
|
||||
attributes:
|
||||
label: Describe the bug
|
||||
description: A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description. Thanks!
|
||||
placeholder: Bug description
|
||||
validations:
|
||||
required: true
|
||||
- type: textarea
|
||||
id: additonal
|
||||
attributes:
|
||||
label: Additional context
|
||||
description: If applicable, add any other context about the problem here
|
||||
- type: textarea
|
||||
id: logs
|
||||
attributes:
|
||||
label: Logs
|
||||
description: |
|
||||
Optional if provided reproduction. Please try not to insert an image but copy paste the log text.
|
||||
render: shell-script
|
||||
7
.github/workflows/autofix-docs.yml
vendored
7
.github/workflows/autofix-docs.yml
vendored
@ -19,7 +19,7 @@ jobs:
|
||||
steps:
|
||||
- uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
|
||||
- run: corepack enable
|
||||
- uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
|
||||
- uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
|
||||
with:
|
||||
node-version: 20
|
||||
cache: "pnpm"
|
||||
@ -27,7 +27,10 @@ jobs:
|
||||
- name: Install dependencies
|
||||
run: pnpm install
|
||||
|
||||
- name: Build (stub)
|
||||
run: pnpm dev:prepare
|
||||
|
||||
- name: Lint (docs)
|
||||
run: pnpm lint:docs:fix
|
||||
|
||||
- uses: autofix-ci/action@ea32e3a12414e6d3183163c3424a7d7a8631ad84
|
||||
- uses: autofix-ci/action@2891949f3779a1cafafae1523058501de3d4e944
|
||||
|
||||
4
.github/workflows/autofix.yml
vendored
4
.github/workflows/autofix.yml
vendored
@ -15,7 +15,7 @@ jobs:
|
||||
steps:
|
||||
- uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
|
||||
- run: corepack enable
|
||||
- uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
|
||||
- uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
|
||||
with:
|
||||
node-version: 20
|
||||
cache: "pnpm"
|
||||
@ -52,4 +52,4 @@ jobs:
|
||||
- name: Lint (code)
|
||||
run: pnpm lint:fix
|
||||
|
||||
- uses: autofix-ci/action@ea32e3a12414e6d3183163c3424a7d7a8631ad84
|
||||
- uses: autofix-ci/action@2891949f3779a1cafafae1523058501de3d4e944
|
||||
|
||||
4
.github/workflows/benchmark.yml
vendored
4
.github/workflows/benchmark.yml
vendored
@ -31,7 +31,7 @@ jobs:
|
||||
steps:
|
||||
- uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
|
||||
- run: corepack enable
|
||||
- uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
|
||||
- uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
|
||||
with:
|
||||
node-version: 20
|
||||
cache: "pnpm"
|
||||
@ -46,7 +46,7 @@ jobs:
|
||||
run: pnpm build
|
||||
|
||||
- name: Run benchmarks
|
||||
uses: CodSpeedHQ/action@0b631f8998f2389eb5144632b6f9f8fabd33a86e # v2.4.1
|
||||
uses: CodSpeedHQ/action@a58b84c0b61569a9cbb7cfb378cc849d65cf1ce5 # v2.4.3
|
||||
with:
|
||||
run: pnpm vitest bench
|
||||
token: ${{ secrets.CODSPEED_TOKEN }}
|
||||
|
||||
6
.github/workflows/changelog.yml
vendored
6
.github/workflows/changelog.yml
vendored
@ -4,7 +4,7 @@ on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
- 2.x
|
||||
- 3.x
|
||||
|
||||
permissions:
|
||||
pull-requests: write
|
||||
@ -16,7 +16,7 @@ concurrency:
|
||||
|
||||
jobs:
|
||||
update:
|
||||
if: github.repository_owner == 'nuxt' && !contains(github.event.head_commit.message, 'v3.')
|
||||
if: github.repository_owner == 'nuxt' && !contains(github.event.head_commit.message, 'v3.') && !contains(github.event.head_commit.message, 'v4.')
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
@ -24,7 +24,7 @@ jobs:
|
||||
with:
|
||||
fetch-depth: 0
|
||||
- run: corepack enable
|
||||
- uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
|
||||
- uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
|
||||
with:
|
||||
node-version: 20
|
||||
cache: "pnpm"
|
||||
|
||||
1
.github/workflows/check-links.yml
vendored
1
.github/workflows/check-links.yml
vendored
@ -7,6 +7,7 @@ on:
|
||||
- "*.md"
|
||||
branches:
|
||||
- main
|
||||
- 3.x
|
||||
|
||||
# Remove default permissions of GITHUB_TOKEN for security
|
||||
# https://docs.github.com/en/actions/using-jobs/assigning-permissions-to-jobs
|
||||
|
||||
42
.github/workflows/ci.yml
vendored
42
.github/workflows/ci.yml
vendored
@ -7,12 +7,14 @@ on:
|
||||
- "*.md"
|
||||
branches:
|
||||
- main
|
||||
- 3.x
|
||||
pull_request:
|
||||
paths-ignore:
|
||||
- "docs/**"
|
||||
- "*.md"
|
||||
branches:
|
||||
- main
|
||||
- 3.x
|
||||
- "!v[0-9]*"
|
||||
|
||||
# https://github.com/vitejs/vite/blob/main/.github/workflows/ci.yml
|
||||
@ -37,7 +39,7 @@ jobs:
|
||||
steps:
|
||||
- uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
|
||||
- run: corepack enable
|
||||
- uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
|
||||
- uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
|
||||
with:
|
||||
node-version: 20
|
||||
cache: "pnpm"
|
||||
@ -55,7 +57,7 @@ jobs:
|
||||
run: pnpm build
|
||||
|
||||
- name: Cache dist
|
||||
uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4.3.3
|
||||
uses: actions/upload-artifact@0b2256b8c012f0828dc542b3febcab082c67f72b # v4.3.4
|
||||
with:
|
||||
retention-days: 3
|
||||
name: dist
|
||||
@ -74,7 +76,7 @@ jobs:
|
||||
steps:
|
||||
- uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
|
||||
- run: corepack enable
|
||||
- uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
|
||||
- uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
|
||||
with:
|
||||
node-version: 20
|
||||
cache: "pnpm"
|
||||
@ -83,19 +85,19 @@ jobs:
|
||||
run: pnpm install
|
||||
|
||||
- name: Initialize CodeQL
|
||||
uses: github/codeql-action/init@23acc5c183826b7a8a97bce3cecc52db901f8251 # v3.25.10
|
||||
uses: github/codeql-action/init@4fa2a7953630fd2f3fb380f21be14ede0169dd4f # v3.25.12
|
||||
with:
|
||||
languages: javascript
|
||||
queries: +security-and-quality
|
||||
|
||||
- name: Restore dist cache
|
||||
uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
|
||||
uses: actions/download-artifact@fa0a91b85d4f404e444e00e005971372dc801d16 # v4.1.8
|
||||
with:
|
||||
name: dist
|
||||
path: packages
|
||||
|
||||
- name: Perform CodeQL Analysis
|
||||
uses: github/codeql-action/analyze@23acc5c183826b7a8a97bce3cecc52db901f8251 # v3.25.10
|
||||
uses: github/codeql-action/analyze@4fa2a7953630fd2f3fb380f21be14ede0169dd4f # v3.25.12
|
||||
with:
|
||||
category: "/language:javascript"
|
||||
|
||||
@ -113,7 +115,7 @@ jobs:
|
||||
steps:
|
||||
- uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
|
||||
- run: corepack enable
|
||||
- uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
|
||||
- uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
|
||||
with:
|
||||
node-version: 20
|
||||
cache: "pnpm"
|
||||
@ -122,7 +124,7 @@ jobs:
|
||||
run: pnpm install
|
||||
|
||||
- name: Restore dist cache
|
||||
uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
|
||||
uses: actions/download-artifact@fa0a91b85d4f404e444e00e005971372dc801d16 # v4.1.8
|
||||
with:
|
||||
name: dist
|
||||
path: packages
|
||||
@ -144,7 +146,7 @@ jobs:
|
||||
steps:
|
||||
- uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
|
||||
- run: corepack enable
|
||||
- uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
|
||||
- uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
|
||||
with:
|
||||
node-version: 20
|
||||
cache: "pnpm"
|
||||
@ -168,7 +170,7 @@ jobs:
|
||||
steps:
|
||||
- uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
|
||||
- run: corepack enable
|
||||
- uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
|
||||
- uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
|
||||
with:
|
||||
node-version: 20
|
||||
cache: "pnpm"
|
||||
@ -198,7 +200,6 @@ jobs:
|
||||
builder: ["vite", "webpack"]
|
||||
context: ["async", "default"]
|
||||
manifest: ["manifest-on", "manifest-off"]
|
||||
version: ["v4", "v3"]
|
||||
payload: ["json", "js"]
|
||||
node: [18]
|
||||
exclude:
|
||||
@ -220,7 +221,7 @@ jobs:
|
||||
steps:
|
||||
- uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
|
||||
- run: corepack enable
|
||||
- uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
|
||||
- uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
|
||||
with:
|
||||
node-version: ${{ matrix.node }}
|
||||
cache: "pnpm"
|
||||
@ -232,7 +233,7 @@ jobs:
|
||||
run: pnpm playwright-core install chromium
|
||||
|
||||
- name: Restore dist cache
|
||||
uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
|
||||
uses: actions/download-artifact@fa0a91b85d4f404e444e00e005971372dc801d16 # v4.1.8
|
||||
with:
|
||||
name: dist
|
||||
path: packages
|
||||
@ -244,7 +245,6 @@ jobs:
|
||||
TEST_BUILDER: ${{ matrix.builder }}
|
||||
TEST_MANIFEST: ${{ matrix.manifest }}
|
||||
TEST_CONTEXT: ${{ matrix.context }}
|
||||
TEST_V4: ${{ matrix.version == 'v4' }}
|
||||
TEST_PAYLOAD: ${{ matrix.payload }}
|
||||
SKIP_BUNDLE_SIZE: ${{ github.event_name != 'push' || matrix.env == 'dev' || matrix.builder == 'webpack' || matrix.context == 'default' || matrix.payload == 'js' || runner.os == 'Windows' }}
|
||||
|
||||
@ -254,6 +254,8 @@ jobs:
|
||||
token: ${{ secrets.CODECOV_TOKEN }}
|
||||
|
||||
build-release:
|
||||
concurrency:
|
||||
group: release
|
||||
permissions:
|
||||
id-token: write
|
||||
if: |
|
||||
@ -274,7 +276,7 @@ jobs:
|
||||
with:
|
||||
fetch-depth: 0
|
||||
- run: corepack enable
|
||||
- uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
|
||||
- uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
|
||||
with:
|
||||
node-version: 20
|
||||
cache: "pnpm"
|
||||
@ -283,18 +285,20 @@ jobs:
|
||||
run: pnpm install
|
||||
|
||||
- name: Restore dist cache
|
||||
uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
|
||||
uses: actions/download-artifact@fa0a91b85d4f404e444e00e005971372dc801d16 # v4.1.8
|
||||
with:
|
||||
name: dist
|
||||
path: packages
|
||||
|
||||
- name: Release Edge
|
||||
run: ./scripts/release-edge.sh
|
||||
run: ./scripts/release-edge.sh ${{ github.ref == 'refs/heads/main' && 'latest' || '3x' }}
|
||||
env:
|
||||
NODE_AUTH_TOKEN: ${{secrets.NODE_AUTH_TOKEN}}
|
||||
NPM_CONFIG_PROVENANCE: true
|
||||
|
||||
release-pr:
|
||||
concurrency:
|
||||
group: release
|
||||
permissions:
|
||||
id-token: write
|
||||
pull-requests: write
|
||||
@ -313,7 +317,7 @@ jobs:
|
||||
with:
|
||||
fetch-depth: 0
|
||||
- run: corepack enable
|
||||
- uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
|
||||
- uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
|
||||
with:
|
||||
node-version: 20
|
||||
cache: "pnpm"
|
||||
@ -322,7 +326,7 @@ jobs:
|
||||
run: pnpm install
|
||||
|
||||
- name: Restore dist cache
|
||||
uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
|
||||
uses: actions/download-artifact@fa0a91b85d4f404e444e00e005971372dc801d16 # v4.1.8
|
||||
with:
|
||||
name: dist
|
||||
path: packages
|
||||
|
||||
2
.github/workflows/dependency-review.yml
vendored
2
.github/workflows/dependency-review.yml
vendored
@ -19,4 +19,4 @@ jobs:
|
||||
- name: 'Checkout Repository'
|
||||
uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
|
||||
- name: 'Dependency Review'
|
||||
uses: actions/dependency-review-action@72eb03d02c7872a771aacd928f3123ac62ad6d3a # v4.3.3
|
||||
uses: actions/dependency-review-action@5a2ce3f5b92ee19cbb1541a4984c76d921601d7c # v4.3.4
|
||||
|
||||
6
.github/workflows/docs.yml
vendored
6
.github/workflows/docs.yml
vendored
@ -9,6 +9,7 @@ on:
|
||||
# autofix workflow will be triggered instead for PRs
|
||||
branches:
|
||||
- main
|
||||
- 3.x
|
||||
- "!v[0-9]*"
|
||||
|
||||
# Remove default permissions of GITHUB_TOKEN for security
|
||||
@ -22,7 +23,7 @@ jobs:
|
||||
steps:
|
||||
- uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
|
||||
- run: corepack enable
|
||||
- uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
|
||||
- uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
|
||||
with:
|
||||
node-version: 20
|
||||
cache: "pnpm"
|
||||
@ -30,6 +31,9 @@ jobs:
|
||||
- name: Install dependencies
|
||||
run: pnpm install
|
||||
|
||||
- name: Build (stub)
|
||||
run: pnpm dev:prepare
|
||||
|
||||
- name: Lint (docs)
|
||||
run: pnpm lint:docs
|
||||
|
||||
|
||||
2
.github/workflows/introspect.yml
vendored
2
.github/workflows/introspect.yml
vendored
@ -6,11 +6,13 @@ on:
|
||||
- ".github/workflows/**"
|
||||
branches:
|
||||
- main
|
||||
- 3.x
|
||||
pull_request:
|
||||
paths:
|
||||
- ".github/workflows/**"
|
||||
branches:
|
||||
- main
|
||||
- 3.x
|
||||
- "!v[0-9]*"
|
||||
|
||||
permissions:
|
||||
|
||||
1
.github/workflows/label-pr.yml
vendored
1
.github/workflows/label-pr.yml
vendored
@ -6,6 +6,7 @@ on:
|
||||
- opened
|
||||
branches:
|
||||
- main
|
||||
- 3.x
|
||||
|
||||
jobs:
|
||||
add-pr-labels:
|
||||
|
||||
25
.github/workflows/release-pr.yml
vendored
25
.github/workflows/release-pr.yml
vendored
@ -14,6 +14,8 @@ permissions:
|
||||
jobs:
|
||||
release-pr:
|
||||
if: github.repository == 'nuxt/nuxt' && github.event.issue.pull_request && github.event.comment.body == '/trigger release'
|
||||
concurrency:
|
||||
group: release
|
||||
permissions:
|
||||
id-token: write
|
||||
pull-requests: write
|
||||
@ -29,13 +31,30 @@ jobs:
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
||||
- name: Get PR Info
|
||||
id: pr
|
||||
env:
|
||||
PR_NUMBER: ${{ github.event.issue.number }}
|
||||
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
GH_REPO: ${{ github.repository }}
|
||||
COMMENT_AT: ${{ github.event.comment.created_at }}
|
||||
run: |
|
||||
pr="$(gh api -H "Accept: application/vnd.github+json" -H "X-GitHub-Api-Version: 2022-11-28" /repos/${GH_REPO}/pulls/${PR_NUMBER})"
|
||||
head_sha="$(echo "$pr" | jq -r .head.sha)"
|
||||
updated_at="$(echo "$pr" | jq -r .updated_at)"
|
||||
|
||||
if [[ $(date -d "$updated_at" +%s) -gt $(date -d "$COMMENT_AT" +%s) ]]; then
|
||||
exit 1
|
||||
fi
|
||||
|
||||
echo "head_sha=$head_sha" >> $GITHUB_OUTPUT
|
||||
- uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
|
||||
with:
|
||||
ref: ${{ github.event.issue.pull_request.head.sha }}
|
||||
fetch-depth: 0
|
||||
ref: ${{ steps.pr.outputs.head_sha }}
|
||||
fetch-depth: 1
|
||||
|
||||
- run: corepack enable
|
||||
- uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
|
||||
- uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
|
||||
with:
|
||||
node-version: 20
|
||||
cache: "pnpm"
|
||||
|
||||
6
.github/workflows/release.yml
vendored
6
.github/workflows/release.yml
vendored
@ -11,7 +11,9 @@ permissions: {}
|
||||
|
||||
jobs:
|
||||
release:
|
||||
if: github.repository == 'nuxt/nuxt' && startsWith(github.event.head_commit.message, 'v3.')
|
||||
if: github.repository == 'nuxt/nuxt' && (startsWith(github.event.head_commit.message, 'v3.') || startsWith(github.event.head_commit.message, 'v4.'))
|
||||
concurrency:
|
||||
group: release
|
||||
permissions:
|
||||
id-token: write
|
||||
runs-on: ubuntu-latest
|
||||
@ -21,7 +23,7 @@ jobs:
|
||||
with:
|
||||
fetch-depth: 0
|
||||
- run: corepack enable
|
||||
- uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
|
||||
- uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
|
||||
with:
|
||||
node-version: 20
|
||||
registry-url: "https://registry.npmjs.org/"
|
||||
|
||||
4
.github/workflows/scorecards.yml
vendored
4
.github/workflows/scorecards.yml
vendored
@ -59,7 +59,7 @@ jobs:
|
||||
# Upload the results as artifacts (optional). Commenting out will disable uploads of run results in SARIF
|
||||
# format to the repository Actions tab.
|
||||
- name: "Upload artifact"
|
||||
uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4.3.3
|
||||
uses: actions/upload-artifact@0b2256b8c012f0828dc542b3febcab082c67f72b # v4.3.4
|
||||
if: github.repository == 'nuxt/nuxt' && success()
|
||||
with:
|
||||
name: SARIF file
|
||||
@ -68,7 +68,7 @@ jobs:
|
||||
|
||||
# Upload the results to GitHub's code scanning dashboard.
|
||||
- name: "Upload to code-scanning"
|
||||
uses: github/codeql-action/upload-sarif@23acc5c183826b7a8a97bce3cecc52db901f8251 # v3.25.10
|
||||
uses: github/codeql-action/upload-sarif@4fa2a7953630fd2f3fb380f21be14ede0169dd4f # v3.25.12
|
||||
if: github.repository == 'nuxt/nuxt' && success()
|
||||
with:
|
||||
sarif_file: results.sarif
|
||||
|
||||
2
.github/workflows/semantic-pull-requests.yml
vendored
2
.github/workflows/semantic-pull-requests.yml
vendored
@ -20,7 +20,7 @@ jobs:
|
||||
name: Semantic pull request
|
||||
steps:
|
||||
- name: Validate PR title
|
||||
uses: amannn/action-semantic-pull-request@cfb60706e18bc85e8aec535e3c577abe8f70378e # v5.5.2
|
||||
uses: amannn/action-semantic-pull-request@0723387faaf9b38adef4775cd42cfd5155ed6017 # v5.5.3
|
||||
with:
|
||||
scopes: |
|
||||
kit
|
||||
|
||||
1
CODEOWNERS
Normal file
1
CODEOWNERS
Normal file
@ -0,0 +1 @@
|
||||
* @danielroe
|
||||
14
README.md
14
README.md
@ -5,7 +5,7 @@
|
||||
<p>
|
||||
<a href="https://www.npmjs.com/package/nuxt"><img src="https://img.shields.io/npm/v/nuxt.svg?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a>
|
||||
<a href="https://www.npmjs.com/package/nuxt"><img src="https://img.shields.io/npm/dm/nuxt.svg?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"></a>
|
||||
<a href="./LICENSE"><img src="https://img.shields.io/github/license/nuxt/nuxt.svg?style=flat&colorA=18181B&colorB=28CF8D" alt="License"></a>
|
||||
<a href="https://github.com/nuxt/nuxt/tree/main/LICENSE"><img src="https://img.shields.io/github/license/nuxt/nuxt.svg?style=flat&colorA=18181B&colorB=28CF8D" alt="License"></a>
|
||||
<a href="https://nuxt.com"><img src="https://img.shields.io/badge/Nuxt%20Docs-18181B?logo=nuxt.js" alt="Website"></a>
|
||||
<a href="https://chat.nuxt.dev"><img src="https://img.shields.io/badge/Nuxt%20Discord-18181B?logo=discord" alt="Discord"></a>
|
||||
</p>
|
||||
@ -34,7 +34,7 @@ It provides a number of features that make it easy to build fast, SEO-friendly,
|
||||
- 🏠 [Local Development](#local-development)
|
||||
- ⛰️ [Nuxt 2](#nuxt-2)
|
||||
- 🛟 [Professional Support](#professional-support)
|
||||
- 🔗 [Follow us](#follow-us)
|
||||
- 🔗 [Follow Us](#follow-us)
|
||||
- ⚖️ [License](#license)
|
||||
|
||||
---
|
||||
@ -101,18 +101,12 @@ Here are a few ways you can get involved:
|
||||
|
||||
Follow the docs to [Set Up Your Local Development Environment](https://nuxt.com/docs/community/framework-contribution#setup) to contribute to the framework and documentation.
|
||||
|
||||
## <a name="nuxt-2">⛰️ Nuxt 2</a>
|
||||
|
||||
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">
|
||||
<a href="https://chat.nuxt.dev"><img width="20px" src="./.github/assets/discord.svg" alt="Discord"></a> <a href="https://twitter.nuxt.dev"><img width="20px" src="./.github/assets/twitter.svg" alt="Twitter"></a> <a href="https://github.nuxt.dev"><img width="20px" src="./.github/assets/github.svg" alt="GitHub"></a>
|
||||
@ -120,4 +114,4 @@ If you expect to be using Nuxt 2 beyond the EOL (End of Life) date (June 30, 202
|
||||
|
||||
## <a name="license">⚖️ License</a>
|
||||
|
||||
[MIT](./LICENSE)
|
||||
[MIT](https://github.com/nuxt/nuxt/tree/main/LICENSE)
|
||||
|
||||
@ -76,7 +76,6 @@ Nuxt is composed of different [core packages](https://github.com/nuxt/nuxt/tree/
|
||||
- Command line interface: [nuxi](https://github.com/nuxt/nuxt/tree/main/packages/nuxi)
|
||||
- Server engine: [nitro](https://github.com/unjs/nitro)
|
||||
- Development kit: [@nuxt/kit](https://github.com/nuxt/nuxt/tree/main/packages/kit)
|
||||
- Nuxt 2 Bridge: [@nuxt/bridge](https://github.com/nuxt/bridge)
|
||||
|
||||
We recommend reading each concept to have a full vision of Nuxt capabilities and the scope of each package.
|
||||
|
||||
|
||||
@ -85,13 +85,13 @@ export default defineNuxtConfig({
|
||||
|
||||
## Hosting Providers
|
||||
|
||||
Nuxt 3 can be deployed to several cloud providers with a minimal amount of configuration:
|
||||
Nuxt can be deployed to several cloud providers with a minimal amount of configuration:
|
||||
|
||||
:read-more{to="/deploy"}
|
||||
|
||||
## Presets
|
||||
|
||||
In addition to Node.js servers and static hosting services, a Nuxt 3 project can be deployed with several well-tested presets and minimal amount of configuration.
|
||||
In addition to Node.js servers and static hosting services, a Nuxt project can be deployed with several well-tested presets and minimal amount of configuration.
|
||||
|
||||
You can explicitly set the desired preset in the [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) file:
|
||||
|
||||
@ -117,10 +117,13 @@ In most cases, Nuxt can work with third-party content that is not generated or c
|
||||
|
||||
Accordingly, you should make sure that the following options are unchecked / disabled in Cloudflare. Otherwise, unnecessary re-rendering or hydration errors could impact your production application.
|
||||
|
||||
1. Speed > Optimization > Auto Minify: Uncheck JavaScript, CSS and HTML
|
||||
2. Speed > Optimization > Disable "Rocket Loader™"
|
||||
3. Speed > Optimization > Disable "Mirage"
|
||||
1. Speed > Optimization > Content Optimization > Auto Minify: Uncheck JavaScript, CSS and HTML
|
||||
2. Speed > Optimization > Content Optimization > Disable "Rocket Loader™"
|
||||
3. Speed > Optimization > Image Optimization > Disable "Mirage"
|
||||
4. Scrape Shield > Disable "Email Address Obfuscation"
|
||||
5. Scrape Shield > Disable "Server-side Excludes"
|
||||
|
||||
With these settings, you can be sure that Cloudflare won't inject scripts into your Nuxt application that may cause unwanted side effects.
|
||||
|
||||
::tip
|
||||
Their location on the Cloudflare dashboard sometimes changes so don't hesitate to look around.
|
||||
::
|
||||
|
||||
@ -11,19 +11,41 @@ navigation.icon: i-ph-arrow-circle-up-duotone
|
||||
|
||||
To upgrade Nuxt to the [latest release](https://github.com/nuxt/nuxt/releases), use the `nuxi upgrade` command.
|
||||
|
||||
```bash [Terminal]
|
||||
::code-group
|
||||
|
||||
```bash [npm]
|
||||
npx nuxi upgrade
|
||||
```
|
||||
|
||||
```bash [yarn]
|
||||
yarn dlx nuxi upgrade
|
||||
```
|
||||
|
||||
```bash [pnpm]
|
||||
pnpm dlx nuxi upgrade
|
||||
```
|
||||
|
||||
```bash [bun]
|
||||
bunx nuxi upgrade
|
||||
```
|
||||
|
||||
::
|
||||
|
||||
### Nightly Release Channel
|
||||
|
||||
To use the latest Nuxt build and test features before their release, read about the [nightly release channel](/docs/guide/going-further/nightly-release-channel) guide.
|
||||
|
||||
::alert{type="warning"}
|
||||
The nightly release channel `latest` tag is currently tracking the Nuxt v4 branch, meaning that it is particularly likely to have breaking changes right now - be careful!
|
||||
|
||||
You can opt in to the 3.x branch nightly releases with `"nuxt": "npm:nuxt-nightly@3x"`.
|
||||
::
|
||||
|
||||
## Testing Nuxt 4
|
||||
|
||||
Nuxt 4 is planned to be released **on or before June 14** (though obviously this is dependent on having enough time after Nitro's major release to be properly tested in the community, so be aware that this is not an exact date).
|
||||
|
||||
Until then, it is possible to test many of Nuxt 4's breaking changes from Nuxt version 3.12 or via the nightly release channel.
|
||||
Until then, it is possible to test many of Nuxt 4's breaking changes from Nuxt version 3.12+.
|
||||
|
||||
::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.
|
||||
@ -31,7 +53,7 @@ Watch a video from Alexander Lichter showing how to opt in to Nuxt 4's breaking
|
||||
|
||||
### 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, upgrade Nuxt to the [latest release](https://github.com/nuxt/nuxt/releases).
|
||||
|
||||
Then you can set your `compatibilityVersion` to match Nuxt 4 behavior:
|
||||
|
||||
@ -87,7 +109,8 @@ Nuxt now defaults to a new directory structure, with backwards compatibility (so
|
||||
|
||||
* the new Nuxt default `srcDir` is `app/` by default, and most things are resolved from there.
|
||||
* `serverDir` now defaults to `<rootDir>/server` rather than `<srcDir>/server`
|
||||
* `modules` and `public` are resolved relative to `<rootDir>` by default
|
||||
* `layers/`, `modules/` and `public/` are resolved relative to `<rootDir>` by default
|
||||
* if using [Nuxt Content v2.13+](https://github.com/nuxt/content/pull/2649), `content/` is resolved relative to `<rootDir>`
|
||||
* a new `dir.app` is added, which is the directory we look for `router.options.ts` and `spa-loading-template.html` - this defaults to `<srcDir>/`
|
||||
|
||||
<details>
|
||||
@ -109,6 +132,8 @@ app/
|
||||
app.config.ts
|
||||
app.vue
|
||||
router.options.ts
|
||||
content/
|
||||
layers/
|
||||
modules/
|
||||
node_modules/
|
||||
public/
|
||||
@ -134,7 +159,7 @@ nuxt.config.ts
|
||||
|
||||
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`, `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`, `content/`, `layers/`, `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.) The one exception is that if you _already_ have a custom `srcDir`. In this case, you should be aware that your `modules/`, `public/` and `server/` folders will be resolved from your `rootDir` rather than from your custom `srcDir`. You can override this by configuring `dir.modules`, `dir.public` and `serverDir` if you need to.
|
||||
|
||||
@ -209,6 +234,7 @@ Previously `data` was initialized to `null` but reset in `clearNuxtData` to `und
|
||||
If you encounter any issues you can revert back to the previous behavior with:
|
||||
|
||||
```ts twoslash [nuxt.config.ts]
|
||||
// @errors: 2353
|
||||
export default defineNuxtConfig({
|
||||
experimental: {
|
||||
defaults: {
|
||||
@ -232,6 +258,7 @@ Please report an issue if you are doing this, as we do not plan to keep this as
|
||||
Previously it was possible to pass `dedupe: boolean` to `refresh`. These were aliases of `cancel` (`true`) and `defer` (`false`).
|
||||
|
||||
```ts twoslash [app.vue]
|
||||
// @errors: 2322
|
||||
const { refresh } = await useAsyncData(async () => ({ message: 'Hello, Nuxt 3!' }))
|
||||
|
||||
async function refreshData () {
|
||||
@ -280,6 +307,7 @@ Often users set an appropriately empty value, such as an empty array, to avoid t
|
||||
If you encounter any issues you can revert back to the previous behavior, for now, with:
|
||||
|
||||
```ts twoslash [nuxt.config.ts]
|
||||
// @errors: 2353
|
||||
export default defineNuxtConfig({
|
||||
experimental: {
|
||||
resetAsyncDataToUndefined: true,
|
||||
@ -352,6 +380,25 @@ However, if you are a module author using the `builder:watch` hook and wishing t
|
||||
})
|
||||
```
|
||||
|
||||
#### Removal of `window.__NUXT__` object
|
||||
|
||||
##### What Changed
|
||||
|
||||
We are removing the global `window.__NUXT__` object after the app finishes hydration.
|
||||
|
||||
##### Reasons for Change
|
||||
|
||||
This opens the way to multi-app patterns ([#21635](https://github.com/nuxt/nuxt/issues/21635)) and enables us to focus on a single way to access Nuxt app data - `useNuxtApp()`.
|
||||
|
||||
##### Migration Steps
|
||||
|
||||
The data is still available, but can be accessed with `useNuxtApp().payload`:
|
||||
|
||||
```diff
|
||||
- console.log(window.__NUXT__)
|
||||
+ console.log(useNuxtApp().payload)
|
||||
```
|
||||
|
||||
#### Directory index scanning
|
||||
|
||||
🚦 **Impact Level**: Medium
|
||||
@ -448,10 +495,11 @@ const importName = genSafeVariableName
|
||||
|
||||
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)
|
||||
* `experimental.treeshakeClientOnly` will be `true` (default since v3.0)
|
||||
* `experimental.configSchema` will be `true` (default since v3.3)
|
||||
* `experimental.polyfillVueUseHead` will be `false` (default since v3.4)
|
||||
* `experimental.respectNoSSRHeader` will be `false` (default since v3.4)
|
||||
* `vite.devBundler` is no longer configurable - it will use `vite-node` by default
|
||||
|
||||
##### Reasons for Change
|
||||
|
||||
@ -463,11 +511,11 @@ These options have been set to their current values for some time and we do not
|
||||
|
||||
* `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:
|
||||
|
||||
Feature / Version | Nuxt 2 | Nuxt Bridge | Nuxt 3
|
||||
Feature / Version | Nuxt 2 | Nuxt Bridge | Nuxt 3+
|
||||
-------------------------|-----------------|------------------|---------
|
||||
Vue | 2 | 2 | 3
|
||||
Stability | 😊 Stable | 😊 Stable | 😊 Stable
|
||||
@ -485,9 +533,9 @@ Vite | ⚠️ Partial | 🚧 Partial | ✅
|
||||
Nuxi CLI | ❌ Old | ✅ nuxi | ✅ nuxi
|
||||
Static sites | ✅ | ✅ | ✅
|
||||
|
||||
## Nuxt 2 to Nuxt 3
|
||||
## Nuxt 2 to Nuxt 3+
|
||||
|
||||
The migration guide provides a step-by-step comparison of Nuxt 2 features to Nuxt 3 features and guidance to adapt your current application.
|
||||
The migration guide provides a step-by-step comparison of Nuxt 2 features to Nuxt 3+ features and guidance to adapt your current application.
|
||||
|
||||
::read-more{to="/docs/migration/overview"}
|
||||
Check out the **guide to migrating from Nuxt 2 to Nuxt 3**.
|
||||
@ -495,7 +543,7 @@ Check out the **guide to migrating from Nuxt 2 to Nuxt 3**.
|
||||
|
||||
## Nuxt 2 to Nuxt Bridge
|
||||
|
||||
If you prefer to progressively migrate your Nuxt 2 application to Nuxt 3, you can use Nuxt Bridge. Nuxt Bridge is a compatibility layer that allows you to use Nuxt 3 features in Nuxt 2 with an opt-in mechanism.
|
||||
If you prefer to progressively migrate your Nuxt 2 application to Nuxt 3, you can use Nuxt Bridge. Nuxt Bridge is a compatibility layer that allows you to use Nuxt 3+ features in Nuxt 2 with an opt-in mechanism.
|
||||
|
||||
::read-more{to="/docs/bridge/overview"}
|
||||
**Migrate from Nuxt 2 to Nuxt Bridge**
|
||||
|
||||
@ -37,10 +37,14 @@ Open a terminal (if you're using [Visual Studio Code](https://code.visualstudio.
|
||||
|
||||
::code-group
|
||||
|
||||
```bash [npx]
|
||||
```bash [npm]
|
||||
npx nuxi@latest init <project-name>
|
||||
```
|
||||
|
||||
```bash [yarn]
|
||||
yarn dlx nuxi@latest init <project-name>
|
||||
```
|
||||
|
||||
```bash [pnpm]
|
||||
pnpm dlx nuxi@latest init <project-name>
|
||||
```
|
||||
@ -96,6 +100,6 @@ Well done! A browser window should automatically open for <http://localhost:3000
|
||||
|
||||
## Next Steps
|
||||
|
||||
Now that you've created your Nuxt 3 project, you are ready to start building your application.
|
||||
Now that you've created your Nuxt project, you are ready to start building your application.
|
||||
|
||||
:read-more{title="Nuxt Concepts" to="/docs/guide/concepts"}
|
||||
|
||||
@ -77,10 +77,26 @@ h1 {
|
||||
|
||||
You can also reference stylesheets that are distributed through npm. Let's use the popular `animate.css` library as an example.
|
||||
|
||||
```bash [Terminal]
|
||||
::code-group
|
||||
|
||||
```bash [npm]
|
||||
npm install animate.css
|
||||
```
|
||||
|
||||
```bash [yarn]
|
||||
yarn add animate.css
|
||||
```
|
||||
|
||||
```bash [pnpm]
|
||||
pnpm install animate.css
|
||||
```
|
||||
|
||||
```bash [bun]
|
||||
bun install animate.css
|
||||
```
|
||||
|
||||
::
|
||||
|
||||
Then you can reference it directly in your pages, layouts and components:
|
||||
|
||||
```vue [app.vue]
|
||||
|
||||
@ -128,8 +128,6 @@ See [@unhead/schema](https://github.com/unjs/unhead/blob/main/packages/schema/sr
|
||||
|
||||
Reactivity is supported on all properties, by providing a computed value, a getter, or a reactive object.
|
||||
|
||||
It's recommended to use getters (`() => value`) over computed (`computed(() => value)`).
|
||||
|
||||
::code-group
|
||||
|
||||
```vue twoslash [useHead]
|
||||
|
||||
@ -328,7 +328,7 @@ definePageMeta({
|
||||
},
|
||||
middleware (to, from) {
|
||||
if (to.meta.pageTransition && typeof to.meta.pageTransition !== 'boolean')
|
||||
to.meta.pageTransition.name = +to.params.id > +from.params.id ? 'slide-left' : 'slide-right'
|
||||
to.meta.pageTransition.name = +to.params.id! > +from.params.id! ? 'slide-left' : 'slide-right'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -392,7 +392,7 @@ The page now applies the `slide-left` transition when going to the next id and `
|
||||
|
||||
## Transition with NuxtPage
|
||||
|
||||
When `<NuxtPage />` is used in `app.vue`, transition-props can be passed directly as a component props to activate global transition.
|
||||
When `<NuxtPage />` is used in `app.vue`, transitions can be configured with the `transition` prop to activate transitions globally.
|
||||
|
||||
```vue [app.vue]
|
||||
<template>
|
||||
@ -470,6 +470,4 @@ export default defineNuxtRouteMiddleware(to => {
|
||||
|
||||
### Known issues
|
||||
|
||||
- View transitions may not work as expected with nested pages/layouts/async components owing to this upstream Vue bug: <https://github.com/vuejs/core/issues/5513>. If you make use of this pattern, you may need to delay adopting this experimental feature or implement it yourself. Feedback is very welcome.
|
||||
|
||||
- If you perform data fetching within your page setup functions, that you may wish to reconsider using this feature for the moment. (By design, View Transitions completely freeze DOM updates whilst they are taking place.) We're looking at restrict the View Transition to the final moments before `<Suspense>` resolves, but in the interim you may want to consider carefully whether to adopt this feature if this describes you.
|
||||
|
||||
@ -134,7 +134,7 @@ The `useAsyncData` composable is a great way to wrap and wait for multiple `$fet
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
const { data: discounts, pending } = await useAsyncData('cart-discount', async () => {
|
||||
const { data: discounts, status } = await useAsyncData('cart-discount', async () => {
|
||||
const [coupons, offers] = await Promise.all([
|
||||
$fetch('/cart/coupons'),
|
||||
$fetch('/cart/offers')
|
||||
@ -156,14 +156,13 @@ Read more about `useAsyncData`.
|
||||
`useFetch` and `useAsyncData` have the same return values listed below.
|
||||
|
||||
- `data`: the result of the asynchronous function that is passed in.
|
||||
- `pending`: a boolean indicating whether the data is still being fetched.
|
||||
- `refresh`/`execute`: a function that can be used to refresh the data returned by the `handler` function.
|
||||
- `clear`: a function that can be used to set `data` to undefined, set `error` to `null`, set `pending` to `false`, set `status` to `idle`, and mark any currently pending requests as cancelled.
|
||||
- `clear`: a function that can be used to set `data` to `undefined`, set `error` to `null`, set `status` to `idle`, and mark any currently pending requests as cancelled.
|
||||
- `error`: an error object if the data fetching failed.
|
||||
- `status`: a string indicating the status of the data request (`"idle"`, `"pending"`, `"success"`, `"error"`).
|
||||
|
||||
::note
|
||||
`data`, `pending`, `error` and `status` are Vue refs accessible with `.value` in `<script setup>`
|
||||
`data`, `error` and `status` are Vue refs accessible with `.value` in `<script setup>`
|
||||
::
|
||||
|
||||
By default, Nuxt waits until a `refresh` is finished before it can be executed again.
|
||||
@ -178,18 +177,18 @@ If you have not fetched data on the server (for example, with `server: false`),
|
||||
|
||||
### Lazy
|
||||
|
||||
By default, data fetching composables will wait for the resolution of their asynchronous function before navigating to a new page by using Vue’s Suspense. This feature can be ignored on client-side navigation with the `lazy` option. In that case, you will have to manually handle loading state using the `pending` value.
|
||||
By default, data fetching composables will wait for the resolution of their asynchronous function before navigating to a new page by using Vue’s Suspense. This feature can be ignored on client-side navigation with the `lazy` option. In that case, you will have to manually handle loading state using the `status` value.
|
||||
|
||||
```vue twoslash [app.vue]
|
||||
<script setup lang="ts">
|
||||
const { pending, data: posts } = useFetch('/api/posts', {
|
||||
const { status, data: posts } = useFetch('/api/posts', {
|
||||
lazy: true
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- you will need to handle a loading state -->
|
||||
<div v-if="pending">
|
||||
<div v-if="status === 'pending'">
|
||||
Loading ...
|
||||
</div>
|
||||
<div v-else>
|
||||
@ -204,7 +203,7 @@ You can alternatively use [`useLazyFetch`](/docs/api/composables/use-lazy-fetch)
|
||||
|
||||
```vue twoslash
|
||||
<script setup lang="ts">
|
||||
const { pending, data: posts } = useLazyFetch('/api/posts')
|
||||
const { status, data: posts } = useLazyFetch('/api/posts')
|
||||
</script>
|
||||
```
|
||||
|
||||
@ -227,7 +226,7 @@ Combined with the `lazy` option, this can be useful for data that is not needed
|
||||
const articles = await useFetch('/api/article')
|
||||
|
||||
/* This call will only be performed on the client */
|
||||
const { pending, data: posts } = useFetch('/api/comments', {
|
||||
const { status, data: comments } = useFetch('/api/comments', {
|
||||
lazy: true,
|
||||
server: false
|
||||
})
|
||||
@ -355,7 +354,7 @@ Sometimes you may need to compute an URL from reactive values, and refresh the d
|
||||
<script setup lang="ts">
|
||||
const id = ref(null)
|
||||
|
||||
const { data, pending } = useLazyFetch('/api/user', {
|
||||
const { data, status } = useLazyFetch('/api/user', {
|
||||
query: {
|
||||
user_id: id
|
||||
}
|
||||
@ -371,9 +370,11 @@ Every time a dependency changes, the data will be fetched using the newly constr
|
||||
<script setup lang="ts">
|
||||
const id = ref(null)
|
||||
|
||||
const { data, pending, status } = useLazyFetch(() => `/api/users/${id.value}`, {
|
||||
const { data, status } = useLazyFetch(() => `/api/users/${id.value}`, {
|
||||
immediate: false
|
||||
})
|
||||
|
||||
const pending = computed(() => status.value === 'pending');
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -406,7 +407,7 @@ With that, you will need both the `status` to handle the fetch lifecycle, and `e
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
const { data, error, execute, pending, status } = await useLazyFetch('/api/comments', {
|
||||
const { data, error, execute, status } = await useLazyFetch('/api/comments', {
|
||||
immediate: false
|
||||
})
|
||||
</script>
|
||||
@ -416,7 +417,7 @@ const { data, error, execute, pending, status } = await useLazyFetch('/api/comme
|
||||
<button @click="execute">Get data</button>
|
||||
</div>
|
||||
|
||||
<div v-else-if="pending">
|
||||
<div v-else-if="status === 'pending'">
|
||||
Loading comments...
|
||||
</div>
|
||||
|
||||
@ -494,7 +495,7 @@ onMounted(() => console.log(document.cookie))
|
||||
|
||||
## Options API support
|
||||
|
||||
Nuxt 3 provides a way to perform `asyncData` fetching within the Options API. You must wrap your component definition within `defineNuxtComponent` for this to work.
|
||||
Nuxt provides a way to perform `asyncData` fetching within the Options API. You must wrap your component definition within `defineNuxtComponent` for this to work.
|
||||
|
||||
```vue
|
||||
<script>
|
||||
|
||||
@ -24,7 +24,7 @@ Read more about `useState` composable.
|
||||
|
||||
::warning
|
||||
Never define `const state = ref()` outside of `<script setup>` or `setup()` function.<br>
|
||||
Such state will be shared across all users visiting your website and can lead to memory leaks!
|
||||
For example, doing `export myState = ref({})` would result in state shared across requests on the server and can lead to memory leaks.
|
||||
::
|
||||
|
||||
::tip{icon="i-ph-check-circle-duotone"}
|
||||
|
||||
@ -4,7 +4,7 @@ description: 'Learn how to catch and handle errors in Nuxt.'
|
||||
navigation.icon: i-ph-bug-beetle-duotone
|
||||
---
|
||||
|
||||
Nuxt 3 is a full-stack framework, which means there are several sources of unpreventable user runtime errors that can happen in different contexts:
|
||||
Nuxt is a full-stack framework, which means there are several sources of unpreventable user runtime errors that can happen in different contexts:
|
||||
|
||||
- Errors during the Vue rendering lifecycle (SSR & CSR)
|
||||
- Server and client startup errors (SSR + CSR)
|
||||
@ -150,10 +150,10 @@ Read more about `useError` composable.
|
||||
### `createError`
|
||||
|
||||
```ts [TS Signature]
|
||||
function createError (err: { cause, data, message, name, stack, statusCode, statusMessage, fatal }): Error
|
||||
function createError (err: string | { cause, data, message, name, stack, statusCode, statusMessage, fatal }): Error
|
||||
```
|
||||
|
||||
Create an error object with additional metadata. It is usable in both the Vue and Server portions of your app, and is meant to be thrown.
|
||||
Create an error object with additional metadata. You can pass a string to be set as the error `message` or an object containing error properties. It is usable in both the Vue and Server portions of your app, and is meant to be thrown.
|
||||
|
||||
If you throw an error created with `createError`:
|
||||
- on server-side, it will trigger a full-screen error page which you can clear with [`clearError`](#clearerror).
|
||||
|
||||
@ -4,7 +4,7 @@ description: Nuxt provides a powerful system that allows you to extend the defau
|
||||
navigation.icon: i-ph-stack-duotone
|
||||
---
|
||||
|
||||
One of the core features of Nuxt 3 is the layers and extending support. You can extend a default Nuxt application to reuse components, utils, and configuration. The layers structure is almost identical to a standard Nuxt application which makes them easy to author and maintain.
|
||||
One of the core features of Nuxt is the layers and extending support. You can extend a default Nuxt application to reuse components, utils, and configuration. The layers structure is almost identical to a standard Nuxt application which makes them easy to author and maintain.
|
||||
|
||||
## Use Cases
|
||||
|
||||
@ -18,7 +18,11 @@ One of the core features of Nuxt 3 is the layers and extending support. You can
|
||||
|
||||
## Usage
|
||||
|
||||
You can extend a layer by adding the [extends](/docs/api/nuxt-config#extends) property to the [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) file.
|
||||
By default, any layers within your project in the `~/layers` directory will be automatically registered as layers in your project
|
||||
|
||||
::note Layer auto-registration was introduced in Nuxt v3.12.0 ::
|
||||
|
||||
In addition, you can extend from a layer by adding the [extends](/docs/api/nuxt-config#extends) property to your [`nuxt.config`](/docs/guide/directory-structure/nuxt-config) file.
|
||||
|
||||
```ts [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
|
||||
@ -14,10 +14,26 @@ Use the [`nuxi generate` command](/docs/api/commands/generate) to build and pre-
|
||||
|
||||
This will build your site, stand up a nuxt instance, and, by default, prerender the root page `/` along with any of your site's pages it links to, any of your site's pages they link to, and so on.
|
||||
|
||||
```bash [Terminal]
|
||||
::code-group
|
||||
|
||||
```bash [npm]
|
||||
npx nuxi generate
|
||||
```
|
||||
|
||||
```bash [yarn]
|
||||
yarn dlx nuxi generate
|
||||
```
|
||||
|
||||
```bash [pnpm]
|
||||
pnpm dlx nuxi generate
|
||||
```
|
||||
|
||||
```bash [bun]
|
||||
bunx nuxi generate
|
||||
```
|
||||
|
||||
::
|
||||
|
||||
You can now deploy the `.output/public` directory to any static hosting service or preview it locally with `npx serve .output/public`.
|
||||
|
||||
Working of the Nitro crawler:
|
||||
|
||||
@ -34,7 +34,7 @@ Nuxt auto-imports functions and composables to perform [data fetching](/docs/get
|
||||
```vue twoslash
|
||||
<script setup lang="ts">
|
||||
/* useAsyncData() and $fetch() are auto-imported */
|
||||
const { data, refresh, pending } = await useFetch('/api/hello')
|
||||
const { data, refresh, status } = await useFetch('/api/hello')
|
||||
</script>
|
||||
```
|
||||
|
||||
@ -105,6 +105,11 @@ Nuxt directly auto-imports files created in defined directories:
|
||||
|
||||
:link-example{to="/docs/examples/features/auto-imports"}
|
||||
|
||||
::warning
|
||||
**Auto-imported `ref` and `computed` won't be unwrapped in a component `<template>`.** :br
|
||||
This is due to how Vue works with refs that aren't top-level to the template. You can read more about it [in the Vue documentation](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#caveat-when-unwrapping-in-templates).
|
||||
::
|
||||
|
||||
### Explicit Imports
|
||||
|
||||
Nuxt exposes every auto-import with the `#imports` alias that can be used to make the import explicit if needed:
|
||||
|
||||
@ -39,7 +39,7 @@ Most applications need multiple pages and a way to navigate between them. This i
|
||||
|
||||
## Differences with Nuxt 2 / Vue 2
|
||||
|
||||
Nuxt 3 is based on Vue 3. The new major Vue version introduces several changes that Nuxt takes advantage of:
|
||||
Nuxt 3+ is based on Vue 3. The new major Vue version introduces several changes that Nuxt takes advantage of:
|
||||
|
||||
- Better performance
|
||||
- Composition API
|
||||
@ -89,15 +89,15 @@ const increment = () => count.value++
|
||||
</script>
|
||||
```
|
||||
|
||||
The goal of Nuxt 3 is to provide a great developer experience around the Composition API.
|
||||
The goal of Nuxt is to provide a great developer experience around the Composition API.
|
||||
|
||||
- Use auto-imported [Reactivity functions](https://vuejs.org/api/reactivity-core.html) from Vue and Nuxt 3 [built-in composables](/docs/api/composables/use-async-data).
|
||||
- Use auto-imported [Reactivity functions](https://vuejs.org/api/reactivity-core.html) from Vue and Nuxt [built-in composables](/docs/api/composables/use-async-data).
|
||||
- Write your own auto-imported reusable functions in the [`composables/` directory](/docs/guide/directory-structure/composables).
|
||||
|
||||
### TypeScript Support
|
||||
|
||||
Both Vue 3 and Nuxt 3 are written in TypeScript. A fully typed codebase prevents mistakes and documents APIs usage. This doesn’t mean that you have to write your application in TypeScript to take advantage of it. With Nuxt 3, you can opt-in by renaming your file from `.js` to `.ts` , or add `<script setup lang="ts">` in a component.
|
||||
Both Vue 3 and Nuxt 3+ are written in TypeScript. A fully typed codebase prevents mistakes and documents APIs usage. This doesn’t mean that you have to write your application in TypeScript to take advantage of it. With Nuxt 3, you can opt-in by renaming your file from `.js` to `.ts` , or add `<script setup lang="ts">` in a component.
|
||||
|
||||
::read-more{to="/docs/guide/concepts/typescript"}
|
||||
Read the details about TypeScript in Nuxt 3
|
||||
Read the details about TypeScript in Nuxt
|
||||
::
|
||||
|
||||
@ -105,7 +105,7 @@ Hybrid rendering allows different caching rules per route using **Route Rules**
|
||||
|
||||
Previously every route/page of a Nuxt application and server must use the same rendering mode, universal or client-side. In various cases, some pages could be generated at build time, while others should be client-side rendered. For example, think of a content website with an admin section. Every content page should be primarily static and generated once, but the admin section requires registration and behaves more like a dynamic application.
|
||||
|
||||
Nuxt 3 includes route rules and hybrid rendering support. Using route rules you can define rules for a group of nuxt routes, change rendering mode or assign a cache strategy based on route!
|
||||
Nuxt includes route rules and hybrid rendering support. Using route rules you can define rules for a group of nuxt routes, change rendering mode or assign a cache strategy based on route!
|
||||
|
||||
Nuxt server will automatically register corresponding middleware and wrap routes with cache handlers using [Nitro caching layer](https://nitro.unjs.io/guide/cache).
|
||||
|
||||
@ -168,7 +168,7 @@ Note that Hybrid Rendering is not available when using [`nuxt generate`](/docs/a
|
||||
|
||||
## Edge-Side Rendering
|
||||
|
||||
Edge-Side Rendering (ESR) is a powerful feature introduced in Nuxt 3 that allows the rendering of your Nuxt application closer to your users via edge servers of a Content Delivery Network (CDN). By leveraging ESR, you can ensure improved performance and reduced latency, thereby providing an enhanced user experience.
|
||||
Edge-Side Rendering (ESR) is a powerful feature introduced in Nuxt that allows the rendering of your Nuxt application closer to your users via edge servers of a Content Delivery Network (CDN). By leveraging ESR, you can ensure improved performance and reduced latency, thereby providing an enhanced user experience.
|
||||
|
||||
With ESR, the rendering process is pushed to the 'edge' of the network - the CDN's edge servers. Note that ESR is more a deployment target than an actual rendering mode.
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Server Engine
|
||||
description: 'Nuxt 3 is powered by a new server engine: Nitro.'
|
||||
description: 'Nuxt is powered by a new server engine: Nitro.'
|
||||
---
|
||||
|
||||
While building Nuxt 3, we created a new server engine: [Nitro](https://nitro.unjs.io).
|
||||
@ -53,7 +53,7 @@ Nitro produces a standalone server dist that is independent of `node_modules`.
|
||||
|
||||
The server in Nuxt 2 is not standalone and requires part of Nuxt core to be involved by running `nuxt start` (with the [`nuxt-start`](https://www.npmjs.com/package/nuxt-start) or [`nuxt`](https://www.npmjs.com/package/nuxt) distributions) or custom programmatic usage, which is fragile and prone to breakage and not suitable for serverless and service-worker environments.
|
||||
|
||||
Nuxt 3 generates this dist when running `nuxt build` into a [`.output`](/docs/guide/directory-structure/output) directory.
|
||||
Nuxt generates this dist when running `nuxt build` into a [`.output`](/docs/guide/directory-structure/output) directory.
|
||||
|
||||
The output contains runtime code to run your Nuxt server in any environment (including experimental browser service workers!) and serve your static files, making it a true hybrid framework for the JAMstack. In addition, Nuxt implements a native storage layer, supporting multi-source drivers and local assets.
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
title: 'ES Modules'
|
||||
description: "Nuxt 3 (and Bridge) uses Native ES Modules."
|
||||
description: "Nuxt uses native ES modules."
|
||||
---
|
||||
|
||||
This guide helps explain what ES Modules are and how to make a Nuxt app (or upstream library) compatible with ESM.
|
||||
@ -190,7 +190,7 @@ import { default as pkg } from 'cjs-pkg'
|
||||
import('cjs-pkg').then(m => m.default || m).then(console.log)
|
||||
```
|
||||
|
||||
For handling more complex situations and more safety, we recommend and internally use [mlly](https://github.com/unjs/mlly) in Nuxt 3 that can preserve named exports.
|
||||
For handling more complex situations and more safety, we recommend and internally use [mlly](https://github.com/unjs/mlly) in Nuxt that can preserve named exports.
|
||||
|
||||
```js
|
||||
import { interopDefault } from 'mlly'
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
title: 'TypeScript'
|
||||
description: "Nuxt 3 is fully typed and provides helpful shortcuts to ensure you have access to accurate type information when you are coding."
|
||||
description: "Nuxt is fully typed and provides helpful shortcuts to ensure you have access to accurate type information when you are coding."
|
||||
---
|
||||
|
||||
## Type-checking
|
||||
@ -9,10 +9,6 @@ By default, Nuxt doesn't check types when you run [`nuxi dev`](/docs/api/command
|
||||
|
||||
To enable type-checking at build or development time, install `vue-tsc` and `typescript` as development dependency:
|
||||
|
||||
::alert{type="warning"}
|
||||
You may experience issues with the latest `vue-tsc` and `vite-plugin-checker`, used internally when type checking. For now, you may need to stay on v1 of `vue-tsc`, and follow these upstream issues for updates: [fi3ework/vite-plugin-checker#306](https://github.com/fi3ework/vite-plugin-checker/issues/306) and [vuejs/language-tools#3969](https://github.com/vuejs/language-tools/issues/3969).
|
||||
::
|
||||
|
||||
::code-group
|
||||
|
||||
```bash [yarn]
|
||||
@ -55,7 +51,7 @@ When you run `nuxi dev` or `nuxi build`, Nuxt generates the following files for
|
||||
|
||||
### `.nuxt/nuxt.d.ts`
|
||||
|
||||
This file contains the types of any modules you are using, as well as the key types that Nuxt 3 requires. Your IDE should recognize these types automatically.
|
||||
This file contains the types of any modules you are using, as well as the key types that Nuxt requires. Your IDE should recognize these types automatically.
|
||||
|
||||
Some of the references in the file are to files that are only generated within your `buildDir` (`.nuxt`) and therefore for full typings, you will need to run `nuxi dev` or `nuxi build`.
|
||||
|
||||
@ -84,7 +80,7 @@ In case you need to extend options provided by `./.nuxt/tsconfig.json` further,
|
||||
|
||||
TypeScript comes with certain checks to give you more safety and analysis of your program.
|
||||
|
||||
[Strict checks](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html#getting-stricter-checks) are enabled by default in Nuxt 3 to give you greater type safety.
|
||||
[Strict checks](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html#getting-stricter-checks) are enabled by default in Nuxt to give you greater type safety.
|
||||
|
||||
If you are currently converting your codebase to TypeScript, you may want to temporarily disable strict checks by setting `strict` to `false` in your `nuxt.config`:
|
||||
|
||||
|
||||
@ -303,6 +303,10 @@ Server-only components use [`<NuxtIsland>`](/docs/api/components/nuxt-island) un
|
||||
Server components (and islands) must have a single root element. (HTML comments are considered elements as well.)
|
||||
::
|
||||
|
||||
::alert{type=warning}
|
||||
Be careful when nesting islands within other islands as each island adds some extra overhead.
|
||||
::
|
||||
|
||||
::alert{type=warning}
|
||||
Most features for server-only components and island components, such as slots and client components, are only available for single file components.
|
||||
::
|
||||
|
||||
@ -61,6 +61,6 @@ modules/
|
||||
|
||||
:read-more{to="/docs/guide/going-further/modules"}
|
||||
|
||||
::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/creating-your-first-module-from-scratch" target="_blank"}
|
||||
::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/creating-your-first-module-from-scratch?friend=nuxt" target="_blank"}
|
||||
Watch Vue School video about Nuxt private modules.
|
||||
::
|
||||
|
||||
@ -342,7 +342,7 @@ Learn more about `<NuxtLink>` usage.
|
||||
|
||||
## Programmatic Navigation
|
||||
|
||||
Nuxt 3 allows programmatic navigation through the `navigateTo()` utility method. Using this utility method, you will be able to programmatically navigate the user in your app. This is great for taking input from the user and navigating them dynamically throughout your application. In this example, we have a simple method called `navigate()` that gets called when the user submits a search form.
|
||||
Nuxt allows programmatic navigation through the `navigateTo()` utility method. Using this utility method, you will be able to programmatically navigate the user in your app. This is great for taking input from the user and navigating them dynamically throughout your application. In this example, we have a simple method called `navigate()` that gets called when the user submits a search form.
|
||||
|
||||
::note
|
||||
Ensure to always `await` on `navigateTo` or chain its result by returning from functions.
|
||||
|
||||
@ -33,6 +33,10 @@ 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`.
|
||||
|
||||
::important
|
||||
In your application code, you should use [Runtime Config](/docs/guide/going-further/runtime-config) instead of plain env variables.
|
||||
::
|
||||
|
||||
## Production
|
||||
|
||||
**After your server is built**, you are responsible for setting environment variables when you run the server.
|
||||
|
||||
@ -5,7 +5,7 @@ description: Expose reactive configuration within your application with the App
|
||||
navigation.icon: i-ph-file-duotone
|
||||
---
|
||||
|
||||
Nuxt 3 provides an `app.config` config file to expose reactive configuration within your application with the ability to update it at runtime within lifecycle or using a nuxt plugin and editing it with HMR (hot-module-replacement).
|
||||
Nuxt provides an `app.config` config file to expose reactive configuration within your application with the ability to update it at runtime within lifecycle or using a nuxt plugin and editing it with HMR (hot-module-replacement).
|
||||
|
||||
You can easily provide runtime app configuration using `app.config.ts` file. It can have either of `.ts`, `.js`, or `.mjs` extensions.
|
||||
|
||||
|
||||
@ -57,20 +57,6 @@ export default defineNuxtConfig({
|
||||
This feature will likely be removed in a near future.
|
||||
::
|
||||
|
||||
## treeshakeClientOnly
|
||||
|
||||
Tree shakes contents of client-only components from server bundle.
|
||||
|
||||
*Enabled by default.*
|
||||
|
||||
```ts twoslash [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
experimental: {
|
||||
treeshakeClientOnly: true
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## emitRouteChunkError
|
||||
|
||||
Emits `app:chunkError` hook when there is an error loading vite/webpack chunks. Default behavior is to perform a hard reload of the new route when a chunk fails to load.
|
||||
@ -238,44 +224,6 @@ export default defineNuxtConfig({
|
||||
You can follow the server components roadmap on GitHub.
|
||||
::
|
||||
|
||||
## configSchema
|
||||
|
||||
Enables config schema support.
|
||||
|
||||
*Enabled by default.*
|
||||
|
||||
```ts twoslash [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
experimental: {
|
||||
configSchema: true
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## polyfillVueUseHead
|
||||
|
||||
Adds a compatibility layer for modules, plugins, or user code relying on the old `@vueuse/head` API.
|
||||
|
||||
```ts twoslash [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
experimental: {
|
||||
polyfillVueUseHead: false
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## respectNoSSRHeader
|
||||
|
||||
Allow disabling Nuxt SSR responses by setting the `x-nuxt-no-ssr` header.
|
||||
|
||||
```ts twoslash [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
experimental: {
|
||||
respectNoSSRHeader: false
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## localLayerAliases
|
||||
|
||||
Resolve `~`, `~~`, `@` and `@@` aliases located within layers with respect to their layer source and root directories.
|
||||
|
||||
@ -94,7 +94,7 @@ The behavior is different between the client-side and server-side:
|
||||
|
||||
- On client-side, only keys in `runtimeConfig.public` are available, and the object is both writable and reactive.
|
||||
|
||||
- On server-side, the entire runtime config is available on the server-side, but it is read-only to avoid context sharing.
|
||||
- On server-side, the entire runtime config is available, but it is read-only to avoid context sharing.
|
||||
::
|
||||
|
||||
```vue [pages/index.vue]
|
||||
|
||||
@ -15,6 +15,12 @@ The build and publishing method and quality of these 'nightly' releases are the
|
||||
Features that are only available on the nightly release channel are marked with an alert in the documentation.
|
||||
::
|
||||
|
||||
::alert{type="warning"}
|
||||
The `latest` nightly release channel is currently tracking the Nuxt v4 branch, meaning that it is particularly likely to have breaking changes right now - be careful!
|
||||
|
||||
You can opt in to the 3.x branch nightly releases with `"nuxt": "npm:nuxt-nightly@3x"`.
|
||||
::
|
||||
|
||||
## Opting In
|
||||
|
||||
Update `nuxt` dependency inside `package.json`:
|
||||
|
||||
@ -90,7 +90,7 @@ declare module '#app' {
|
||||
}
|
||||
}
|
||||
|
||||
declare module 'nitropack' {
|
||||
declare module 'nitro/types' {
|
||||
interface NitroRuntimeHooks {
|
||||
'your-nitro-hook': () => void;
|
||||
}
|
||||
|
||||
@ -13,10 +13,25 @@ With modules, you can encapsulate, properly test, and share custom solutions as
|
||||
|
||||
We recommend you get started with Nuxt Modules using our [starter template](https://github.com/nuxt/starter/tree/module):
|
||||
|
||||
```bash [Terminal]
|
||||
::code-group
|
||||
|
||||
```bash [npm]
|
||||
npx nuxi init -t module my-module
|
||||
```
|
||||
|
||||
```bash [yarn]
|
||||
yarn dlx nuxi init -t module my-module
|
||||
```
|
||||
|
||||
```bash [pnpm]
|
||||
pnpm dlx nuxi init -t module my-module
|
||||
```
|
||||
|
||||
```bash [bun]
|
||||
bunx nuxi init -t module my-module
|
||||
```
|
||||
::
|
||||
|
||||
This will create a `my-module` project with all the boilerplate necessary to develop and publish your module.
|
||||
|
||||
**Next steps:**
|
||||
@ -30,7 +45,7 @@ This will create a `my-module` project with all the boilerplate necessary to dev
|
||||
|
||||
Learn how to perform basic tasks with the module starter.
|
||||
|
||||
::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/navigating-the-official-starter-template" target="_blank"}
|
||||
::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/navigating-the-official-starter-template?friend=nuxt" target="_blank"}
|
||||
Watch Vue School video about Nuxt module starter template.
|
||||
::
|
||||
|
||||
@ -155,7 +170,7 @@ export default defineNuxtModule({
|
||||
// Compatibility constraints
|
||||
compatibility: {
|
||||
// Semver version of supported nuxt versions
|
||||
nuxt: '^3.0.0'
|
||||
nuxt: '>=3.0.0'
|
||||
}
|
||||
},
|
||||
// Default configuration options for your module, can also be a function returning those
|
||||
@ -259,7 +274,7 @@ export default defineNuxtModule({
|
||||
|
||||
When you need to handle more complex configuration alterations, you should consider using [defu](https://github.com/unjs/defu).
|
||||
|
||||
::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/extending-and-altering-nuxt-configuration-and-options" target="_blank"}
|
||||
::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/extending-and-altering-nuxt-configuration-and-options?friend=nuxt" target="_blank"}
|
||||
Watch Vue School video about altering Nuxt configuration.
|
||||
::
|
||||
|
||||
@ -296,7 +311,7 @@ Be careful not to expose any sensitive module configuration on the public runtim
|
||||
|
||||
:read-more{to="/docs/guide/going-further/runtime-config"}
|
||||
|
||||
::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/passing-and-exposing-module-options" target="_blank"}
|
||||
::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/passing-and-exposing-module-options?friend=nuxt" target="_blank"}
|
||||
Watch Vue School video about passing and exposing Nuxt module options.
|
||||
::
|
||||
|
||||
@ -523,7 +538,7 @@ export default defineNuxtModule({
|
||||
|
||||
:read-more{to="/docs/api/advanced/hooks"}
|
||||
|
||||
::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/nuxt-lifecycle-hooks" target="_blank"}
|
||||
::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/nuxt-lifecycle-hooks?friend=nuxt" target="_blank"}
|
||||
Watch Vue School video about using Nuxt lifecycle hooks in modules.
|
||||
::
|
||||
|
||||
@ -583,7 +598,7 @@ export default defineNuxtModule({
|
||||
interface MyModuleNitroRules {
|
||||
myModule?: { foo: 'bar' }
|
||||
}
|
||||
declare module 'nitropack' {
|
||||
declare module 'nitro/types' {
|
||||
interface NitroRouteRules extends MyModuleNitroRules {}
|
||||
interface NitroRouteConfig extends MyModuleNitroRules {}
|
||||
}
|
||||
@ -749,7 +764,7 @@ The module starter comes with a default set of tools and configurations (e.g. ES
|
||||
|
||||
[Nuxt Module ecosystem](/modules) represents more than 15 million monthly NPM downloads and provides extended functionalities and integrations with all sort of tools. You can be part of this ecosystem!
|
||||
|
||||
::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/exploring-nuxt-modules-ecosystem-and-module-types" target="_blank"}
|
||||
::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/exploring-nuxt-modules-ecosystem-and-module-types?friend=nuxt" target="_blank"}
|
||||
Watch Vue School video about Nuxt module types.
|
||||
::
|
||||
|
||||
|
||||
@ -24,7 +24,7 @@ Let's pretend here that:
|
||||
- If the API responds with a `401` status code, we redirect the user to the `/login` page
|
||||
|
||||
```ts [plugins/api.ts]
|
||||
export default defineNuxtPlugin(() => {
|
||||
export default defineNuxtPlugin((nuxtApp) => {
|
||||
const { session } = useUserSession()
|
||||
|
||||
const api = $fetch.create({
|
||||
@ -43,7 +43,7 @@ export default defineNuxtPlugin(() => {
|
||||
},
|
||||
async onResponseError({ response }) {
|
||||
if (response.status === 401) {
|
||||
await navigateTo('/login')
|
||||
await nuxtApp.runWithContext(() => navigateTo('/login'))
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -70,7 +70,7 @@ const { data: modules } = await useAsyncData('modules', () => $api('/modules'))
|
||||
Wrapping with [`useAsyncData`](/docs/api/composables/use-async-data) **avoid double data fetching when doing server-side rendering** (server & client on hydration).
|
||||
::
|
||||
|
||||
## Custom `useFetch`
|
||||
## Custom `useFetch`/`useAsyncData`
|
||||
|
||||
Now that `$api` has the logic we want, let's create a `useAPI` composable to replace the usage of `useAsyncData` + `$api`:
|
||||
|
||||
@ -96,6 +96,10 @@ const { data: modules } = await useAPI('/modules')
|
||||
</script>
|
||||
```
|
||||
|
||||
::note
|
||||
This example demonstrates how to use a custom `useFetch`, but the same structure is identical for a custom `useAsyncData`.
|
||||
::
|
||||
|
||||
::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.
|
||||
::
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
title: '<NuxtRouteAnnouncer>'
|
||||
description: 'Add a hidden element with the page title for assistive technologies.'
|
||||
description: 'The <NuxtRouteAnnouncer> component adds a hidden element with the page title to announce route changes to assistive technologies.'
|
||||
navigation:
|
||||
badge: New
|
||||
links:
|
||||
@ -16,7 +16,7 @@ This component is available in Nuxt v3.12+.
|
||||
|
||||
## Usage
|
||||
|
||||
Add `<NuxtRouteAnnouncer/>` in your [`app.vue`](/docs/guide/directory-structure/app) or [`layouts/`](/docs/guide/directory-structure/layouts) to enhance accessibility by informing assistive technologies about page's title changes. This ensures that navigational changes are announced to users relying on screen readers.
|
||||
Add `<NuxtRouteAnnouncer/>` in your [`app.vue`](/docs/guide/directory-structure/app) or [`layouts/`](/docs/guide/directory-structure/layouts) to enhance accessibility by informing assistive technologies about page title changes. This ensures that navigational changes are announced to users relying on screen readers.
|
||||
|
||||
```vue [app.vue]
|
||||
<template>
|
||||
@ -29,7 +29,7 @@ Add `<NuxtRouteAnnouncer/>` in your [`app.vue`](/docs/guide/directory-structure/
|
||||
|
||||
## Slots
|
||||
|
||||
You can pass custom HTML or components through the route announcer default slot.
|
||||
You can pass custom HTML or components through the route announcer's default slot.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
@ -43,7 +43,7 @@ You can pass custom HTML or components through the route announcer default slot.
|
||||
|
||||
## Props
|
||||
|
||||
- `atomic`: Controls if screen readers announce only changes or the entire content. Set to true for full content readout on updates, false for changes only. (default `false`)
|
||||
- `atomic`: Controls if screen readers only announce changes or the entire content. Set to true for full content readouts on updates, false for changes only. (default `false`)
|
||||
- `politeness`: Sets the urgency for screen reader announcements: `off` (disable the announcement), `polite` (waits for silence), or `assertive` (interrupts immediately). (default `polite`)
|
||||
|
||||
::callout
|
||||
|
||||
@ -111,7 +111,7 @@ When you need to overwrite this behavior you can use the `rel` and `noRel` props
|
||||
|
||||
When not using `external`, `<NuxtLink>` supports all Vue Router's [`RouterLink` props](https://router.vuejs.org/api/interfaces/RouterLinkProps.html)
|
||||
|
||||
- `to`: Any URL or a [route location object](https://router.vuejs.org/api/interfaces/RouteLocation.html) from Vue Router
|
||||
- `to`: Any URL or a [route location object](https://router.vuejs.org/api/#RouteLocation) from Vue Router
|
||||
- `custom`: Whether `<NuxtLink>` should wrap its content in an `<a>` element. It allows taking full control of how a link is rendered and how navigation works when it is clicked. Works the same as [Vue Router's `custom` prop](https://router.vuejs.org/api/interfaces/RouterLinkProps.html#Properties-custom)
|
||||
- `exactActiveClass`: A class to apply on exact active links. Works the same as [Vue Router's `exact-active-class` prop](https://router.vuejs.org/api/interfaces/RouterLinkProps.html#Properties-exactActiveClass) on internal links. Defaults to Vue Router's default `"router-link-exact-active"`)
|
||||
- `replace`: Works the same as [Vue Router's `replace` prop](https://router.vuejs.org/api/interfaces/RouteLocationOptions.html#Properties-replace) on internal links
|
||||
@ -140,7 +140,7 @@ Defaults can be overwritten, see [overwriting defaults](#overwriting-defaults) i
|
||||
|
||||
### In Nuxt Config
|
||||
|
||||
You can overwrite some `<NuxtLink>` defaults in your [`nuxt.config`](https://nuxt.com/docs/api/nuxt-config#defaults)
|
||||
You can overwrite some `<NuxtLink>` defaults in your [`nuxt.config`](/docs/api/nuxt-config#defaults)
|
||||
|
||||
::important
|
||||
These options will likely be moved elsewhere in the future, such as into `app.config` or into the `app/` directory.
|
||||
|
||||
@ -18,15 +18,19 @@ Within your pages, components, and plugins you can use useAsyncData to get acces
|
||||
|
||||
```vue [pages/index.vue]
|
||||
<script setup lang="ts">
|
||||
const { data, pending, error, refresh } = await useAsyncData(
|
||||
const { data, status, error, refresh, clear } = await useAsyncData(
|
||||
'mountains',
|
||||
() => $fetch('https://api.nuxtjs.dev/mountains')
|
||||
)
|
||||
</script>
|
||||
```
|
||||
|
||||
::warning
|
||||
If you're using a custom useAsyncData wrapper, do not await it in the composable, as that can cause unexpected behavior. Please follow [this recipe](/docs/guide/recipes/custom-usefetch#custom-usefetch) for more information on how to make a custom async data fetcher.
|
||||
::
|
||||
|
||||
::note
|
||||
`data`, `pending`, `status` and `error` are Vue refs and they should be accessed with `.value` when used within the `<script setup>`, while `refresh`/`execute` is a plain function for refetching data.
|
||||
`data`, `status` and `error` are Vue refs and they should be accessed with `.value` when used within the `<script setup>`, while `refresh`/`execute` and `clear` are plain functions.
|
||||
::
|
||||
|
||||
### Watch Params
|
||||
@ -88,10 +92,10 @@ Learn how to use `transform` and `getCachedData` to avoid superfluous calls to a
|
||||
## Return Values
|
||||
|
||||
- `data`: the result of the asynchronous function that is passed in.
|
||||
- `pending`: a boolean indicating whether the data is still being fetched.
|
||||
- `refresh`/`execute`: a function that can be used to refresh the data returned by the `handler` function.
|
||||
- `error`: an error object if the data fetching failed.
|
||||
- `status`: a string indicating the status of the data request (`"idle"`, `"pending"`, `"success"`, `"error"`).
|
||||
- `clear`: a function which will set `data` to `undefined`, set `error` to `null`, set `status` to `'idle'`, and mark any currently pending requests as cancelled.
|
||||
|
||||
By default, Nuxt waits until a `refresh` is finished before it can be executed again.
|
||||
|
||||
@ -127,7 +131,6 @@ type AsyncDataOptions<DataT> = {
|
||||
|
||||
type AsyncData<DataT, ErrorT> = {
|
||||
data: Ref<DataT | null>
|
||||
pending: Ref<boolean>
|
||||
refresh: (opts?: AsyncDataExecuteOptions) => Promise<void>
|
||||
execute: (opts?: AsyncDataExecuteOptions) => Promise<void>
|
||||
clear: () => void
|
||||
|
||||
@ -45,6 +45,10 @@ counter.value = counter.value || Math.round(Math.random() * 1000)
|
||||
|
||||
:link-example{to="/docs/examples/advanced/use-cookie"}
|
||||
|
||||
::note
|
||||
Refresh `useCookie` values manually when a cookie has changed with [`refreshCookie`](/docs/api/utils/refresh-cookie).
|
||||
::
|
||||
|
||||
## Options
|
||||
|
||||
Cookie composable accepts several options which let you modify the behavior of cookies.
|
||||
@ -148,6 +152,10 @@ Specifies the `boolean` or `string` value for [watch](https://vuejs.org/api/reac
|
||||
- `shallow` - Will watch cookie ref data changes for only top level properties
|
||||
- `false` - Will not watch cookie ref data changes.
|
||||
|
||||
::note
|
||||
Refresh `useCookie` values manually when a cookie has changed with [`refreshCookie`](/docs/api/utils/refresh-cookie).
|
||||
::
|
||||
|
||||
**Example 1:**
|
||||
|
||||
```vue
|
||||
|
||||
@ -19,21 +19,25 @@ It automatically generates a key based on URL and fetch options, provides type h
|
||||
|
||||
```vue [pages/modules.vue]
|
||||
<script setup lang="ts">
|
||||
const { data, pending, error, refresh } = await useFetch('/api/modules', {
|
||||
const { data, status, error, refresh, clear } = await useFetch('/api/modules', {
|
||||
pick: ['title']
|
||||
})
|
||||
</script>
|
||||
```
|
||||
|
||||
::warning
|
||||
If you're using a custom useFetch wrapper, do not await it in the composable, as that can cause unexpected behavior. Please follow [this recipe](/docs/guide/recipes/custom-usefetch#custom-usefetch) for more information on how to make a custom async data fetcher.
|
||||
::
|
||||
|
||||
::note
|
||||
`data`, `pending`, `status` and `error` are Vue refs and they should be accessed with `.value` when used within the `<script setup>`, while `refresh`/`execute` is a plain function for refetching data.
|
||||
`data`, `status` and `error` are Vue refs and they should be accessed with `.value` when used within the `<script setup>`, while `refresh`/`execute` and `clear` are plain functions..
|
||||
::
|
||||
|
||||
Using the `query` option, you can add search parameters to your query. This option is extended from [unjs/ofetch](https://github.com/unjs/ofetch) and is using [unjs/ufo](https://github.com/unjs/ufo) to create the URL. Objects are automatically stringified.
|
||||
|
||||
```ts
|
||||
const param1 = ref('value1')
|
||||
const { data, pending, error, refresh } = await useFetch('/api/modules', {
|
||||
const { data, status, error, refresh } = await useFetch('/api/modules', {
|
||||
query: { param1, param2: 'value2' }
|
||||
})
|
||||
```
|
||||
@ -43,7 +47,7 @@ The above example results in `https://api.nuxt.com/modules?param1=value1¶m2=
|
||||
You can also use [interceptors](https://github.com/unjs/ofetch#%EF%B8%8F-interceptors):
|
||||
|
||||
```ts
|
||||
const { data, pending, error, refresh } = await useFetch('/api/auth/login', {
|
||||
const { data, status, error, refresh, clear } = await useFetch('/api/auth/login', {
|
||||
onRequest({ request, options }) {
|
||||
// Set the request headers
|
||||
options.headers = options.headers || {}
|
||||
@ -124,10 +128,10 @@ Learn how to use `transform` and `getCachedData` to avoid superfluous calls to a
|
||||
## Return Values
|
||||
|
||||
- `data`: the result of the asynchronous function that is passed in.
|
||||
- `pending`: a boolean indicating whether the data is still being fetched.
|
||||
- `refresh`/`execute`: a function that can be used to refresh the data returned by the `handler` function.
|
||||
- `error`: an error object if the data fetching failed.
|
||||
- `status`: a string indicating the status of the data request (`"idle"`, `"pending"`, `"success"`, `"error"`).
|
||||
- `clear`: a function which will set `data` to `undefined`, set `error` to `null`, set `status` to `'idle'`, and mark any currently pending requests as cancelled.
|
||||
|
||||
By default, Nuxt waits until a `refresh` is finished before it can be executed again.
|
||||
|
||||
@ -165,7 +169,6 @@ type UseFetchOptions<DataT> = {
|
||||
|
||||
type AsyncData<DataT, ErrorT> = {
|
||||
data: Ref<DataT | null>
|
||||
pending: Ref<boolean>
|
||||
refresh: (opts?: AsyncDataExecuteOptions) => Promise<void>
|
||||
execute: (opts?: AsyncDataExecuteOptions) => Promise<void>
|
||||
clear: () => void
|
||||
|
||||
@ -23,9 +23,9 @@ By default, [`useAsyncData`](/docs/api/composables/use-async-data) blocks naviga
|
||||
```vue [pages/index.vue]
|
||||
<script setup lang="ts">
|
||||
/* Navigation will occur before fetching is complete.
|
||||
Handle pending and error states directly within your component's template
|
||||
Handle 'pending' and 'error' states directly within your component's template
|
||||
*/
|
||||
const { pending, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))
|
||||
const { status, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))
|
||||
|
||||
watch(count, (newCount) => {
|
||||
// Because count might start out null, you won't have access
|
||||
@ -35,7 +35,7 @@ watch(count, (newCount) => {
|
||||
|
||||
<template>
|
||||
<div>
|
||||
{{ pending ? 'Loading' : count }}
|
||||
{{ status === 'pending' ? 'Loading' : count }}
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
@ -23,9 +23,9 @@ By default, [`useFetch`](/docs/api/composables/use-fetch) blocks navigation unti
|
||||
```vue [pages/index.vue]
|
||||
<script setup lang="ts">
|
||||
/* Navigation will occur before fetching is complete.
|
||||
Handle pending and error states directly within your component's template
|
||||
*/
|
||||
const { pending, data: posts } = await useLazyFetch('/api/posts')
|
||||
* Handle 'pending' and 'error' states directly within your component's template
|
||||
*/
|
||||
const { status, data: posts } = await useLazyFetch('/api/posts')
|
||||
watch(posts, (newPosts) => {
|
||||
// Because posts might start out null, you won't have access
|
||||
// to its contents immediately, but you can watch it.
|
||||
@ -33,7 +33,7 @@ watch(posts, (newPosts) => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="pending">
|
||||
<div v-if="status === 'pending'">
|
||||
Loading ...
|
||||
</div>
|
||||
<div v-else>
|
||||
|
||||
@ -8,7 +8,7 @@ links:
|
||||
size: xs
|
||||
---
|
||||
|
||||
`useNuxtApp` is a built-in composable that provides a way to access shared runtime context of Nuxt, also known as the [Nuxt context](/docs/guide/going-further/nuxt-app#the-nuxt-context), which is available on both client and server side. It helps you access the Vue app instance, runtime hooks, runtime config variables and internal states, such as `ssrContext` and `payload`.
|
||||
`useNuxtApp` is a built-in composable that provides a way to access shared runtime context of Nuxt, also known as the [Nuxt context](/docs/guide/going-further/nuxt-app#the-nuxt-context), which is available on both client and server side (but not within Nitro routes). It helps you access the Vue app instance, runtime hooks, runtime config variables and internal states, such as `ssrContext` and `payload`.
|
||||
|
||||
```vue [app.vue]
|
||||
<script setup lang="ts">
|
||||
@ -252,7 +252,7 @@ For a better description of what Vue actually does, see [unjs/unctx#2 (comment)]
|
||||
|
||||
This is where `runWithContext` can be used to restore context, similarly to how `<script setup>` works.
|
||||
|
||||
Nuxt 3 internally uses [unjs/unctx](https://github.com/unjs/unctx) to support composables similar to Vue for plugins and middleware. This enables composables like `navigateTo()` to work without directly passing `nuxtApp` to them - bringing the DX and performance benefits of Composition API to the whole Nuxt framework.
|
||||
Nuxt internally uses [unjs/unctx](https://github.com/unjs/unctx) to support composables similar to Vue for plugins and middleware. This enables composables like `navigateTo()` to work without directly passing `nuxtApp` to them - bringing the DX and performance benefits of Composition API to the whole Nuxt framework.
|
||||
|
||||
Nuxt composables have the same design as the Vue Composition API and therefore need a similar solution to magically do this transform. Check out [unjs/unctx#2](https://github.com/unjs/unctx/issues/2) (proposal), [unjs/unctx#4](https://github.com/unjs/unctx/pull/4) (transform implementation), and [nuxt/framework#3884](https://github.com/nuxt/framework/pull/3884) (Integration to Nuxt).
|
||||
|
||||
|
||||
@ -48,4 +48,4 @@ Apart from dynamic parameters and query parameters, `useRoute()` also provides t
|
||||
Browsers don't send [URL fragments](https://url.spec.whatwg.org/#concept-url-fragment) (for example `#foo`) when making requests. So using `route.fullPath` in your template can trigger hydration issues because this will include the fragment on client but not the server.
|
||||
::
|
||||
|
||||
:read-more{icon="i-simple-icons-vuedotjs" to="https://router.vuejs.org/api/interfaces/RouteLocationNormalizedLoaded.html"}
|
||||
:read-more{icon="i-simple-icons-vuedotjs" to="https://router.vuejs.org/api/#RouteLocationNormalizedLoaded"}
|
||||
|
||||
@ -12,7 +12,9 @@ You can use this function to create an error object with additional metadata. It
|
||||
|
||||
## Parameters
|
||||
|
||||
- `err`: `{ cause, data, message, name, stack, statusCode, statusMessage, fatal }`
|
||||
- `err`: `string | { cause, data, message, name, stack, statusCode, statusMessage, fatal }`
|
||||
|
||||
You can pass either a string or an object to the `createError` function. If you pass a string, it will be used as the error `message`, and the `statusCode` will default to `500`. If you pass an object, you can set multiple properties of the error, such as `statusCode`, `message`, and other error properties.
|
||||
|
||||
## In Vue App
|
||||
|
||||
@ -48,4 +50,6 @@ export default eventHandler(() => {
|
||||
})
|
||||
```
|
||||
|
||||
In API routes, using `createError` by passing an object with a short `statusMessage` is recommended because it can be accessed on the client side. Otherwise, a `message` passed to `createError` on an API route will not propagate to the client. Alternatively, you can use the `data` property to pass data back to the client. In any case, always consider avoiding to put dynamic user input to the message to avoid potential security issues.
|
||||
|
||||
:read-more{to="/docs/getting-started/error-handling"}
|
||||
|
||||
@ -28,7 +28,7 @@ interface RouteMiddleware {
|
||||
|
||||
A function that takes two Vue Router's route location objects as parameters: the next route `to` as the first, and the current route `from` as the second.
|
||||
|
||||
Learn more about available properties of `RouteLocationNormalized` in the **[Vue Router docs](https://router.vuejs.org/api/interfaces/RouteLocationNormalized.html)**.
|
||||
Learn more about available properties of `RouteLocationNormalized` in the **[Vue Router docs](https://router.vuejs.org/api/#RouteLocationNormalized)**.
|
||||
|
||||
## Examples
|
||||
|
||||
@ -53,7 +53,7 @@ Use [`useState`](/docs/api/composables/use-state) in combination with `navigateT
|
||||
```ts [middleware/auth.ts]
|
||||
export default defineNuxtRouteMiddleware((to, from) => {
|
||||
const auth = useState('auth')
|
||||
|
||||
|
||||
if (!auth.value.isAuthenticated) {
|
||||
return navigateTo('/login')
|
||||
}
|
||||
|
||||
@ -9,13 +9,17 @@ links:
|
||||
---
|
||||
|
||||
::note
|
||||
`navigateTo` is available on both server side and client side.
|
||||
`navigateTo` is available on both client and server side (but not within Nitro routes).
|
||||
::
|
||||
|
||||
## Usage
|
||||
|
||||
`navigateTo` is available on both server side and client side. It can be used within the [Nuxt context](/docs/guide/going-further/nuxt-app#the-nuxt-context), or directly, to perform page navigation.
|
||||
|
||||
::tip
|
||||
To send a redirect from a server endpoint, use [`sendRedirect`](https://h3.unjs.io/utils/response#sendredirectevent-location-code) instead.
|
||||
::
|
||||
|
||||
### Within a Vue Component
|
||||
|
||||
```vue
|
||||
@ -115,7 +119,7 @@ Make sure to always use `await` or `return` on result of `navigateTo` when calli
|
||||
|
||||
### `to`
|
||||
|
||||
**Type**: [`RouteLocationRaw`](https://router.vuejs.org/api/interfaces/RouteLocation.html) | `undefined` | `null`
|
||||
**Type**: [`RouteLocationRaw`](https://router.vuejs.org/api/interfaces/RouteLocationOptions.html#Interface-RouteLocationOptions) | `undefined` | `null`
|
||||
|
||||
**Default**: `'/'`
|
||||
|
||||
|
||||
@ -58,13 +58,13 @@ This example below refreshes only data where the key matches to `count`.
|
||||
|
||||
```vue [pages/some-page.vue]
|
||||
<script setup lang="ts">
|
||||
const { pending, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))
|
||||
const { status, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))
|
||||
const refresh = () => refreshNuxtData('count')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
{{ pending ? 'Loading' : count }}
|
||||
{{ status === 'pending' ? 'Loading' : count }}
|
||||
</div>
|
||||
<button @click="refresh">Refresh</button>
|
||||
</template>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
title: "nuxi upgrade"
|
||||
description: The upgrade command upgrades Nuxt 3 to the latest version.
|
||||
description: The upgrade command upgrades Nuxt to the latest version.
|
||||
links:
|
||||
- label: Source
|
||||
icon: i-simple-icons-github
|
||||
@ -12,7 +12,7 @@ links:
|
||||
npx nuxi upgrade [--force|-f]
|
||||
```
|
||||
|
||||
The `upgrade` command upgrades Nuxt 3 to the latest version.
|
||||
The `upgrade` command upgrades Nuxt to the latest version.
|
||||
|
||||
Option | Default | Description
|
||||
-------------------------|-----------------|------------------
|
||||
|
||||
@ -8,7 +8,7 @@ links:
|
||||
size: xs
|
||||
---
|
||||
|
||||
Nitro is an open source TypeScript framework to build ultra-fast web servers. Nuxt 3 (and, optionally, Nuxt Bridge) uses Nitro as its server engine. You can use `useNitro` to access the Nitro instance, `addServerHandler` to add a server handler, `addDevServerHandler` to add a server handler to be used only in development mode, `addServerPlugin` to add a plugin to extend Nitro's runtime behavior, and `addPrerenderRoutes` to add routes to be prerendered by Nitro.
|
||||
Nitro is an open source TypeScript framework to build ultra-fast web servers. Nuxt uses Nitro as its server engine. You can use `useNitro` to access the Nitro instance, `addServerHandler` to add a server handler, `addDevServerHandler` to add a server handler to be used only in development mode, `addServerPlugin` to add a plugin to extend Nitro's runtime behavior, and `addPrerenderRoutes` to add routes to be prerendered by Nitro.
|
||||
|
||||
## `addServerHandler`
|
||||
|
||||
|
||||
@ -211,7 +211,7 @@ Type of path to resolve. If set to `'file'`, the function will try to resolve a
|
||||
|
||||
Creates resolver relative to base path.
|
||||
|
||||
::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/resolving-paths-and-injecting-assets-to-the-app" target="_blank"}
|
||||
::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/resolving-paths-and-injecting-assets-to-the-app?friend=nuxt" target="_blank"}
|
||||
Watch Vue School video about createResolver.
|
||||
::
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@ These functions are designed for registering your own utils, composables and Vue
|
||||
|
||||
Nuxt auto-imports helper functions, composables and Vue APIs to use across your application without explicitly importing them. Based on the directory structure, every Nuxt application can also use auto-imports for its own composables and plugins. Composables or plugins can use these functions.
|
||||
|
||||
::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/expanding-nuxt-s-auto-imports" target="_blank"}
|
||||
::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/expanding-nuxt-s-auto-imports?friend=nuxt" target="_blank"}
|
||||
Watch Vue School video about Auto-imports Nuxt Kit utilities.
|
||||
::
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ links:
|
||||
|
||||
Components are the building blocks of your Nuxt application. They are reusable Vue instances that can be used to create a user interface. In Nuxt, components from the components directory are automatically imported by default. However, if you need to import components from an alternative directory or wish to selectively import them as needed, `@nuxt/kit` provides the `addComponentsDir` and `addComponent` methods. These utils allow you to customize the component configuration to better suit your needs.
|
||||
|
||||
::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/injecting-components-and-component-directories" target="_blank"}
|
||||
::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/injecting-components-and-component-directories?friend=nuxt" target="_blank"}
|
||||
Watch Vue School video about injecting components.
|
||||
::
|
||||
|
||||
|
||||
@ -10,9 +10,9 @@ links:
|
||||
|
||||
## `extendPages`
|
||||
|
||||
In Nuxt 3, routes are automatically generated based on the structure of the files in the `pages` directory. However, there may be scenarios where you'd want to customize these routes. For instance, you might need to add a route for a dynamic page not generated by Nuxt, remove an existing route, or modify the configuration of a route. For such customizations, Nuxt 3 offers the `extendPages` feature, which allows you to extend and alter the pages configuration.
|
||||
In Nuxt 3, routes are automatically generated based on the structure of the files in the `pages` directory. However, there may be scenarios where you'd want to customize these routes. For instance, you might need to add a route for a dynamic page not generated by Nuxt, remove an existing route, or modify the configuration of a route. For such customizations, Nuxt offers the `extendPages` feature, which allows you to extend and alter the pages configuration.
|
||||
|
||||
::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/extend-and-alter-nuxt-pages" target="_blank"}
|
||||
::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/extend-and-alter-nuxt-pages?friend=nuxt" target="_blank"}
|
||||
Watch Vue School video about extendPages.
|
||||
::
|
||||
|
||||
@ -71,7 +71,7 @@ Nuxt is powered by the [Nitro](https://nitro.unjs.io) server engine. With Nitro,
|
||||
You can read more about Nitro route rules in the [Nitro documentation](https://nitro.unjs.io/guide/routing#route-rules).
|
||||
::
|
||||
|
||||
::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/adding-route-rules-and-route-middlewares" target="_blank"}
|
||||
::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/adding-route-rules-and-route-middlewares?friend=nuxt" target="_blank"}
|
||||
Watch Vue School video about adding route rules and route middelwares.
|
||||
::
|
||||
|
||||
@ -192,7 +192,7 @@ Route middlewares can be also defined in plugins via [`addRouteMiddleware`](/doc
|
||||
Read more about route middlewares in the [Route middleware documentation](/docs/getting-started/routing#route-middleware).
|
||||
::
|
||||
|
||||
::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/adding-route-rules-and-route-middlewares" target="_blank"}
|
||||
::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/adding-route-rules-and-route-middlewares?friend=nuxt" target="_blank"}
|
||||
Watch Vue School video about adding route rules and route middelwares.
|
||||
::
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@ Layouts is used to be a wrapper around your pages. It can be used to wrap your p
|
||||
Register template as layout and add it to the layouts.
|
||||
|
||||
::note
|
||||
In Nuxt 2 `error` layout can also be registered using this utility. In Nuxt 3 `error` layout [replaced](/docs/getting-started/error-handling#rendering-an-error-page) with `error.vue` page in project root.
|
||||
In Nuxt 2 `error` layout can also be registered using this utility. In Nuxt 3+ `error` layout [replaced](/docs/getting-started/error-handling#rendering-an-error-page) with `error.vue` page in project root.
|
||||
::
|
||||
|
||||
### Type
|
||||
|
||||
@ -14,7 +14,7 @@ Plugins are self-contained code that usually add app-level functionality to Vue.
|
||||
|
||||
Registers a Nuxt plugin and to the plugins array.
|
||||
|
||||
::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/injecting-plugins" target="_blank"}
|
||||
::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/injecting-plugins?friend=nuxt" target="_blank"}
|
||||
Watch Vue School video about addPlugin.
|
||||
::
|
||||
|
||||
@ -114,7 +114,7 @@ export default defineNuxtPlugin((nuxtApp) => {
|
||||
|
||||
Adds a template and registers as a nuxt plugin. This is useful for plugins that need to generate code at build time.
|
||||
|
||||
::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/injecting-plugin-templates" target="_blank"}
|
||||
::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/injecting-plugin-templates?friend=nuxt" target="_blank"}
|
||||
Watch Vue School video about addPluginTemplate.
|
||||
::
|
||||
|
||||
|
||||
@ -30,7 +30,7 @@ Hook | Arguments | Environment | Description
|
||||
`page:loading:end` | - | Client | Called after `page:finish`
|
||||
`page:transition:finish`| `pageComponent?` | Client | After page transition [onAfterLeave](https://vuejs.org/guide/built-ins/transition.html#javascript-hooks) event.
|
||||
`dev:ssr-logs` | `logs` | Client | Called with an array of server-side logs that have been passed to the client (if `features.devLogs` is enabled).
|
||||
`page:view-transition:start` | `transition` | Client | Called after `document.startViewTransition` is called when [experimental viewTransition support is enabled](https://nuxt.com/docs/getting-started/transitions#view-transitions-api-experimental).
|
||||
`page:view-transition:start` | `transition` | Client | Called after `document.startViewTransition` is called when [experimental viewTransition support is enabled](/docs/getting-started/transitions#view-transitions-api-experimental).
|
||||
|
||||
## Nuxt Hooks (build time)
|
||||
|
||||
|
||||
@ -30,4 +30,4 @@ And finally, just ask the question! There's no need to [ask permission to ask a
|
||||
|
||||
Something isn't working the way that the docs say that it should. You're not sure if it's a bug. You've searched through the [open issues](https://github.com/nuxt/nuxt/issues) and [discussions](https://github.com/nuxt/nuxt/discussions) but you can't find anything. (if there is a closed issue, please create a new one)
|
||||
|
||||
We recommend taking a look at [how to report bugs](/docs/community/reporting-bugs). Nuxt 3 is still in active development, and every issue helps make it better.
|
||||
We recommend taking a look at [how to report bugs](/docs/community/reporting-bugs). Nuxt is still in active development, and every issue helps make it better.
|
||||
|
||||
@ -22,31 +22,25 @@ Search through the [open issues](https://github.com/nuxt/nuxt/issues) and [discu
|
||||
|
||||
It's important to be able to reproduce the bug reliably - in a minimal way and apart from the rest of your project. This narrows down what could be causing the issue and makes it possible for someone not only to find the cause, but also to test a potential solution.
|
||||
|
||||
Start with the Nuxt 3 or Nuxt Bridge sandbox and add the **minimum** amount of code necessary to reproduce the bug you're experiencing.
|
||||
Start with the Nuxt sandbox and add the **minimum** amount of code necessary to reproduce the bug you're experiencing.
|
||||
|
||||
::note
|
||||
If your issue concerns Vue 3 or Vite, please try to reproduce it first with the Vue 3 SSR starter.
|
||||
If your issue concerns Vue or Vite, please try to reproduce it first with the Vue SSR starter.
|
||||
::
|
||||
|
||||
**Nuxt 3**:
|
||||
**Nuxt**:
|
||||
|
||||
::card-group
|
||||
:card{title="Nuxt 3 on StackBlitz" icon="i-simple-icons-stackblitz" to="https://nuxt.new/s/v3" target="_blank"}
|
||||
:card{title="Nuxt 3 on CodeSandbox" icon="i-simple-icons-codesandbox" to="https://nuxt.new/c/v3" target="_blank"}
|
||||
:card{title="Nuxt on StackBlitz" icon="i-simple-icons-stackblitz" to="https://nuxt.new/s/v3" target="_blank"}
|
||||
:card{title="Nuxt on CodeSandbox" icon="i-simple-icons-codesandbox" to="https://nuxt.new/c/v3" target="_blank"}
|
||||
::
|
||||
|
||||
**Nuxt Bridge**:
|
||||
**Vue**:
|
||||
|
||||
::card-group
|
||||
:card{title="Nuxt Bridge on CodeSandbox" icon="i-simple-icons-codesandbox" to="https://codesandbox.io/s/github/nuxt/starter/v2-bridge-codesandbox" target="_blank"}
|
||||
::
|
||||
|
||||
**Vue 3**:
|
||||
|
||||
::card-group
|
||||
:card{title="Vue 3 SSR on StackBlitz" icon="i-simple-icons-stackblitz" to="https://stackblitz.com/github/nuxt-contrib/vue3-ssr-starter/tree/main?terminal=dev" target="_blank"}
|
||||
:card{title="Vue 3 SSR on CodeSandbox" icon="i-simple-icons-codesandbox" to="https://codesandbox.io/s/github/nuxt-contrib/vue3-ssr-starter/main" target="_blank"}
|
||||
:card{title="Vue 3 SSR Template on GitHub" icon="i-simple-icons-github" to="https://github.com/nuxt-contrib/vue3-ssr-starter/generate" target="_blank"}
|
||||
:card{title="Vue SSR on StackBlitz" icon="i-simple-icons-stackblitz" to="https://stackblitz.com/github/nuxt-contrib/vue3-ssr-starter/tree/main?terminal=dev" target="_blank"}
|
||||
:card{title="Vue SSR on CodeSandbox" icon="i-simple-icons-codesandbox" to="https://codesandbox.io/s/github/nuxt-contrib/vue3-ssr-starter/main" target="_blank"}
|
||||
:card{title="Vue SSR Template on GitHub" icon="i-simple-icons-github" to="https://github.com/nuxt-contrib/vue3-ssr-starter/generate" target="_blank"}
|
||||
::
|
||||
|
||||
Once you've reproduced the issue, remove as much code from your reproduction as you can (while still recreating the bug). The time spent making the reproduction as minimal as possible will make a huge difference to whoever sets out to fix the issue.
|
||||
|
||||
@ -32,10 +32,6 @@ We'll do our best to follow our [internal issue decision making flowchart](https
|
||||
|
||||
### 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! ❤️
|
||||
|
||||
#### Before You Start
|
||||
|
||||
@ -32,7 +32,7 @@ Milestone | Expected date | Notes
|
||||
-------------|---------------|------------------------------------------------------------------------|-----------------------
|
||||
SEO & PWA | 2024 | [nuxt/nuxt#18395](https://github.com/nuxt/nuxt/discussions/18395) | Migrating from [nuxt-community/pwa-module](https://github.com/nuxt-community/pwa-module) for built-in SEO utils and service worker support
|
||||
Assets | 2024 | [nuxt/nuxt#22012](https://github.com/nuxt/nuxt/discussions/22012) | Allow developers and modules to handle loading third-party assets.
|
||||
Translations | - | [nuxt/translations#4](https://github.com/nuxt/translations/discussions/4) ([request access](https://github.com/nuxt/nuxt/discussions/16054)) | A collaborative project for a stable translation process for Nuxt 3 docs. Currently pending for ideas and documentation tooling support (content v2 with remote sources).
|
||||
Translations | - | [nuxt/translations#4](https://github.com/nuxt/translations/discussions/4) ([request access](https://github.com/nuxt/nuxt/discussions/16054)) | A collaborative project for a stable translation process for Nuxt docs. Currently pending for ideas and documentation tooling support (content v2 with remote sources).
|
||||
|
||||
## Core Modules Roadmap
|
||||
|
||||
@ -42,7 +42,7 @@ Module | Status | Nuxt Support | Repos
|
||||
------------------------------------|---------------------|--------------|------------|-------------------
|
||||
[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)
|
||||
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 | Support is planned after session support.
|
||||
Hints | Planned | 3.x | `nuxt/hints` to be announced | Guidance and suggestions for enhancing development practices.
|
||||
|
||||
## Release Cycle
|
||||
@ -59,13 +59,13 @@ The current active version of [Nuxt](https://nuxt.com) is **v3** which is availa
|
||||
|
||||
Nuxt 2 is in maintenance mode and is available on npm with the `2x` tag. It will reach End of Life (EOL) on June 30, 2024.
|
||||
|
||||
Each active version has its own nightly releases which are generated automatically. For more about enabling the Nuxt 3 nightly release channel, see [the nightly release channel docs](/docs/guide/going-further/nightly-release-channel).
|
||||
Each active version has its own nightly releases which are generated automatically. For more about enabling the Nuxt nightly release channel, see [the nightly release channel docs](/docs/guide/going-further/nightly-release-channel).
|
||||
|
||||
Release | | Initial release | End Of Life | Docs
|
||||
----------------------------------------|---------------------------------------------------------------------------------------------------|-----------------|--------------|-------
|
||||
**4.x** (scheduled) | | 2024 Q2 | |
|
||||
**4.x** (scheduled) | | 2024 Q3 | |
|
||||
**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=" class="not-prose"></a> | 2018-09-21 | 2024-06-30 | [v2.nuxt.com](https://v2.nuxt.com/docs)
|
||||
**2.x** (unsupported) | <a href="https://www.npmjs.com/package/nuxt?activeTab=versions"><img alt="Nuxt 2.x version" src="https://flat.badgen.net/npm/v/nuxt/2x?label=" class="not-prose"></a> | 2018-09-21 | 2024-06-30 | [v2.nuxt.com](https://v2.nuxt.com/docs)
|
||||
**1.x** (unsupported) | <a href="https://www.npmjs.com/package/nuxt?activeTab=versions"><img alt="Nuxt 1.x version" src="https://flat.badgen.net/npm/v/nuxt/1x?label=" class="not-prose"></a> | 2018-01-08 | 2019-09-21 |
|
||||
|
||||
### Support Status
|
||||
|
||||
@ -44,7 +44,7 @@ Use of `defineNuxtRouteMiddleware` is not supported outside of the middleware di
|
||||
|
||||
## definePageMeta
|
||||
|
||||
You can also use [`definePageMeta`](https://nuxt.com/docs/api/utils/define-page-meta) in Nuxt Bridge.
|
||||
You can also use [`definePageMeta`](/docs/api/utils/define-page-meta) in Nuxt Bridge.
|
||||
|
||||
You can be enabled with the `macros.pageMeta` option in your configuration file
|
||||
|
||||
|
||||
@ -148,17 +148,6 @@ export default createConfigForNuxt({
|
||||
],
|
||||
},
|
||||
],
|
||||
'import/order': [
|
||||
'error',
|
||||
{
|
||||
pathGroups: [
|
||||
{
|
||||
group: 'external',
|
||||
pattern: '#vue-router',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
'jsdoc/check-tag-names': [
|
||||
'error',
|
||||
{
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# Nuxt 3 Examples
|
||||
# Nuxt Examples
|
||||
|
||||
- 👉 See examples in your browser at https://nuxt.com/docs/examples
|
||||
- 👉 View on GitHub at https://github.com/nuxt/examples
|
||||
|
||||
65
package.json
65
package.json
@ -39,63 +39,74 @@
|
||||
"@nuxt/ui-templates": "workspace:*",
|
||||
"@nuxt/vite-builder": "workspace:*",
|
||||
"@nuxt/webpack-builder": "workspace:*",
|
||||
"c12": "2.0.0-beta.1",
|
||||
"h3": "npm:h3-nightly@2.0.0-1718872656.6765a6e",
|
||||
"jiti": "2.0.0-beta.3",
|
||||
"magic-string": "^0.30.10",
|
||||
"nitro": "npm:nitro-nightly@3.0.0-beta-28665895.e727afda",
|
||||
"nuxt": "workspace:*",
|
||||
"rollup": "^4.18.0",
|
||||
"vite": "5.3.0",
|
||||
"vue": "3.4.27"
|
||||
"rollup": "^4.18.1",
|
||||
"typescript": "5.5.3",
|
||||
"unbuild": "3.0.0-rc.6",
|
||||
"vite": "5.3.4",
|
||||
"vue": "3.4.31"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "9.4.0",
|
||||
"@eslint/js": "9.7.0",
|
||||
"@nuxt/eslint-config": "0.3.13",
|
||||
"@nuxt/kit": "workspace:*",
|
||||
"@nuxt/test-utils": "3.13.1",
|
||||
"@nuxt/webpack-builder": "workspace:*",
|
||||
"@testing-library/vue": "8.1.0",
|
||||
"@types/eslint__js": "8.42.3",
|
||||
"@types/fs-extra": "11.0.4",
|
||||
"@types/node": "20.14.2",
|
||||
"@types/node": "20.14.10",
|
||||
"@types/semver": "7.5.8",
|
||||
"@unhead/schema": "1.9.13",
|
||||
"@vitejs/plugin-vue": "5.0.4",
|
||||
"@vitest/coverage-v8": "1.6.0",
|
||||
"@unhead/schema": "1.9.16",
|
||||
"@vitejs/plugin-vue": "5.0.5",
|
||||
"@vitest/coverage-v8": "2.0.3",
|
||||
"@vue/test-utils": "2.4.6",
|
||||
"autoprefixer": "10.4.19",
|
||||
"case-police": "0.6.1",
|
||||
"changelogen": "0.5.5",
|
||||
"consola": "3.2.3",
|
||||
"cssnano": "7.0.4",
|
||||
"devalue": "5.0.0",
|
||||
"eslint": "9.4.0",
|
||||
"eslint": "9.7.0",
|
||||
"eslint-plugin-no-only-tests": "3.1.0",
|
||||
"eslint-plugin-perfectionist": "2.11.0",
|
||||
"eslint-typegen": "0.2.4",
|
||||
"execa": "9.2.0",
|
||||
"fs-extra": "11.2.0",
|
||||
"globby": "14.0.1",
|
||||
"h3": "1.11.1",
|
||||
"happy-dom": "14.12.0",
|
||||
"jiti": "1.21.6",
|
||||
"execa": "9.3.0",
|
||||
"globby": "14.0.2",
|
||||
"h3": "npm:h3-nightly@2.0.0-1718872656.6765a6e",
|
||||
"happy-dom": "14.12.3",
|
||||
"jiti": "2.0.0-beta.3",
|
||||
"markdownlint-cli": "0.41.0",
|
||||
"nitropack": "2.9.6",
|
||||
"nitro": "npm:nitro-nightly@3.0.0-beta-28665895.e727afda",
|
||||
"nuxi": "3.12.0",
|
||||
"nuxt": "workspace:*",
|
||||
"nuxt-content-twoslash": "0.0.10",
|
||||
"nuxt-content-twoslash": "0.1.0",
|
||||
"ofetch": "1.3.4",
|
||||
"pathe": "1.1.2",
|
||||
"playwright-core": "1.44.1",
|
||||
"rimraf": "5.0.7",
|
||||
"playwright-core": "1.45.2",
|
||||
"rimraf": "6.0.1",
|
||||
"semver": "7.6.2",
|
||||
"std-env": "3.7.0",
|
||||
"typescript": "5.4.5",
|
||||
"typescript": "5.5.3",
|
||||
"ufo": "1.5.3",
|
||||
"vitest": "1.6.0",
|
||||
"vitest": "2.0.3",
|
||||
"vitest-environment-nuxt": "1.0.0",
|
||||
"vue": "3.4.27",
|
||||
"vue-router": "4.3.3",
|
||||
"vue-tsc": "2.0.21"
|
||||
"vue": "3.4.31",
|
||||
"vue-router": "4.4.0",
|
||||
"vue-tsc": "2.0.26"
|
||||
},
|
||||
"packageManager": "pnpm@9.3.0",
|
||||
"packageManager": "pnpm@9.5.0",
|
||||
"engines": {
|
||||
"node": "^16.10.0 || >=18.0.0"
|
||||
},
|
||||
"version": ""
|
||||
"version": "",
|
||||
"pnpm": {
|
||||
"patchedDependencies": {
|
||||
"ofetch@1.3.4": "patches/ofetch@1.3.4.patch"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,9 +8,9 @@ export default defineBuildConfig({
|
||||
externals: [
|
||||
'@nuxt/schema',
|
||||
'nitropack',
|
||||
'nitro',
|
||||
'webpack',
|
||||
'vite',
|
||||
'h3',
|
||||
],
|
||||
failOnWarn: false,
|
||||
})
|
||||
|
||||
7
packages/kit/index.d.ts
vendored
7
packages/kit/index.d.ts
vendored
@ -1,7 +0,0 @@
|
||||
/* eslint-disable no-var */
|
||||
declare global {
|
||||
var __NUXT_PREPATHS__: string[] | string | undefined
|
||||
var __NUXT_PATHS__: string[] | string | undefined
|
||||
}
|
||||
|
||||
export {}
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nuxt/kit",
|
||||
"version": "3.12.1",
|
||||
"version": "3.12.2",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/nuxt/nuxt.git",
|
||||
@ -27,36 +27,33 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@nuxt/schema": "workspace:*",
|
||||
"c12": "^1.11.1",
|
||||
"c12": "^2.0.0-beta.1",
|
||||
"consola": "^3.2.3",
|
||||
"defu": "^6.1.4",
|
||||
"destr": "^2.0.3",
|
||||
"globby": "^14.0.1",
|
||||
"globby": "^14.0.2",
|
||||
"hash-sum": "^2.0.0",
|
||||
"ignore": "^5.3.1",
|
||||
"jiti": "^1.21.6",
|
||||
"jiti": "^2.0.0-beta.3",
|
||||
"klona": "^2.0.6",
|
||||
"knitwork": "^1.1.0",
|
||||
"mlly": "^1.7.1",
|
||||
"pathe": "^1.1.2",
|
||||
"pkg-types": "^1.1.1",
|
||||
"pkg-types": "^1.1.3",
|
||||
"scule": "^1.3.0",
|
||||
"semver": "^7.6.2",
|
||||
"ufo": "^1.5.3",
|
||||
"unctx": "^2.3.1",
|
||||
"unimport": "^3.7.2",
|
||||
"unimport": "^3.8.0",
|
||||
"untyped": "^1.4.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/hash-sum": "1.0.2",
|
||||
"@types/lodash-es": "4.17.12",
|
||||
"@types/semver": "7.5.8",
|
||||
"lodash-es": "4.17.21",
|
||||
"nitropack": "2.9.6",
|
||||
"unbuild": "latest",
|
||||
"vite": "5.3.0",
|
||||
"vitest": "1.6.0",
|
||||
"webpack": "5.92.0"
|
||||
"nitro": "npm:nitro-nightly@3.0.0-beta-28665895.e727afda",
|
||||
"unbuild": "3.0.0-rc.6",
|
||||
"vite": "5.3.4",
|
||||
"vitest": "2.0.3",
|
||||
"webpack": "5.93.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^14.18.0 || >=16.10.0"
|
||||
|
||||
@ -29,23 +29,6 @@ export async function checkNuxtCompatibility (constraints: NuxtCompatibility, nu
|
||||
}
|
||||
}
|
||||
|
||||
// Bridge compatibility check
|
||||
if (isNuxt2(nuxt)) {
|
||||
const bridgeRequirement = constraints.bridge
|
||||
const hasBridge = !!(nuxt.options as any).bridge
|
||||
if (bridgeRequirement === true && !hasBridge) {
|
||||
issues.push({
|
||||
name: 'bridge',
|
||||
message: 'Nuxt bridge is required',
|
||||
})
|
||||
} else if (bridgeRequirement === false && hasBridge) {
|
||||
issues.push({
|
||||
name: 'bridge',
|
||||
message: 'Nuxt bridge is not supported',
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// Builder compatibility check
|
||||
if (constraints.builder && typeof nuxt.options.builder === 'string') {
|
||||
const currentBuilder = builderMap[nuxt.options.builder] || nuxt.options.builder
|
||||
@ -98,19 +81,26 @@ export async function hasNuxtCompatibility (constraints: NuxtCompatibility, nuxt
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if current nuxt instance is version 2 legacy
|
||||
* Check if current Nuxt instance is of specified major version
|
||||
*/
|
||||
export function isNuxt2 (nuxt: Nuxt = useNuxt()) {
|
||||
export function isNuxtMajorVersion (majorVersion: 2 | 3 | 4, nuxt: Nuxt = useNuxt()) {
|
||||
const version = getNuxtVersion(nuxt)
|
||||
return version[0] === '2' && version[1] === '.'
|
||||
|
||||
return version[0] === majorVersion.toString() && version[1] === '.'
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if current nuxt instance is version 3
|
||||
* @deprecated Use `isNuxtMajorVersion(2, nuxt)` instead. This may be removed in \@nuxt/kit v5 or a future major version.
|
||||
*/
|
||||
export function isNuxt2 (nuxt: Nuxt = useNuxt()) {
|
||||
return isNuxtMajorVersion(2, nuxt)
|
||||
}
|
||||
|
||||
/**
|
||||
* @deprecated Use `isNuxtMajorVersion(3, nuxt)` instead. This may be removed in \@nuxt/kit v5 or a future major version.
|
||||
*/
|
||||
export function isNuxt3 (nuxt: Nuxt = useNuxt()) {
|
||||
const version = getNuxtVersion(nuxt)
|
||||
return version[0] === '3' && version[1] === '.'
|
||||
return isNuxtMajorVersion(3, nuxt)
|
||||
}
|
||||
|
||||
/**
|
||||
@ -118,8 +108,8 @@ export function isNuxt3 (nuxt: Nuxt = useNuxt()) {
|
||||
*/
|
||||
export function getNuxtVersion (nuxt: Nuxt | any = useNuxt() /* TODO: LegacyNuxt */) {
|
||||
const rawVersion = nuxt?._version || nuxt?.version || nuxt?.constructor?.version
|
||||
if (!rawVersion) {
|
||||
throw new Error('Cannot determine nuxt version! Is current instance passed?')
|
||||
if (typeof rawVersion !== 'string') {
|
||||
throw new TypeError('Cannot determine nuxt version! Is current instance passed?')
|
||||
}
|
||||
return rawVersion.replace(/^v/g, '')
|
||||
}
|
||||
|
||||
@ -55,7 +55,7 @@ export async function addComponent (opts: AddComponentOptions) {
|
||||
nuxt.hook('components:extend', (components: Component[]) => {
|
||||
const existingComponentIndex = components.findIndex(c => (c.pascalName === component.pascalName || c.kebabName === component.kebabName) && c.mode === component.mode)
|
||||
if (existingComponentIndex !== -1) {
|
||||
const existingComponent = components[existingComponentIndex]
|
||||
const existingComponent = components[existingComponentIndex]!
|
||||
const existingPriority = existingComponent.priority ?? 0
|
||||
const newPriority = component.priority ?? 0
|
||||
|
||||
|
||||
@ -50,7 +50,7 @@ export function resolveIgnorePatterns (relativePath?: string): string[] {
|
||||
// Map ignore patterns based on if they start with * or !*
|
||||
return ignorePatterns.map((p) => {
|
||||
const [_, negation = '', pattern] = p.match(NEGATION_RE) || []
|
||||
if (pattern[0] === '*') {
|
||||
if (pattern && pattern[0] === '*') {
|
||||
return p
|
||||
}
|
||||
return negation + relative(relativePath, resolve(nuxt.options.rootDir, pattern || p))
|
||||
@ -73,7 +73,7 @@ export function resolveGroupSyntax (group: string): string[] {
|
||||
groups = groups.flatMap((group) => {
|
||||
const [head, ...tail] = group.split('{')
|
||||
if (tail.length) {
|
||||
const [body, ...rest] = tail.join('{').split('}')
|
||||
const [body = '', ...rest] = tail.join('{').split('}')
|
||||
return body.split(',').map(part => `${head}${part}${rest.join('')}`)
|
||||
}
|
||||
|
||||
|
||||
@ -1,38 +1,36 @@
|
||||
// Module
|
||||
export * from './module/define'
|
||||
export * from './module/install'
|
||||
export * from './module/compatibility'
|
||||
export { defineNuxtModule } from './module/define'
|
||||
export { getDirectory, installModule, loadNuxtModuleInstance, normalizeModuleTranspilePath } from './module/install'
|
||||
export { getNuxtModuleVersion, hasNuxtModule, hasNuxtModuleCompatibility } from './module/compatibility'
|
||||
|
||||
// Loader
|
||||
export * from './loader/config'
|
||||
export * from './loader/schema'
|
||||
export * from './loader/nuxt'
|
||||
export { loadNuxtConfig } from './loader/config'
|
||||
export type { LoadNuxtConfigOptions } from './loader/config'
|
||||
export { extendNuxtSchema } from './loader/schema'
|
||||
export { buildNuxt, loadNuxt } from './loader/nuxt'
|
||||
export type { LoadNuxtOptions } from './loader/nuxt'
|
||||
|
||||
// Utils
|
||||
export * from './imports'
|
||||
export { addImports, addImportsDir, addImportsSources } from './imports'
|
||||
export { updateRuntimeConfig, useRuntimeConfig } from './runtime-config'
|
||||
export * from './build'
|
||||
export * from './compatibility'
|
||||
export * from './components'
|
||||
export * from './context'
|
||||
export { addBuildPlugin, addVitePlugin, addWebpackPlugin, extendViteConfig, extendWebpackConfig } from './build'
|
||||
export type { ExtendConfigOptions, ExtendViteConfigOptions, ExtendWebpackConfigOptions } from './build'
|
||||
export { assertNuxtCompatibility, checkNuxtCompatibility, getNuxtVersion, hasNuxtCompatibility, isNuxtMajorVersion, normalizeSemanticVersion, isNuxt2, isNuxt3 } from './compatibility'
|
||||
export { addComponent, addComponentsDir } from './components'
|
||||
export type { AddComponentOptions } from './components'
|
||||
export { nuxtCtx, tryUseNuxt, useNuxt } from './context'
|
||||
export { isIgnored, resolveIgnorePatterns } from './ignore'
|
||||
export * from './layout'
|
||||
export * from './pages'
|
||||
export * from './plugin'
|
||||
export * from './resolve'
|
||||
export * from './nitro'
|
||||
export { addLayout } from './layout'
|
||||
export { addRouteMiddleware, extendPages, extendRouteRules } from './pages'
|
||||
export type { AddRouteMiddlewareOptions, ExtendRouteRulesOptions } from './pages'
|
||||
export { addPlugin, addPluginTemplate, normalizePlugin } from './plugin'
|
||||
export type { AddPluginOptions } from './plugin'
|
||||
export { createResolver, findPath, resolveAlias, resolveFiles, resolveNuxtModule, resolvePath } from './resolve'
|
||||
export type { ResolvePathOptions, Resolver } from './resolve'
|
||||
export { addServerHandler, addDevServerHandler, addServerPlugin, addPrerenderRoutes, useNitro, addServerImports, addServerImportsDir, addServerScanDir } from './nitro'
|
||||
export { addTemplate, addTypeTemplate, normalizeTemplate, updateTemplates, writeTypes } from './template'
|
||||
export * from './logger'
|
||||
export { logger, useLogger } from './logger'
|
||||
|
||||
// Internal Utils
|
||||
// TODO
|
||||
export {
|
||||
resolveModule,
|
||||
requireModule,
|
||||
importModule,
|
||||
tryImportModule,
|
||||
tryRequireModule,
|
||||
} from './internal/cjs'
|
||||
export type { ResolveModuleOptions, RequireModuleOptions } from './internal/cjs'
|
||||
export { tryResolveModule } from './internal/esm'
|
||||
export * from './internal/template'
|
||||
export { resolveModule, tryResolveModule, importModule, tryImportModule, requireModule, tryRequireModule } from './internal/esm'
|
||||
export type { ImportModuleOptions, ResolveModuleOptions } from './internal/esm'
|
||||
|
||||
@ -1,121 +0,0 @@
|
||||
import { pathToFileURL } from 'node:url'
|
||||
import { normalize } from 'pathe'
|
||||
import { interopDefault } from 'mlly'
|
||||
import jiti from 'jiti'
|
||||
|
||||
// TODO: use create-require for jest environment
|
||||
const _require = jiti(process.cwd(), { interopDefault: true, esmResolve: true })
|
||||
|
||||
/** @deprecated Do not use CJS utils */
|
||||
export interface ResolveModuleOptions {
|
||||
paths?: string | string[]
|
||||
}
|
||||
|
||||
/** @deprecated Do not use CJS utils */
|
||||
export interface RequireModuleOptions extends ResolveModuleOptions {
|
||||
// TODO: use create-require for jest environment
|
||||
// native?: boolean
|
||||
/** Clear the require cache (force fresh require) but only if not within `node_modules` */
|
||||
clearCache?: boolean
|
||||
|
||||
/** Automatically de-default the result of requiring the module. */
|
||||
interopDefault?: boolean
|
||||
}
|
||||
|
||||
/** @deprecated Do not use CJS utils */
|
||||
function isNodeModules (id: string) {
|
||||
// TODO: Follow symlinks
|
||||
return /[/\\]node_modules[/\\]/.test(id)
|
||||
}
|
||||
|
||||
/** @deprecated Do not use CJS utils */
|
||||
function clearRequireCache (id: string) {
|
||||
if (isNodeModules(id)) {
|
||||
return
|
||||
}
|
||||
|
||||
const entry = getRequireCacheItem(id)
|
||||
|
||||
if (!entry) {
|
||||
delete _require.cache[id]
|
||||
return
|
||||
}
|
||||
|
||||
if (entry.parent) {
|
||||
entry.parent.children = entry.parent.children.filter(e => e.id !== id)
|
||||
}
|
||||
|
||||
for (const child of entry.children) {
|
||||
clearRequireCache(child.id)
|
||||
}
|
||||
|
||||
delete _require.cache[id]
|
||||
}
|
||||
|
||||
/** @deprecated Do not use CJS utils */
|
||||
function getRequireCacheItem (id: string) {
|
||||
try {
|
||||
return _require.cache[id]
|
||||
} catch (e) {
|
||||
// ignore issues accessing require.cache
|
||||
}
|
||||
}
|
||||
|
||||
export function getModulePaths (paths?: string[] | string) {
|
||||
return ([] as Array<string | undefined>).concat(
|
||||
global.__NUXT_PREPATHS__,
|
||||
paths || [],
|
||||
process.cwd(),
|
||||
global.__NUXT_PATHS__,
|
||||
).filter(Boolean) as string[]
|
||||
}
|
||||
|
||||
/** @deprecated Do not use CJS utils */
|
||||
export function resolveModule (id: string, opts: ResolveModuleOptions = {}) {
|
||||
return normalize(_require.resolve(id, {
|
||||
paths: getModulePaths(opts.paths),
|
||||
}))
|
||||
}
|
||||
|
||||
/** @deprecated Do not use CJS utils */
|
||||
export function requireModule (id: string, opts: RequireModuleOptions = {}) {
|
||||
// Resolve id
|
||||
const resolvedPath = resolveModule(id, opts)
|
||||
|
||||
// Clear require cache if necessary
|
||||
if (opts.clearCache && !isNodeModules(id)) {
|
||||
clearRequireCache(resolvedPath)
|
||||
}
|
||||
|
||||
// Try to require
|
||||
const requiredModule = _require(resolvedPath)
|
||||
|
||||
return requiredModule
|
||||
}
|
||||
|
||||
/** @deprecated Do not use CJS utils */
|
||||
export function importModule (id: string, opts: RequireModuleOptions = {}) {
|
||||
const resolvedPath = resolveModule(id, opts)
|
||||
if (opts.interopDefault !== false) {
|
||||
return import(pathToFileURL(resolvedPath).href).then(interopDefault)
|
||||
}
|
||||
return import(pathToFileURL(resolvedPath).href)
|
||||
}
|
||||
|
||||
/** @deprecated Do not use CJS utils */
|
||||
export function tryImportModule (id: string, opts: RequireModuleOptions = {}) {
|
||||
try {
|
||||
return importModule(id, opts).catch(() => undefined)
|
||||
} catch {
|
||||
// intentionally empty as this is a `try-` function
|
||||
}
|
||||
}
|
||||
|
||||
/** @deprecated Do not use CJS utils */
|
||||
export function tryRequireModule (id: string, opts: RequireModuleOptions = {}) {
|
||||
try {
|
||||
return requireModule(id, opts)
|
||||
} catch {
|
||||
// intentionally empty as this is a `try-` function
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,10 @@
|
||||
import { pathToFileURL } from 'node:url'
|
||||
import { interopDefault, resolvePath } from 'mlly'
|
||||
import { interopDefault, resolvePath, resolvePathSync } from 'mlly'
|
||||
import { createJiti } from 'jiti'
|
||||
|
||||
export interface ResolveModuleOptions {
|
||||
paths?: string | string[]
|
||||
}
|
||||
|
||||
/**
|
||||
* Resolve a module from a given root path using an algorithm patterned on
|
||||
@ -15,14 +20,52 @@ export async function tryResolveModule (id: string, url: string | string[] = imp
|
||||
}
|
||||
}
|
||||
|
||||
export async function importModule (id: string, url: string | string[] = import.meta.url) {
|
||||
const resolvedPath = await resolvePath(id, { url })
|
||||
return import(pathToFileURL(resolvedPath).href).then(interopDefault)
|
||||
export function resolveModule (id: string, options?: ResolveModuleOptions) {
|
||||
return resolvePathSync(id, { url: options?.paths ?? [import.meta.url] })
|
||||
}
|
||||
|
||||
export function tryImportModule (id: string, url = import.meta.url) {
|
||||
export interface ImportModuleOptions extends ResolveModuleOptions {
|
||||
/** Automatically de-default the result of requiring the module. */
|
||||
interopDefault?: boolean
|
||||
}
|
||||
|
||||
export async function importModule<T = unknown> (id: string, opts?: ImportModuleOptions) {
|
||||
const resolvedPath = await resolveModule(id, opts)
|
||||
return import(pathToFileURL(resolvedPath).href).then(r => opts?.interopDefault !== false ? interopDefault(r) : r) as Promise<T>
|
||||
}
|
||||
|
||||
export function tryImportModule<T = unknown> (id: string, opts?: ImportModuleOptions) {
|
||||
try {
|
||||
return importModule(id, url).catch(() => undefined)
|
||||
return importModule<T>(id, opts).catch(() => undefined)
|
||||
} catch {
|
||||
// intentionally empty as this is a `try-` function
|
||||
}
|
||||
}
|
||||
|
||||
const warnings = new Set<string>()
|
||||
|
||||
/**
|
||||
* @deprecated Please use `importModule` instead.
|
||||
*/
|
||||
export function requireModule<T = unknown> (id: string, opts?: ImportModuleOptions) {
|
||||
if (!warnings.has(id)) {
|
||||
// TODO: add more information on stack trace
|
||||
console.warn('[@nuxt/kit] `requireModule` is deprecated. Please use `importModule` instead.')
|
||||
warnings.add(id)
|
||||
}
|
||||
const resolvedPath = resolveModule(id, opts)
|
||||
const jiti = createJiti(import.meta.url, {
|
||||
interopDefault: opts?.interopDefault !== false,
|
||||
})
|
||||
return jiti(pathToFileURL(resolvedPath).href) as T
|
||||
}
|
||||
|
||||
/**
|
||||
* @deprecated Please use `tryImportModule` instead.
|
||||
*/
|
||||
export function tryRequireModule<T = unknown> (id: string, opts?: ImportModuleOptions) {
|
||||
try {
|
||||
return requireModule<T>(id, opts)
|
||||
} catch {
|
||||
// intentionally empty as this is a `try-` function
|
||||
}
|
||||
|
||||
@ -1,46 +0,0 @@
|
||||
import { promises as fsp } from 'node:fs'
|
||||
// TODO: swap out when https://github.com/lodash/lodash/pull/5649 is merged
|
||||
import { template as lodashTemplate } from 'lodash-es'
|
||||
import { genDynamicImport, genImport, genSafeVariableName } from 'knitwork'
|
||||
|
||||
import type { NuxtTemplate } from '@nuxt/schema'
|
||||
import { logger } from '../logger'
|
||||
import { toArray } from '../utils'
|
||||
|
||||
/** @deprecated */
|
||||
// TODO: Remove support for compiling ejs templates in v4
|
||||
export async function compileTemplate<T> (template: NuxtTemplate<T>, ctx: any) {
|
||||
const data = { ...ctx, options: template.options }
|
||||
if (template.src) {
|
||||
try {
|
||||
const srcContents = await fsp.readFile(template.src, 'utf-8')
|
||||
return lodashTemplate(srcContents, {})(data)
|
||||
} catch (err) {
|
||||
logger.error('Error compiling template: ', template)
|
||||
throw err
|
||||
}
|
||||
}
|
||||
if (template.getContents) {
|
||||
return template.getContents(data)
|
||||
}
|
||||
throw new Error('Invalid template: ' + JSON.stringify(template))
|
||||
}
|
||||
|
||||
/** @deprecated */
|
||||
const serialize = (data: any) => JSON.stringify(data, null, 2).replace(/"\{(.+)\}"(?=,?$)/gm, r => JSON.parse(r).replace(/^\{(.*)\}$/, '$1'))
|
||||
|
||||
/** @deprecated */
|
||||
const importSources = (sources: string | string[], { lazy = false } = {}) => {
|
||||
return toArray(sources).map((src) => {
|
||||
if (lazy) {
|
||||
return `const ${genSafeVariableName(src)} = ${genDynamicImport(src, { comment: `webpackChunkName: ${JSON.stringify(src)}` })}`
|
||||
}
|
||||
return genImport(src, genSafeVariableName(src))
|
||||
}).join('\n')
|
||||
}
|
||||
|
||||
/** @deprecated */
|
||||
const importName = genSafeVariableName
|
||||
|
||||
/** @deprecated */
|
||||
export const templateUtils = { serialize, importName, importSources }
|
||||
@ -1,7 +1,6 @@
|
||||
import type { NuxtTemplate } from '@nuxt/schema'
|
||||
import { join, parse, relative } from 'pathe'
|
||||
import { kebabCase } from 'scule'
|
||||
import { isNuxt2 } from './compatibility'
|
||||
import { useNuxt } from './context'
|
||||
import { logger } from './logger'
|
||||
import { addTemplate } from './template'
|
||||
@ -11,25 +10,10 @@ export function addLayout (this: any, template: NuxtTemplate | string, name?: st
|
||||
const { filename, src } = addTemplate(template)
|
||||
const layoutName = kebabCase(name || parse(filename).name).replace(/["']/g, '')
|
||||
|
||||
if (isNuxt2(nuxt)) {
|
||||
// Nuxt 2 adds layouts in options
|
||||
const layout = (nuxt.options as any).layouts[layoutName]
|
||||
if (layout) {
|
||||
return logger.warn(
|
||||
`Not overriding \`${layoutName}\` (provided by \`${layout}\`) with \`${src || filename}\`.`,
|
||||
)
|
||||
}
|
||||
(nuxt.options as any).layouts[layoutName] = `./${filename}`
|
||||
if (name === 'error') {
|
||||
this.addErrorLayout(filename)
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
// Nuxt 3 adds layouts on app
|
||||
nuxt.hook('app:templates', (app) => {
|
||||
if (layoutName in app.layouts) {
|
||||
const relativePath = relative(nuxt.options.srcDir, app.layouts[layoutName].file)
|
||||
const relativePath = relative(nuxt.options.srcDir, app.layouts[layoutName]!.file)
|
||||
return logger.warn(
|
||||
`Not overriding \`${layoutName}\` (provided by \`~/${relativePath}\`) with \`${src || filename}\`.`,
|
||||
)
|
||||
|
||||
@ -11,8 +11,13 @@ export interface LoadNuxtConfigOptions extends Omit<LoadConfigOptions<NuxtConfig
|
||||
overrides?: Exclude<LoadConfigOptions<NuxtConfig>['overrides'], Promise<any> | Function>
|
||||
}
|
||||
|
||||
const layerSchemaKeys = ['future', 'srcDir', 'rootDir', 'dir']
|
||||
const layerSchema = Object.fromEntries(Object.entries(NuxtConfigSchema).filter(([key]) => layerSchemaKeys.includes(key)))
|
||||
const layerSchemaKeys = ['future', 'srcDir', 'rootDir', 'serverDir', 'dir']
|
||||
const layerSchema = Object.create(null)
|
||||
for (const key of layerSchemaKeys) {
|
||||
if (key in NuxtConfigSchema) {
|
||||
layerSchema[key] = NuxtConfigSchema[key]
|
||||
}
|
||||
}
|
||||
|
||||
export async function loadNuxtConfig (opts: LoadNuxtConfigOptions): Promise<NuxtOptions> {
|
||||
// Automatically detect and import layers from `~~/layers/` directory
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { pathToFileURL } from 'node:url'
|
||||
import { readPackageJSON, resolvePackageJSON } from 'pkg-types'
|
||||
import type { Nuxt } from '@nuxt/schema'
|
||||
import { resolve } from 'pathe'
|
||||
import { importModule, tryImportModule } from '../internal/esm'
|
||||
import type { LoadNuxtConfigOptions } from './config'
|
||||
|
||||
@ -10,76 +11,34 @@ export interface LoadNuxtOptions extends LoadNuxtConfigOptions {
|
||||
|
||||
/** Use lazy initialization of nuxt if set to false */
|
||||
ready?: boolean
|
||||
|
||||
/** @deprecated Use cwd option */
|
||||
rootDir?: LoadNuxtConfigOptions['cwd']
|
||||
|
||||
/** @deprecated use overrides option */
|
||||
config?: LoadNuxtConfigOptions['overrides']
|
||||
}
|
||||
|
||||
export async function loadNuxt (opts: LoadNuxtOptions): Promise<Nuxt> {
|
||||
// Backward compatibility
|
||||
opts.cwd = opts.cwd || opts.rootDir
|
||||
opts.overrides = opts.overrides || opts.config || {}
|
||||
opts.cwd = resolve(opts.cwd || (opts as any).rootDir /* backwards compat */ || '.')
|
||||
opts.overrides = opts.overrides || (opts as any).config as {} /* backwards compat */ || {}
|
||||
|
||||
// Apply dev as config override
|
||||
opts.overrides.dev = !!opts.dev
|
||||
|
||||
const nearestNuxtPkg = await Promise.all(['nuxt-nightly', 'nuxt3', 'nuxt', 'nuxt-edge']
|
||||
const nearestNuxtPkg = await Promise.all(['nuxt-nightly', 'nuxt']
|
||||
.map(pkg => resolvePackageJSON(pkg, { url: opts.cwd }).catch(() => null)))
|
||||
.then(r => (r.filter(Boolean) as string[]).sort((a, b) => b.length - a.length)[0])
|
||||
if (!nearestNuxtPkg) {
|
||||
throw new Error(`Cannot find any nuxt version from ${opts.cwd}`)
|
||||
}
|
||||
const pkg = await readPackageJSON(nearestNuxtPkg)
|
||||
const majorVersion = pkg.version ? Number.parseInt(pkg.version.split('.')[0]) : ''
|
||||
|
||||
const rootDir = pathToFileURL(opts.cwd || process.cwd()).href
|
||||
const rootDir = pathToFileURL(opts.cwd!).href
|
||||
|
||||
// Nuxt 3
|
||||
if (majorVersion === 3) {
|
||||
const { loadNuxt } = await importModule((pkg as any)._name || pkg.name, rootDir)
|
||||
const nuxt = await loadNuxt(opts)
|
||||
return nuxt
|
||||
}
|
||||
|
||||
// Nuxt 2
|
||||
const { loadNuxt } = await tryImportModule('nuxt-edge', rootDir) || await importModule('nuxt', rootDir)
|
||||
const nuxt = await loadNuxt({
|
||||
rootDir: opts.cwd,
|
||||
for: opts.dev ? 'dev' : 'build',
|
||||
configOverrides: opts.overrides,
|
||||
ready: opts.ready,
|
||||
envConfig: opts.dotenv, // TODO: Backward format conversion
|
||||
})
|
||||
|
||||
// Mock new hookable methods
|
||||
nuxt.removeHook ||= nuxt.clearHook.bind(nuxt)
|
||||
nuxt.removeAllHooks ||= nuxt.clearHooks.bind(nuxt)
|
||||
nuxt.hookOnce ||= (name: string, fn: (...args: any[]) => any, ...hookArgs: any[]) => {
|
||||
const unsub = nuxt.hook(name, (...args: any[]) => {
|
||||
unsub()
|
||||
return fn(...args)
|
||||
}, ...hookArgs)
|
||||
return unsub
|
||||
}
|
||||
// https://github.com/nuxt/nuxt/tree/main/packages/kit/src/module/define.ts#L111-L113
|
||||
nuxt.hooks ||= nuxt
|
||||
|
||||
return nuxt as Nuxt
|
||||
const { loadNuxt } = await importModule<typeof import('nuxt')>((pkg as any)._name || pkg.name, { paths: rootDir })
|
||||
const nuxt = await loadNuxt(opts)
|
||||
return nuxt
|
||||
}
|
||||
|
||||
export async function buildNuxt (nuxt: Nuxt): Promise<any> {
|
||||
const rootDir = pathToFileURL(nuxt.options.rootDir).href
|
||||
|
||||
// Nuxt 3
|
||||
if (nuxt.options._majorVersion === 3) {
|
||||
const { build } = await tryImportModule('nuxt-nightly', rootDir) || await tryImportModule('nuxt3', rootDir) || await importModule('nuxt', rootDir)
|
||||
return build(nuxt)
|
||||
}
|
||||
|
||||
// Nuxt 2
|
||||
const { build } = await tryImportModule('nuxt-edge', rootDir) || await importModule('nuxt', rootDir)
|
||||
const { build } = await tryImportModule<typeof import('nuxt')>('nuxt-nightly', { paths: rootDir }) || await importModule<typeof import('nuxt')>('nuxt', { paths: rootDir })
|
||||
return build(nuxt)
|
||||
}
|
||||
|
||||
@ -51,11 +51,10 @@ export async function getNuxtModuleVersion (module: string | NuxtModule, nuxt: N
|
||||
// need a name from here
|
||||
if (!moduleMeta.name) { return false }
|
||||
// maybe the version got attached within the installed module instance?
|
||||
const version = nuxt.options._installedModules
|
||||
// @ts-expect-error _installedModules is not typed
|
||||
.filter(m => m.meta.name === moduleMeta.name).map(m => m.meta.version)?.[0]
|
||||
if (version) {
|
||||
return version
|
||||
for (const m of nuxt.options._installedModules) {
|
||||
if (m.meta.name === moduleMeta.name && m.meta.version) {
|
||||
return m.meta.version
|
||||
}
|
||||
}
|
||||
// it's possible that the module will be installed, it just hasn't been done yet, preemptively load the instance
|
||||
if (hasNuxtModule(moduleMeta.name)) {
|
||||
|
||||
@ -1,40 +1,85 @@
|
||||
import { promises as fsp } from 'node:fs'
|
||||
import { performance } from 'node:perf_hooks'
|
||||
import { defu } from 'defu'
|
||||
import { applyDefaults } from 'untyped'
|
||||
import { dirname } from 'pathe'
|
||||
import type { ModuleDefinition, ModuleOptions, ModuleSetupReturn, Nuxt, NuxtModule, NuxtOptions, ResolvedNuxtTemplate } from '@nuxt/schema'
|
||||
import type { ModuleDefinition, ModuleOptions, ModuleSetupInstallResult, ModuleSetupReturn, Nuxt, NuxtModule, NuxtOptions, ResolvedModuleOptions } from '@nuxt/schema'
|
||||
import { logger } from '../logger'
|
||||
import { nuxtCtx, tryUseNuxt, useNuxt } from '../context'
|
||||
import { checkNuxtCompatibility, isNuxt2 } from '../compatibility'
|
||||
import { compileTemplate, templateUtils } from '../internal/template'
|
||||
import { tryUseNuxt, useNuxt } from '../context'
|
||||
import { checkNuxtCompatibility } from '../compatibility'
|
||||
|
||||
/**
|
||||
* Define a Nuxt module, automatically merging defaults with user provided options, installing
|
||||
* any hooks that are provided, and calling an optional setup function for full control.
|
||||
*/
|
||||
export function defineNuxtModule<OptionsT extends ModuleOptions> (definition: ModuleDefinition<OptionsT> | NuxtModule<OptionsT>): NuxtModule<OptionsT> {
|
||||
if (typeof definition === 'function') { return defineNuxtModule({ setup: definition }) }
|
||||
export function defineNuxtModule<TOptions extends ModuleOptions> (
|
||||
definition: ModuleDefinition<TOptions, Partial<TOptions>, false> | NuxtModule<TOptions, Partial<TOptions>, false>
|
||||
): NuxtModule<TOptions, TOptions, false>
|
||||
|
||||
// Normalize definition and meta
|
||||
const module: ModuleDefinition<OptionsT> & Required<Pick<ModuleDefinition<OptionsT>, 'meta'>> = defu(definition, { meta: {} })
|
||||
if (module.meta.configKey === undefined) {
|
||||
module.meta.configKey = module.meta.name
|
||||
export function defineNuxtModule<TOptions extends ModuleOptions> (): {
|
||||
with: <TOptionsDefaults extends Partial<TOptions>> (
|
||||
definition: ModuleDefinition<TOptions, TOptionsDefaults, true> | NuxtModule<TOptions, TOptionsDefaults, true>
|
||||
) => NuxtModule<TOptions, TOptionsDefaults, true>
|
||||
}
|
||||
|
||||
export function defineNuxtModule<TOptions extends ModuleOptions> (
|
||||
definition?: ModuleDefinition<TOptions, Partial<TOptions>, false> | NuxtModule<TOptions, Partial<TOptions>, false>,
|
||||
) {
|
||||
if (definition) {
|
||||
return _defineNuxtModule(definition)
|
||||
}
|
||||
|
||||
return {
|
||||
with: <TOptionsDefaults extends Partial<TOptions>>(
|
||||
definition: ModuleDefinition<TOptions, TOptionsDefaults, true> | NuxtModule<TOptions, TOptionsDefaults, true>,
|
||||
) => _defineNuxtModule(definition),
|
||||
}
|
||||
}
|
||||
|
||||
function _defineNuxtModule<
|
||||
TOptions extends ModuleOptions,
|
||||
TOptionsDefaults extends Partial<TOptions>,
|
||||
TWith extends boolean,
|
||||
> (
|
||||
definition: ModuleDefinition<TOptions, TOptionsDefaults, TWith> | NuxtModule<TOptions, TOptionsDefaults, TWith>,
|
||||
): NuxtModule<TOptions, TOptionsDefaults, TWith> {
|
||||
if (typeof definition === 'function') {
|
||||
return _defineNuxtModule<TOptions, TOptionsDefaults, TWith>({ setup: definition })
|
||||
}
|
||||
|
||||
// Normalize definition and meta
|
||||
const module: ModuleDefinition<TOptions, TOptionsDefaults, TWith> & Required<Pick<ModuleDefinition<TOptions, TOptionsDefaults, TWith>, 'meta'>> = defu(definition, { meta: {} })
|
||||
|
||||
module.meta.configKey ||= module.meta.name
|
||||
|
||||
// Resolves module options from inline options, [configKey] in nuxt.config, defaults and schema
|
||||
async function getOptions (inlineOptions?: OptionsT, nuxt: Nuxt = useNuxt()) {
|
||||
const configKey = module.meta.configKey || module.meta.name!
|
||||
const _defaults = module.defaults instanceof Function ? module.defaults(nuxt) : module.defaults
|
||||
let _options = defu(inlineOptions, nuxt.options[configKey as keyof NuxtOptions], _defaults) as OptionsT
|
||||
async function getOptions (
|
||||
inlineOptions?: Partial<TOptions>,
|
||||
nuxt: Nuxt = useNuxt(),
|
||||
): Promise<
|
||||
TWith extends true
|
||||
? ResolvedModuleOptions<TOptions, TOptionsDefaults>
|
||||
: TOptions
|
||||
> {
|
||||
const nuxtConfigOptionsKey = module.meta.configKey || module.meta.name
|
||||
|
||||
const nuxtConfigOptions: Partial<TOptions> = nuxtConfigOptionsKey && nuxtConfigOptionsKey in nuxt.options ? nuxt.options[<keyof NuxtOptions> nuxtConfigOptionsKey] : {}
|
||||
|
||||
const optionsDefaults: TOptionsDefaults =
|
||||
module.defaults instanceof Function
|
||||
? module.defaults(nuxt)
|
||||
: module.defaults ?? <TOptionsDefaults> {}
|
||||
|
||||
let options = defu(inlineOptions, nuxtConfigOptions, optionsDefaults)
|
||||
|
||||
if (module.schema) {
|
||||
_options = await applyDefaults(module.schema, _options) as OptionsT
|
||||
options = await applyDefaults(module.schema, options) as any
|
||||
}
|
||||
return Promise.resolve(_options)
|
||||
|
||||
// @ts-expect-error ignore type mismatch when calling `defineNuxtModule` without `.with()`
|
||||
return Promise.resolve(options)
|
||||
}
|
||||
|
||||
// Module format is always a simple function
|
||||
async function normalizedModule (this: any, inlineOptions: OptionsT, nuxt: Nuxt) {
|
||||
async function normalizedModule (this: any, inlineOptions: Partial<TOptions>, nuxt: Nuxt): Promise<ModuleSetupReturn> {
|
||||
if (!nuxt) {
|
||||
nuxt = tryUseNuxt() || this.nuxt /* invoked by nuxt 2 */
|
||||
}
|
||||
@ -58,9 +103,6 @@ export function defineNuxtModule<OptionsT extends ModuleOptions> (definition: Mo
|
||||
}
|
||||
}
|
||||
|
||||
// Prepare
|
||||
nuxt2Shims(nuxt)
|
||||
|
||||
// Resolve module and options
|
||||
const _options = await getOptions(inlineOptions, nuxt)
|
||||
|
||||
@ -70,11 +112,10 @@ export function defineNuxtModule<OptionsT extends ModuleOptions> (definition: Mo
|
||||
}
|
||||
|
||||
// Call setup
|
||||
const key = `nuxt:module:${uniqueKey || (Math.round(Math.random() * 10000))}`
|
||||
const mark = performance.mark(key)
|
||||
const start = performance.now()
|
||||
const res = await module.setup?.call(null as any, _options, nuxt) ?? {}
|
||||
const perf = performance.measure(key, mark.name)
|
||||
const setupTime = Math.round((perf.duration * 100)) / 100
|
||||
const perf = performance.now() - start
|
||||
const setupTime = Math.round((perf * 100)) / 100
|
||||
|
||||
// Measure setup time
|
||||
if (setupTime > 5000 && uniqueKey !== '@nuxt/telemetry') {
|
||||
@ -87,7 +128,7 @@ export function defineNuxtModule<OptionsT extends ModuleOptions> (definition: Mo
|
||||
if (res === false) { return false }
|
||||
|
||||
// Return module install result
|
||||
return defu(res, <ModuleSetupReturn> {
|
||||
return defu(res, <ModuleSetupInstallResult> {
|
||||
timings: {
|
||||
setup: setupTime,
|
||||
},
|
||||
@ -98,55 +139,5 @@ export function defineNuxtModule<OptionsT extends ModuleOptions> (definition: Mo
|
||||
normalizedModule.getMeta = () => Promise.resolve(module.meta)
|
||||
normalizedModule.getOptions = getOptions
|
||||
|
||||
return normalizedModule as NuxtModule<OptionsT>
|
||||
}
|
||||
|
||||
// -- Nuxt 2 compatibility shims --
|
||||
const NUXT2_SHIMS_KEY = '__nuxt2_shims_key__'
|
||||
function nuxt2Shims (nuxt: Nuxt) {
|
||||
// Avoid duplicate install and only apply to Nuxt2
|
||||
if (!isNuxt2(nuxt) || nuxt[NUXT2_SHIMS_KEY as keyof Nuxt]) { return }
|
||||
nuxt[NUXT2_SHIMS_KEY as keyof Nuxt] = true
|
||||
|
||||
// Allow using nuxt.hooks
|
||||
// @ts-expect-error Nuxt 2 extends hookable
|
||||
nuxt.hooks = nuxt
|
||||
|
||||
// Allow using useNuxt()
|
||||
if (!nuxtCtx.tryUse()) {
|
||||
nuxtCtx.set(nuxt)
|
||||
nuxt.hook('close', () => nuxtCtx.unset())
|
||||
}
|
||||
|
||||
// Support virtual templates with getContents() by writing them to .nuxt directory
|
||||
let virtualTemplates: ResolvedNuxtTemplate[]
|
||||
// @ts-expect-error Nuxt 2 hook
|
||||
nuxt.hook('builder:prepared', (_builder, buildOptions) => {
|
||||
virtualTemplates = buildOptions.templates.filter((t: any) => t.getContents)
|
||||
for (const template of virtualTemplates) {
|
||||
buildOptions.templates.splice(buildOptions.templates.indexOf(template), 1)
|
||||
}
|
||||
})
|
||||
// @ts-expect-error Nuxt 2 hook
|
||||
nuxt.hook('build:templates', async (templates) => {
|
||||
const context = {
|
||||
nuxt,
|
||||
utils: templateUtils,
|
||||
app: {
|
||||
dir: nuxt.options.srcDir,
|
||||
extensions: nuxt.options.extensions,
|
||||
plugins: nuxt.options.plugins,
|
||||
templates: [
|
||||
...templates.templatesFiles,
|
||||
...virtualTemplates,
|
||||
],
|
||||
templateVars: templates.templateVars,
|
||||
},
|
||||
}
|
||||
for await (const template of virtualTemplates) {
|
||||
const contents = await compileTemplate({ ...template, src: '' }, context)
|
||||
await fsp.mkdir(dirname(template.dst), { recursive: true })
|
||||
await fsp.writeFile(template.dst, contents)
|
||||
}
|
||||
})
|
||||
return <NuxtModule<TOptions, TOptionsDefaults, TWith>> normalizedModule
|
||||
}
|
||||
|
||||
@ -2,11 +2,9 @@ import { existsSync, promises as fsp, lstatSync } from 'node:fs'
|
||||
import type { ModuleMeta, Nuxt, NuxtConfig, NuxtModule } from '@nuxt/schema'
|
||||
import { dirname, isAbsolute, join, resolve } from 'pathe'
|
||||
import { defu } from 'defu'
|
||||
import { isNuxt2 } from '../compatibility'
|
||||
import { createJiti } from 'jiti'
|
||||
import { useNuxt } from '../context'
|
||||
import { requireModule } from '../internal/cjs'
|
||||
import { importModule } from '../internal/esm'
|
||||
import { resolveAlias, resolvePath } from '../resolve'
|
||||
import { resolveAlias } from '../resolve'
|
||||
import { logger } from '../logger'
|
||||
|
||||
const NODE_MODULES_RE = /[/\\]node_modules[/\\]/
|
||||
@ -27,12 +25,7 @@ export async function installModule<
|
||||
}
|
||||
|
||||
// Call module
|
||||
const res = (
|
||||
isNuxt2()
|
||||
// @ts-expect-error Nuxt 2 `moduleContainer` is not typed
|
||||
? await nuxtModule.call(nuxt.moduleContainer, inlineOptions, nuxt)
|
||||
: await nuxtModule(inlineOptions, nuxt)
|
||||
) ?? {}
|
||||
const res = await nuxtModule(inlineOptions || {}, nuxt) ?? {}
|
||||
if (res === false /* setup aborted */) {
|
||||
return
|
||||
}
|
||||
@ -78,15 +71,20 @@ export const normalizeModuleTranspilePath = (p: string) => {
|
||||
|
||||
export async function loadNuxtModuleInstance (nuxtModule: string | NuxtModule, nuxt: Nuxt = useNuxt()) {
|
||||
let buildTimeModuleMeta: ModuleMeta = {}
|
||||
|
||||
const jiti = createJiti(nuxt.options.rootDir, {
|
||||
interopDefault: true,
|
||||
alias: nuxt.options.alias,
|
||||
})
|
||||
|
||||
// Import if input is string
|
||||
if (typeof nuxtModule === 'string') {
|
||||
const paths = [join(nuxtModule, 'nuxt'), join(nuxtModule, 'module'), nuxtModule]
|
||||
let error: unknown
|
||||
for (const path of paths) {
|
||||
try {
|
||||
const src = await resolvePath(path, { fallbackToOriginal: true })
|
||||
// Prefer ESM resolution if possible
|
||||
nuxtModule = await importModule(src, nuxt.options.modulesDir).catch(() => null) ?? requireModule(src, { paths: nuxt.options.modulesDir })
|
||||
const src = jiti.esmResolve(path)
|
||||
nuxtModule = await jiti.import(src) as NuxtModule
|
||||
|
||||
// nuxt-module-builder generates a module.json with metadata including the version
|
||||
const moduleMetadataPath = join(dirname(src), 'module.json')
|
||||
@ -100,7 +98,7 @@ export async function loadNuxtModuleInstance (nuxtModule: string | NuxtModule, n
|
||||
}
|
||||
}
|
||||
if (typeof nuxtModule !== 'function' && error) {
|
||||
logger.error(`Error while requiring module \`${nuxtModule}\`: ${error}`)
|
||||
logger.error(`Error while importing module \`${nuxtModule}\`: ${error}`)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import type { Nitro, NitroDevEventHandler, NitroEventHandler } from 'nitropack'
|
||||
import type { Nitro, NitroDevEventHandler, NitroEventHandler } from 'nitro/types'
|
||||
import type { Import } from 'unimport'
|
||||
import { normalize } from 'pathe'
|
||||
import { useNuxt } from './context'
|
||||
@ -12,7 +12,7 @@ function normalizeHandlerMethod (handler: NitroEventHandler) {
|
||||
// retrieve method from handler file name
|
||||
const [, method = undefined] = handler.handler.match(/\.(get|head|patch|post|put|delete|connect|options|trace)(\.\w+)*$/) || []
|
||||
return {
|
||||
method,
|
||||
method: method as 'get' | 'head' | 'patch' | 'post' | 'put' | 'delete' | 'connect' | 'options' | 'trace' | undefined,
|
||||
...handler,
|
||||
handler: normalize(handler.handler),
|
||||
}
|
||||
|
||||
@ -1,19 +1,12 @@
|
||||
import type { NuxtHooks, NuxtMiddleware } from '@nuxt/schema'
|
||||
import type { NitroRouteConfig } from 'nitropack'
|
||||
import type { NitroRouteConfig } from 'nitro/types'
|
||||
import { defu } from 'defu'
|
||||
import { useNuxt } from './context'
|
||||
import { isNuxt2 } from './compatibility'
|
||||
import { logger } from './logger'
|
||||
import { toArray } from './utils'
|
||||
|
||||
export function extendPages (cb: NuxtHooks['pages:extend']) {
|
||||
const nuxt = useNuxt()
|
||||
if (isNuxt2(nuxt)) {
|
||||
// @ts-expect-error TODO: Nuxt 2 hook
|
||||
nuxt.hook('build:extendRoutes', cb)
|
||||
} else {
|
||||
nuxt.hook('pages:extend', cb)
|
||||
}
|
||||
useNuxt().hook('pages:extend', cb)
|
||||
}
|
||||
|
||||
export interface ExtendRouteRulesOptions {
|
||||
@ -51,11 +44,12 @@ export function addRouteMiddleware (input: NuxtMiddleware | NuxtMiddleware[], op
|
||||
for (const middleware of middlewares) {
|
||||
const find = app.middleware.findIndex(item => item.name === middleware.name)
|
||||
if (find >= 0) {
|
||||
if (app.middleware[find].path === middleware.path) { continue }
|
||||
const foundPath = app.middleware[find]!.path
|
||||
if (foundPath === middleware.path) { continue }
|
||||
if (options.override === true) {
|
||||
app.middleware[find] = { ...middleware }
|
||||
} else {
|
||||
logger.warn(`'${middleware.name}' middleware already exists at '${app.middleware[find].path}'. You can set \`override: true\` to replace it.`)
|
||||
logger.warn(`'${middleware.name}' middleware already exists at '${foundPath}'. You can set \`override: true\` to replace it.`)
|
||||
}
|
||||
} else {
|
||||
app.middleware.push({ ...middleware })
|
||||
|
||||
@ -43,8 +43,11 @@ export function normalizePlugin (plugin: NuxtPlugin | string): NuxtPlugin {
|
||||
* Note: By default plugin is prepended to the plugins array. You can use second argument to append (push) instead.
|
||||
* @example
|
||||
* ```js
|
||||
* import { createResolver } from '@nuxt/kit'
|
||||
* const resolver = createResolver(import.meta.url)
|
||||
*
|
||||
* addPlugin({
|
||||
* src: path.resolve(__dirname, 'templates/foo.js'),
|
||||
* src: resolver.resolve('templates/foo.js'),
|
||||
* filename: 'foo.server.js' // [optional] only include in server bundle
|
||||
* })
|
||||
* ```
|
||||
|
||||
@ -168,13 +168,13 @@ export function createResolver (base: string | URL): Resolver {
|
||||
}
|
||||
}
|
||||
|
||||
export async function resolveNuxtModule (base: string, paths: string[]) {
|
||||
const resolved = []
|
||||
export async function resolveNuxtModule (base: string, paths: string[]): Promise<string[]> {
|
||||
const resolved: string[] = []
|
||||
const resolver = createResolver(base)
|
||||
|
||||
for (const path of paths) {
|
||||
if (path.startsWith(base)) {
|
||||
resolved.push(path.split('/index.ts')[0])
|
||||
resolved.push(path.split('/index.ts')[0]!)
|
||||
} else {
|
||||
const resolvedPath = await resolver.resolvePath(path)
|
||||
resolved.push(resolvedPath.slice(0, resolvedPath.lastIndexOf(path) + path.length))
|
||||
@ -209,6 +209,12 @@ function existsInVFS (path: string, nuxt = tryUseNuxt()) {
|
||||
}
|
||||
|
||||
export async function resolveFiles (path: string, pattern: string | string[], opts: { followSymbolicLinks?: boolean } = {}) {
|
||||
const files = await globby(pattern, { cwd: path, followSymbolicLinks: opts.followSymbolicLinks ?? true })
|
||||
return files.map(p => resolve(path, p)).filter(p => !isIgnored(p)).sort()
|
||||
const files: string[] = []
|
||||
for (const file of await globby(pattern, { cwd: path, followSymbolicLinks: opts.followSymbolicLinks ?? true })) {
|
||||
const p = resolve(path, file)
|
||||
if (!isIgnored(p)) {
|
||||
files.push(p)
|
||||
}
|
||||
}
|
||||
return files.sort()
|
||||
}
|
||||
|
||||
@ -11,7 +11,6 @@ import { readPackageJSON } from 'pkg-types'
|
||||
import { tryResolveModule } from './internal/esm'
|
||||
import { getDirectory } from './module/install'
|
||||
import { tryUseNuxt, useNuxt } from './context'
|
||||
import { getModulePaths } from './internal/cjs'
|
||||
import { resolveNuxtModule } from './resolve'
|
||||
|
||||
/**
|
||||
@ -113,18 +112,55 @@ export async function updateTemplates (options?: { filter?: (template: ResolvedN
|
||||
}
|
||||
|
||||
export async function _generateTypes (nuxt: Nuxt) {
|
||||
const nodeModulePaths = getModulePaths(nuxt.options.modulesDir)
|
||||
|
||||
const rootDirWithSlash = withTrailingSlash(nuxt.options.rootDir)
|
||||
const relativeRootDir = relativeWithDot(nuxt.options.buildDir, nuxt.options.rootDir)
|
||||
|
||||
const modulePaths = await resolveNuxtModule(rootDirWithSlash,
|
||||
nuxt.options._installedModules
|
||||
.filter(m => m.entryPath)
|
||||
.map(m => getDirectory(m.entryPath!)),
|
||||
)
|
||||
const include = new Set<string>([
|
||||
'./nuxt.d.ts',
|
||||
join(relativeRootDir, '.config/nuxt.*'),
|
||||
join(relativeRootDir, '**/*'),
|
||||
])
|
||||
|
||||
if (nuxt.options.srcDir !== nuxt.options.rootDir) {
|
||||
include.add(join(relative(nuxt.options.buildDir, nuxt.options.srcDir), '**/*'))
|
||||
}
|
||||
|
||||
if (nuxt.options.typescript.includeWorkspace && nuxt.options.workspaceDir !== nuxt.options.rootDir) {
|
||||
include.add(join(relative(nuxt.options.buildDir, nuxt.options.workspaceDir), '**/*'))
|
||||
}
|
||||
|
||||
for (const layer of nuxt.options._layers) {
|
||||
const srcOrCwd = layer.config.srcDir ?? layer.cwd
|
||||
if (!srcOrCwd.startsWith(rootDirWithSlash) || srcOrCwd.includes('node_modules')) {
|
||||
include.add(join(relative(nuxt.options.buildDir, srcOrCwd), '**/*'))
|
||||
}
|
||||
}
|
||||
|
||||
const exclude = new Set<string>([
|
||||
// nitro generate output: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/core/nitro.ts#L186
|
||||
relativeWithDot(nuxt.options.buildDir, resolve(nuxt.options.rootDir, 'dist')),
|
||||
])
|
||||
|
||||
for (const dir of nuxt.options.modulesDir) {
|
||||
exclude.add(relativeWithDot(nuxt.options.buildDir, dir))
|
||||
}
|
||||
|
||||
const moduleEntryPaths: string[] = []
|
||||
for (const m of nuxt.options._installedModules) {
|
||||
if (m.entryPath) {
|
||||
moduleEntryPaths.push(getDirectory(m.entryPath))
|
||||
}
|
||||
}
|
||||
|
||||
const modulePaths = await resolveNuxtModule(rootDirWithSlash, moduleEntryPaths)
|
||||
|
||||
for (const path of modulePaths) {
|
||||
const relative = relativeWithDot(nuxt.options.buildDir, path)
|
||||
include.add(join(relative, 'runtime'))
|
||||
exclude.add(join(relative, 'runtime/server'))
|
||||
}
|
||||
|
||||
const isV4 = nuxt.options.future?.compatibilityVersion === 4
|
||||
|
||||
const hasTypescriptVersionWithModulePreserve = await readPackageJSON('typescript', { url: nuxt.options.modulesDir })
|
||||
.then(r => r?.version && gte(r.version, '5.4.0'))
|
||||
.catch(() => isV4)
|
||||
@ -154,6 +190,7 @@ export async function _generateTypes (nuxt: Nuxt) {
|
||||
'ESNext',
|
||||
'dom',
|
||||
'dom.iterable',
|
||||
'webworker',
|
||||
],
|
||||
/* JSX support for Vue */
|
||||
jsx: 'preserve',
|
||||
@ -168,23 +205,8 @@ export async function _generateTypes (nuxt: Nuxt) {
|
||||
noImplicitThis: true, /* enabled with `strict` */
|
||||
allowSyntheticDefaultImports: true,
|
||||
},
|
||||
include: [
|
||||
'./nuxt.d.ts',
|
||||
join(relativeWithDot(nuxt.options.buildDir, nuxt.options.rootDir), '.config/nuxt.*'),
|
||||
join(relativeWithDot(nuxt.options.buildDir, nuxt.options.rootDir), '**/*'),
|
||||
...nuxt.options.srcDir !== nuxt.options.rootDir ? [join(relative(nuxt.options.buildDir, nuxt.options.srcDir), '**/*')] : [],
|
||||
...nuxt.options._layers.map(layer => layer.config.srcDir ?? layer.cwd)
|
||||
.filter(srcOrCwd => !srcOrCwd.startsWith(rootDirWithSlash) || srcOrCwd.includes('node_modules'))
|
||||
.map(srcOrCwd => join(relative(nuxt.options.buildDir, srcOrCwd), '**/*')),
|
||||
...nuxt.options.typescript.includeWorkspace && nuxt.options.workspaceDir !== nuxt.options.rootDir ? [join(relative(nuxt.options.buildDir, nuxt.options.workspaceDir), '**/*')] : [],
|
||||
...modulePaths.map(m => join(relativeWithDot(nuxt.options.buildDir, m), 'runtime')),
|
||||
],
|
||||
exclude: [
|
||||
...nuxt.options.modulesDir.map(m => relativeWithDot(nuxt.options.buildDir, m)),
|
||||
...modulePaths.map(m => join(relativeWithDot(nuxt.options.buildDir, m), 'runtime/server')),
|
||||
// nitro generate output: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/core/nitro.ts#L186
|
||||
relativeWithDot(nuxt.options.buildDir, resolve(nuxt.options.rootDir, 'dist')),
|
||||
],
|
||||
include: [...include],
|
||||
exclude: [...exclude],
|
||||
} satisfies TSConfig)
|
||||
|
||||
const aliases: Record<string, string> = {
|
||||
@ -195,7 +217,9 @@ export async function _generateTypes (nuxt: Nuxt) {
|
||||
// Exclude bridge alias types to support Volar
|
||||
const excludedAlias = [/^@vue\/.*$/]
|
||||
|
||||
const basePath = tsConfig.compilerOptions!.baseUrl ? resolve(nuxt.options.buildDir, tsConfig.compilerOptions!.baseUrl) : nuxt.options.buildDir
|
||||
const basePath = tsConfig.compilerOptions!.baseUrl
|
||||
? resolve(nuxt.options.buildDir, tsConfig.compilerOptions!.baseUrl)
|
||||
: nuxt.options.buildDir
|
||||
|
||||
tsConfig.compilerOptions = tsConfig.compilerOptions || {}
|
||||
tsConfig.include = tsConfig.include || []
|
||||
@ -204,10 +228,10 @@ export async function _generateTypes (nuxt: Nuxt) {
|
||||
if (excludedAlias.some(re => re.test(alias))) {
|
||||
continue
|
||||
}
|
||||
let absolutePath = resolve(basePath, aliases[alias])
|
||||
let absolutePath = resolve(basePath, aliases[alias]!)
|
||||
let stats = await fsp.stat(absolutePath).catch(() => null /* file does not exist */)
|
||||
if (!stats) {
|
||||
const resolvedModule = await tryResolveModule(aliases[alias], nuxt.options.modulesDir)
|
||||
const resolvedModule = await tryResolveModule(aliases[alias]!, nuxt.options.modulesDir)
|
||||
if (resolvedModule) {
|
||||
absolutePath = resolvedModule
|
||||
stats = await fsp.stat(resolvedModule).catch(() => null)
|
||||
@ -227,7 +251,7 @@ export async function _generateTypes (nuxt: Nuxt) {
|
||||
// remove extension
|
||||
? relativePath.replace(/\b\.\w+$/g, '')
|
||||
// non-existent file probably shouldn't be resolved
|
||||
: aliases[alias]
|
||||
: aliases[alias]!
|
||||
|
||||
tsConfig.compilerOptions.paths[alias] = [path]
|
||||
|
||||
@ -237,12 +261,13 @@ export async function _generateTypes (nuxt: Nuxt) {
|
||||
}
|
||||
}
|
||||
|
||||
const references: TSReference[] = await Promise.all([
|
||||
...nuxt.options.modules,
|
||||
...nuxt.options._modules,
|
||||
]
|
||||
.filter(f => typeof f === 'string')
|
||||
.map(async id => ({ types: (await readPackageJSON(id, { url: nodeModulePaths }).catch(() => null))?.name || id })))
|
||||
const references: TSReference[] = []
|
||||
await Promise.all([...nuxt.options.modules, ...nuxt.options._modules].map(async (id) => {
|
||||
if (typeof id !== 'string') { return }
|
||||
|
||||
const pkg = await readPackageJSON(id, { url: nuxt.options.modulesDir }).catch(() => null)
|
||||
references.push(({ types: pkg?.name || id }))
|
||||
}))
|
||||
|
||||
const declarations: string[] = []
|
||||
|
||||
@ -302,10 +327,14 @@ export async function writeTypes (nuxt: Nuxt) {
|
||||
}
|
||||
|
||||
function renderAttrs (obj: Record<string, string>) {
|
||||
return Object.entries(obj).map(e => renderAttr(e[0], e[1])).join(' ')
|
||||
const attrs: string[] = []
|
||||
for (const key in obj) {
|
||||
attrs.push(renderAttr(key, obj[key]))
|
||||
}
|
||||
return attrs.join(' ')
|
||||
}
|
||||
|
||||
function renderAttr (key: string, value: string) {
|
||||
function renderAttr (key: string, value?: string) {
|
||||
return value ? `${key}="${value}"` : ''
|
||||
}
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user