Zengtudor
/
Nuxt
mirror of https://github.com/nuxt/nuxt.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into fix/avoid-show-error-before-middleware

This commit is contained in:
Ryota Watanabe 2024-09-20 23:31:06 +09:00 committed by GitHub
parent 0ef7f8d46f e644960794
commit 0e4d0d5d63
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
146 changed files with 715 additions and 768 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/autofix-docs.yml vendored
View File

@ -19,7 +19,7 @@ jobs:
steps: steps:
- uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7 - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
- run: corepack enable - run: corepack enable
- uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3 - uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
with: with:
node-version: 20 node-version: 20
cache: "pnpm" cache: "pnpm"

2
.github/workflows/autofix.yml vendored
View File

@ -15,7 +15,7 @@ jobs:
steps: steps:
- uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7 - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
- run: corepack enable - run: corepack enable
- uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3 - uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
with: with:
node-version: 20 node-version: 20
cache: "pnpm" cache: "pnpm"

2
.github/workflows/benchmark.yml vendored
View File

@ -31,7 +31,7 @@ jobs:
steps: steps:
- uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7 - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
- run: corepack enable - run: corepack enable
- uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3 - uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
with: with:
node-version: 20 node-version: 20
cache: "pnpm" cache: "pnpm"

2
.github/workflows/changelog.yml vendored
View File

@ -26,7 +26,7 @@ jobs:
with: with:
fetch-depth: 0 fetch-depth: 0
- run: corepack enable - run: corepack enable
- uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3 - uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
with: with:
node-version: 20 node-version: 20
cache: "pnpm" cache: "pnpm"

18
.github/workflows/ci.yml vendored
View File

@ -39,7 +39,7 @@ jobs:
steps: steps:
- uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7 - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
- run: corepack enable - run: corepack enable
- uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3 - uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
with: with:
node-version: 20 node-version: 20
cache: "pnpm" cache: "pnpm"
@ -75,7 +75,7 @@ jobs:
- uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7 - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
- name: Initialize CodeQL - name: Initialize CodeQL
uses: github/codeql-action/init@8214744c546c1e5c8f03dde8fab3a7353211988d # v3.26.7 uses: github/codeql-action/init@294a9d92911152fe08befb9ec03e240add280cb3 # v3.26.8
with: with:
config: | config: |
paths: paths:
@ -91,7 +91,7 @@ jobs:
queries: +security-and-quality queries: +security-and-quality
- name: Perform CodeQL Analysis - name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@8214744c546c1e5c8f03dde8fab3a7353211988d # v3.26.7 uses: github/codeql-action/analyze@294a9d92911152fe08befb9ec03e240add280cb3 # v3.26.8
with: with:
category: "/language:javascript-typescript" category: "/language:javascript-typescript"
@ -109,7 +109,7 @@ jobs:
steps: steps:
- uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7 - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
- run: corepack enable - run: corepack enable
- uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3 - uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
with: with:
node-version: 20 node-version: 20
cache: "pnpm" cache: "pnpm"
@ -140,7 +140,7 @@ jobs:
steps: steps:
- uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7 - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
- run: corepack enable - run: corepack enable
- uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3 - uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
with: with:
node-version: 20 node-version: 20
cache: "pnpm" cache: "pnpm"
@ -164,7 +164,7 @@ jobs:
steps: steps:
- uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7 - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
- run: corepack enable - run: corepack enable
- uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3 - uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
with: with:
node-version: 20 node-version: 20
cache: "pnpm" cache: "pnpm"
@ -215,7 +215,7 @@ jobs:
steps: steps:
- uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7 - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
- run: corepack enable - run: corepack enable
- uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3 - uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
with: with:
node-version: ${{ matrix.node }} node-version: ${{ matrix.node }}
cache: "pnpm" cache: "pnpm"
@ -270,7 +270,7 @@ jobs:
with: with:
fetch-depth: 0 fetch-depth: 0
- run: corepack enable - run: corepack enable
- uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3 - uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
with: with:
node-version: 20 node-version: 20
cache: "pnpm" cache: "pnpm"
@ -311,7 +311,7 @@ jobs:
with: with:
fetch-depth: 0 fetch-depth: 0
- run: corepack enable - run: corepack enable
- uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3 - uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
with: with:
node-version: 20 node-version: 20
cache: "pnpm" cache: "pnpm"

2
.github/workflows/docs-check-links.yml vendored
View File

@ -29,7 +29,7 @@ jobs:
- uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7 - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
- name: Lychee link checker - name: Lychee link checker
uses: lycheeverse/lychee-action@64c64dfc7ad14257a2001ef393627d334a516a1f # for v1.8.0 uses: lycheeverse/lychee-action@5047c2a4052946424ce139fe111135f6d7c0fe0b # for v1.8.0
with: with:
# arguments with file types to check # arguments with file types to check
args: >- args: >-

2
.github/workflows/docs.yml vendored
View File

@ -23,7 +23,7 @@ jobs:
steps: steps:
- uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7 - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
- run: corepack enable - run: corepack enable
- uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3 - uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
with: with:
node-version: 20 node-version: 20
cache: "pnpm" cache: "pnpm"

2
.github/workflows/lint-sherif.yml vendored
View File

@ -25,7 +25,7 @@ jobs:
steps: steps:
- uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7 - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
- run: corepack enable - run: corepack enable
- uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3 - uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
with: with:
node-version: 20 node-version: 20
cache: "pnpm" cache: "pnpm"

2
.github/workflows/release-pr.yml vendored
View File

@ -54,7 +54,7 @@ jobs:
fetch-depth: 1 fetch-depth: 1
- run: corepack enable - run: corepack enable
- uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3 - uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
with: with:
node-version: 20 node-version: 20
cache: "pnpm" cache: "pnpm"

2
.github/workflows/release.yml vendored
View File

@ -23,7 +23,7 @@ jobs:
with: with:
fetch-depth: 0 fetch-depth: 0
- run: corepack enable - run: corepack enable
- uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3 - uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
with: with:
node-version: 20 node-version: 20
registry-url: "https://registry.npmjs.org/" registry-url: "https://registry.npmjs.org/"

2
.github/workflows/scorecards.yml vendored
View File

@ -68,7 +68,7 @@ jobs:
# Upload the results to GitHub's code scanning dashboard. # Upload the results to GitHub's code scanning dashboard.
- name: "Upload to code-scanning" - name: "Upload to code-scanning"
uses: github/codeql-action/upload-sarif@8214744c546c1e5c8f03dde8fab3a7353211988d # v3.26.7 uses: github/codeql-action/upload-sarif@294a9d92911152fe08befb9ec03e240add280cb3 # v3.26.8
if: github.repository == 'nuxt/nuxt' && success() if: github.repository == 'nuxt/nuxt' && success()
with: with:
sarif_file: results.sarif sarif_file: results.sarif

2
docs/1.getting-started/1.introduction.md
View File

@ -2,7 +2,7 @@
title: Introduction title: Introduction
description: Nuxt's goal is to make web development intuitive and performant with a great Developer Experience in mind. description: Nuxt's goal is to make web development intuitive and performant with a great Developer Experience in mind.
navigation: navigation:
icon: i-ph-info-duotone icon: i-ph-info
--- ---
Nuxt is a free and [open-source framework](https://github.com/nuxt/nuxt) with an intuitive and extendable way to create type-safe, performant and production-grade full-stack web applications and websites with [Vue.js](https://vuejs.org). Nuxt is a free and [open-source framework](https://github.com/nuxt/nuxt) with an intuitive and extendable way to create type-safe, performant and production-grade full-stack web applications and websites with [Vue.js](https://vuejs.org).

2
docs/1.getting-started/10.deployment.md
View File

@ -1,7 +1,7 @@
--- ---
title: 'Deployment' title: 'Deployment'
description: Learn how to deploy your Nuxt application to any hosting provider. description: Learn how to deploy your Nuxt application to any hosting provider.
navigation.icon: i-ph-cloud-duotone navigation.icon: i-ph-cloud
--- ---
A Nuxt application can be deployed on a Node.js server, pre-rendered for static hosting, or deployed to serverless or edge (CDN) environments. A Nuxt application can be deployed on a Node.js server, pre-rendered for static hosting, or deployed to serverless or edge (CDN) environments.

4
docs/1.getting-started/11.testing.md
View File

@ -1,7 +1,7 @@
--- ---
title: Testing title: Testing
description: How to test your Nuxt application. description: How to test your Nuxt application.
navigation.icon: i-ph-check-circle-duotone navigation.icon: i-ph-check-circle
--- ---
::tip ::tip
@ -10,7 +10,7 @@ If you are a module author, you can find more specific information in the [Modul
Nuxt offers first-class support for end-to-end and unit testing of your Nuxt application via `@nuxt/test-utils`, a library of test utilities and configuration that currently powers the [tests we use on Nuxt itself](https://github.com/nuxt/nuxt/tree/main/test) and tests throughout the module ecosystem. Nuxt offers first-class support for end-to-end and unit testing of your Nuxt application via `@nuxt/test-utils`, a library of test utilities and configuration that currently powers the [tests we use on Nuxt itself](https://github.com/nuxt/nuxt/tree/main/test) and tests throughout the module ecosystem.
::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=yGzwk9xi9gU" target="_blank"} ::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=yGzwk9xi9gU" target="_blank"}
Watch a video from Alexander Lichter about getting started with the `@nuxt/test-utils`. Watch a video from Alexander Lichter about getting started with the `@nuxt/test-utils`.
:: ::

4
docs/1.getting-started/12.upgrade.md
View File

@ -1,7 +1,7 @@
--- ---
title: Upgrade Guide title: Upgrade Guide
description: 'Learn how to upgrade to the latest Nuxt version.' description: 'Learn how to upgrade to the latest Nuxt version.'
navigation.icon: i-ph-arrow-circle-up-duotone navigation.icon: i-ph-arrow-circle-up
--- ---
@ -47,7 +47,7 @@ Nuxt 4 is planned to be released **on or before June 14** (though obviously this
Until then, it is possible to test many of Nuxt 4's breaking changes from Nuxt version 3.12+. 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"} ::tip{icon="i-ph-video" 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. Watch a video from Alexander Lichter showing how to opt in to Nuxt 4's breaking changes already.
:: ::

4
docs/1.getting-started/2.installation.md
View File

@ -1,7 +1,7 @@
--- ---
title: 'Installation' title: 'Installation'
description: 'Get started with Nuxt quickly with our online starters or start locally with your terminal.' description: 'Get started with Nuxt quickly with our online starters or start locally with your terminal.'
navigation.icon: i-ph-play-duotone navigation.icon: i-ph-play
--- ---
## Play Online ## Play Online
@ -94,7 +94,7 @@ bun run dev -o
``` ```
:: ::
::tip{icon="i-ph-check-circle-duotone"} ::tip{icon="i-ph-check-circle"}
Well done! A browser window should automatically open for <http://localhost:3000>. Well done! A browser window should automatically open for <http://localhost:3000>.
:: ::

4
docs/1.getting-started/3.configuration.md
View File

@ -1,7 +1,7 @@
--- ---
title: Configuration title: Configuration
description: Nuxt is configured with sensible defaults to make you productive. description: Nuxt is configured with sensible defaults to make you productive.
navigation.icon: i-ph-gear-duotone navigation.icon: i-ph-gear
--- ---
@ -46,7 +46,7 @@ export default defineNuxtConfig({
}) })
``` ```
::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=DFZI2iVCrNc" target="_blank"} ::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=DFZI2iVCrNc" target="_blank"}
Watch a video from Alexander Lichter about the env-aware `nuxt.config.ts`. Watch a video from Alexander Lichter about the env-aware `nuxt.config.ts`.
:: ::

2
docs/1.getting-started/3.views.md
View File

@ -1,7 +1,7 @@
--- ---
title: 'Views' title: 'Views'
description: 'Nuxt provides several component layers to implement the user interface of your application.' description: 'Nuxt provides several component layers to implement the user interface of your application.'
navigation.icon: i-ph-layout-duotone navigation.icon: i-ph-layout
--- ---
## `app.vue` ## `app.vue`

2
docs/1.getting-started/4.assets.md
View File

@ -1,7 +1,7 @@
--- ---
title: 'Assets' title: 'Assets'
description: 'Nuxt offers two options for your assets.' description: 'Nuxt offers two options for your assets.'
navigation.icon: i-ph-image-duotone navigation.icon: i-ph-image
--- ---
Nuxt uses two directories to handle assets like stylesheets, fonts or images. Nuxt uses two directories to handle assets like stylesheets, fonts or images.

2
docs/1.getting-started/4.styling.md
View File

@ -1,7 +1,7 @@
--- ---
title: 'Styling' title: 'Styling'
description: 'Learn how to style your Nuxt application.' description: 'Learn how to style your Nuxt application.'
navigation.icon: i-ph-palette-duotone navigation.icon: i-ph-palette
--- ---
Nuxt is highly flexible when it comes to styling. Write your own styles, or reference local and external stylesheets. Nuxt is highly flexible when it comes to styling. Write your own styles, or reference local and external stylesheets.

2
docs/1.getting-started/5.routing.md
View File

@ -1,7 +1,7 @@
--- ---
title: 'Routing' title: 'Routing'
description: Nuxt file-system routing creates a route for every file in the pages/ directory. description: Nuxt file-system routing creates a route for every file in the pages/ directory.
navigation.icon: i-ph-signpost-duotone navigation.icon: i-ph-signpost
--- ---
One core feature of Nuxt is the file system router. Every Vue file inside the [`pages/`](/docs/guide/directory-structure/pages) directory creates a corresponding URL (or route) that displays the contents of the file. By using dynamic imports for each page, Nuxt leverages code-splitting to ship the minimum amount of JavaScript for the requested route. One core feature of Nuxt is the file system router. Every Vue file inside the [`pages/`](/docs/guide/directory-structure/pages) directory creates a corresponding URL (or route) that displays the contents of the file. By using dynamic imports for each page, Nuxt leverages code-splitting to ship the minimum amount of JavaScript for the requested route.

2
docs/1.getting-started/5.seo-meta.md
View File

@ -1,7 +1,7 @@
--- ---
title: SEO and Meta title: SEO and Meta
description: Improve your Nuxt app's SEO with powerful head config, composables and components. description: Improve your Nuxt app's SEO with powerful head config, composables and components.
navigation.icon: i-ph-file-search-duotone navigation.icon: i-ph-file-search
--- ---
## Defaults ## Defaults

2
docs/1.getting-started/5.transitions.md
View File

@ -1,7 +1,7 @@
--- ---
title: 'Transitions' title: 'Transitions'
description: Apply transitions between pages and layouts with Vue or native browser View Transitions. description: Apply transitions between pages and layouts with Vue or native browser View Transitions.
navigation.icon: i-ph-exclude-square-duotone navigation.icon: i-ph-exclude-square
--- ---
::note ::note

6
docs/1.getting-started/6.data-fetching.md
View File

@ -1,7 +1,7 @@
--- ---
title: 'Data fetching' title: 'Data fetching'
description: Nuxt provides composables to handle data fetching within your application. description: Nuxt provides composables to handle data fetching within your application.
navigation.icon: i-ph-plugs-connected-duotone navigation.icon: i-ph-plugs-connected
--- ---
Nuxt comes with two composables and a built-in library to perform data-fetching in browser or server environments: `useFetch`, [`useAsyncData`](/docs/api/composables/use-async-data) and `$fetch`. Nuxt comes with two composables and a built-in library to perform data-fetching in browser or server environments: `useFetch`, [`useAsyncData`](/docs/api/composables/use-async-data) and `$fetch`.
@ -54,7 +54,7 @@ const { data: count } = await useFetch('/api/count')
This composable is a wrapper around the [`useAsyncData`](/docs/api/composables/use-async-data) composable and `$fetch` utility. This composable is a wrapper around the [`useAsyncData`](/docs/api/composables/use-async-data) composable and `$fetch` utility.
::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=njsGVmcWviY" target="_blank"} ::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=njsGVmcWviY" target="_blank"}
Watch the video from Alexander Lichter to avoid using `useFetch` the wrong way! Watch the video from Alexander Lichter to avoid using `useFetch` the wrong way!
:: ::
@ -97,7 +97,7 @@ The `useAsyncData` composable is responsible for wrapping async logic and return
It's developer experience sugar for the most common use case. It's developer experience sugar for the most common use case.
:: ::
::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=0X-aOpSGabA" target="_blank"} ::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=0X-aOpSGabA" target="_blank"}
Watch a video from Alexander Lichter to dig deeper into the difference between `useFetch` and `useAsyncData`. Watch a video from Alexander Lichter to dig deeper into the difference between `useFetch` and `useAsyncData`.
:: ::

8
docs/1.getting-started/7.state-management.md
View File

@ -1,14 +1,14 @@
--- ---
title: 'State Management' title: 'State Management'
description: Nuxt provides powerful state management libraries and the useState composable to create a reactive and SSR-friendly shared state. description: Nuxt provides powerful state management libraries and the useState composable to create a reactive and SSR-friendly shared state.
navigation.icon: i-ph-database-duotone navigation.icon: i-ph-database
--- ---
Nuxt provides the [`useState`](/docs/api/composables/use-state) composable to create a reactive and SSR-friendly shared state across components. Nuxt provides the [`useState`](/docs/api/composables/use-state) composable to create a reactive and SSR-friendly shared state across components.
[`useState`](/docs/api/composables/use-state) is an SSR-friendly [`ref`](https://vuejs.org/api/reactivity-core.html#ref) replacement. Its value will be preserved after server-side rendering (during client-side hydration) and shared across all components using a unique key. [`useState`](/docs/api/composables/use-state) is an SSR-friendly [`ref`](https://vuejs.org/api/reactivity-core.html#ref) replacement. Its value will be preserved after server-side rendering (during client-side hydration) and shared across all components using a unique key.
::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=mv0WcBABcIk" target="_blank"} ::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=mv0WcBABcIk" target="_blank"}
Watch a video from Alexander Lichter about why and when to use `useState()`. Watch a video from Alexander Lichter about why and when to use `useState()`.
:: ::
@ -27,7 +27,7 @@ Never define `const state = ref()` outside of `<script setup>` or `setup()` func
For example, doing `export myState = ref({})` would result in state shared across requests on the server 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"} ::tip{icon="i-ph-check-circle"}
Instead use `const useX = () => useState('x')` Instead use `const useX = () => useState('x')`
:: ::
@ -212,7 +212,7 @@ const color = useColor() // Same as useState('color')
</template> </template>
``` ```
::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=dZSNW07sO-A" target="_blank"} ::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=dZSNW07sO-A" target="_blank"}
Watch a video from Daniel Roe on how to deal with global state and SSR in Nuxt. Watch a video from Daniel Roe on how to deal with global state and SSR in Nuxt.
:: ::

2
docs/1.getting-started/8.error-handling.md
View File

@ -1,7 +1,7 @@
--- ---
title: 'Error Handling' title: 'Error Handling'
description: 'Learn how to catch and handle errors in Nuxt.' description: 'Learn how to catch and handle errors in Nuxt.'
navigation.icon: i-ph-bug-beetle-duotone navigation.icon: i-ph-bug-beetle
--- ---
Nuxt 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:

4
docs/1.getting-started/8.server.md
View File

@ -1,7 +1,7 @@
--- ---
title: 'Server' title: 'Server'
description: Build full-stack applications with Nuxt's server framework. You can fetch data from your database or another server, create APIs, or even generate static server-side content like a sitemap or a RSS feed - all from a single codebase. description: Build full-stack applications with Nuxt's server framework. You can fetch data from your database or another server, create APIs, or even generate static server-side content like a sitemap or a RSS feed - all from a single codebase.
navigation.icon: i-ph-computer-tower-duotone navigation.icon: i-ph-computer-tower
--- ---
:read-more{to="/docs/guide/directory-structure/server"} :read-more{to="/docs/guide/directory-structure/server"}
@ -20,7 +20,7 @@ Using Nitro gives Nuxt superpowers:
Nitro is internally using [h3](https://github.com/unjs/h3), a minimal H(TTP) framework built for high performance and portability. Nitro is internally using [h3](https://github.com/unjs/h3), a minimal H(TTP) framework built for high performance and portability.
::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=DkvgJa-X31k" target="_blank"} ::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=DkvgJa-X31k" target="_blank"}
Watch a video from Alexander Lichter to understand the responsibilities of Nuxt and Nitro in your application. Watch a video from Alexander Lichter to understand the responsibilities of Nuxt and Nitro in your application.
:: ::

6
docs/1.getting-started/9.layers.md
View File

@ -1,7 +1,7 @@
--- ---
title: 'Layers' title: 'Layers'
description: Nuxt provides a powerful system that allows you to extend the default files, configs, and much more. description: Nuxt provides a powerful system that allows you to extend the default files, configs, and much more.
navigation.icon: i-ph-stack-duotone navigation.icon: i-ph-stack
--- ---
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. 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.
@ -53,11 +53,11 @@ Nuxt uses [unjs/c12](https://c12.unjs.io) and [unjs/giget](https://giget.unjs.io
Read more about layers in the **Layer Author Guide**. Read more about layers in the **Layer Author Guide**.
:: ::
::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=lnFCM7c9f7I" target="_blank"} ::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=lnFCM7c9f7I" target="_blank"}
Watch a video from Learn Vue about Nuxt Layers. Watch a video from Learn Vue about Nuxt Layers.
:: ::
::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=fr5yo3aVkfA" target="_blank"} ::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=fr5yo3aVkfA" target="_blank"}
Watch a video from Alexander Lichter about Nuxt Layers. Watch a video from Alexander Lichter about Nuxt Layers.
:: ::

4
docs/1.getting-started/9.prerendering.md
View File

@ -1,7 +1,7 @@
--- ---
title: "Prerendering" title: "Prerendering"
description: Nuxt allows pages to be statically rendered at build time to improve certain performance or SEO metrics description: Nuxt allows pages to be statically rendered at build time to improve certain performance or SEO metrics
navigation.icon: i-ph-code-block-duotone navigation.icon: i-ph-code-block
--- ---
Nuxt allows for select pages from your application to be rendered at build time. Nuxt will serve the prebuilt pages when requested instead of generating them on the fly. Nuxt allows for select pages from your application to be rendered at build time. Nuxt will serve the prebuilt pages when requested instead of generating them on the fly.
@ -105,7 +105,7 @@ Read more about Nitro's `routeRules` configuration.
As a shorthand, you can also configure this in a page file using [`defineRouteRules`](/docs/api/utils/define-route-rules). As a shorthand, you can also configure this in a page file using [`defineRouteRules`](/docs/api/utils/define-route-rules).
::read-more{to="/docs/guide/going-further/experimental-features#inlinerouterules" icon="i-ph-star-duotone"} ::read-more{to="/docs/guide/going-further/experimental-features#inlinerouterules" icon="i-ph-star"}
This feature is experimental and in order to use it you must enable the `experimental.inlineRouteRules` option in your `nuxt.config`. This feature is experimental and in order to use it you must enable the `experimental.inlineRouteRules` option in your `nuxt.config`.
:: ::

2
docs/1.getting-started/_dir.yml
View File

@ -1,3 +1,3 @@
title: Get Started title: Get Started
titleTemplate: '%s · Get Started with Nuxt' titleTemplate: '%s · Get Started with Nuxt'
icon: i-ph-rocket-launch-duotone icon: i-ph-rocket-launch

8
docs/2.guide/0.index.md
View File

@ -7,16 +7,16 @@ surround: false
--- ---
::card-group{class="sm:grid-cols-1"} ::card-group{class="sm:grid-cols-1"}
::card{icon="i-ph-medal-duotone" title="Key Concepts" to="/docs/guide/concepts"} ::card{icon="i-ph-medal" title="Key Concepts" to="/docs/guide/concepts"}
Discover the main concepts behind Nuxt, from auto-import, hybrid rendering to its TypeScript support. Discover the main concepts behind Nuxt, from auto-import, hybrid rendering to its TypeScript support.
:: ::
::card{icon="i-ph-folders-duotone" title="Directory Structure" to="/docs/guide/directory-structure"} ::card{icon="i-ph-folders" title="Directory Structure" to="/docs/guide/directory-structure"}
Learn about Nuxt directory structure and what benefits each directory or file offers. Learn about Nuxt directory structure and what benefits each directory or file offers.
:: ::
::card{icon="i-ph-star-duotone" title="Going Further" to="/docs/guide/going-further"} ::card{icon="i-ph-star" title="Going Further" to="/docs/guide/going-further"}
Master Nuxt with advanced concepts like experimental features, hooks, modules, and more. Master Nuxt with advanced concepts like experimental features, hooks, modules, and more.
:: ::
::card{icon="i-ph-book-open-duotone" title="Recipes" to="/docs/guide/recipes"} ::card{icon="i-ph-book-open" title="Recipes" to="/docs/guide/recipes"}
Find solutions to common problems and learn how to implement them in your Nuxt project. Find solutions to common problems and learn how to implement them in your Nuxt project.
:: ::
:: ::

6
docs/2.guide/1.concepts/1.auto-imports.md
View File

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

2
docs/2.guide/1.concepts/3.rendering.md
View File

@ -116,7 +116,7 @@ export default defineNuxtConfig({
'/': { prerender: true }, '/': { prerender: true },
// Products page generated on demand, revalidates in background, cached until API response changes // Products page generated on demand, revalidates in background, cached until API response changes
'/products': { swr: true }, '/products': { swr: true },
// Product page generated on demand, revalidates in background, cached for 1 hour (3600 seconds) // Product pages generated on demand, revalidates in background, cached for 1 hour (3600 seconds)
'/products/**': { swr: 3600 }, '/products/**': { swr: 3600 },
// Blog posts page generated on demand, revalidates in background, cached on CDN for 1 hour (3600 seconds) // Blog posts page generated on demand, revalidates in background, cached on CDN for 1 hour (3600 seconds)
'/blog': { isr: 3600 }, '/blog': { isr: 3600 },

2
docs/2.guide/1.concepts/8.typescript.md
View File

@ -61,7 +61,7 @@ This file contains the recommended basic TypeScript configuration for your proje
[Read more about how to extend this configuration](/docs/guide/directory-structure/tsconfig). [Read more about how to extend this configuration](/docs/guide/directory-structure/tsconfig).
::tip{icon="i-ph-video-duotone" to="https://youtu.be/umLI7SlPygY" target="_blank"} ::tip{icon="i-ph-video" to="https://youtu.be/umLI7SlPygY" target="_blank"}
Watch a video from Daniel Roe explaining built-in Nuxt aliases. Watch a video from Daniel Roe explaining built-in Nuxt aliases.
:: ::

2
docs/2.guide/1.concepts/9.code-style.md
View File

@ -7,7 +7,7 @@ description: "Nuxt supports ESLint out of the box"
The recommended approach for Nuxt is to enable ESLint support using the [`@nuxt/eslint`](https://eslint.nuxt.com/packages/module) module, that will setup project-aware ESLint configuration for you. The recommended approach for Nuxt is to enable ESLint support using the [`@nuxt/eslint`](https://eslint.nuxt.com/packages/module) module, that will setup project-aware ESLint configuration for you.
:::callout{icon="i-ph-lightbulb-duotone"} :::callout{icon="i-ph-lightbulb"}
The module is designed for the [new ESLint flat config format](https://eslint.org/docs/latest/use/configure/configuration-files-new) with is the [default format since ESLint v9](https://eslint.org/blog/2024/04/eslint-v9.0.0-released/). The module is designed for the [new ESLint flat config format](https://eslint.org/docs/latest/use/configure/configuration-files-new) with is the [default format since ESLint v9](https://eslint.org/blog/2024/04/eslint-v9.0.0-released/).
If you are using the legacy `.eslintrc` config, you will need to [configure manually with `@nuxt/eslint-config`](https://eslint.nuxt.com/packages/config#legacy-config-format). We highly recommend you to migrate over the flat config to be future-proof. If you are using the legacy `.eslintrc` config, you will need to [configure manually with `@nuxt/eslint-config`](https://eslint.nuxt.com/packages/config#legacy-config-format). We highly recommend you to migrate over the flat config to be future-proof.

2
docs/2.guide/1.concepts/_dir.yml
View File

@ -1,3 +1,3 @@
title: Key Concepts title: Key Concepts
titleTemplate: '%s · Nuxt Concepts' titleTemplate: '%s · Nuxt Concepts'
icon: i-ph-medal-duotone icon: i-ph-medal

2
docs/2.guide/2.directory-structure/0.nuxt.md
View File

@ -2,7 +2,7 @@
title: ".nuxt" title: ".nuxt"
description: "Nuxt uses the .nuxt/ directory in development to generate your Vue application." description: "Nuxt uses the .nuxt/ directory in development to generate your Vue application."
head.title: ".nuxt/" head.title: ".nuxt/"
navigation.icon: i-ph-folder-duotone navigation.icon: i-ph-folder
--- ---
::important ::important

2
docs/2.guide/2.directory-structure/0.output.md
View File

@ -2,7 +2,7 @@
title: ".output" title: ".output"
description: "Nuxt creates the .output/ directory when building your application for production." description: "Nuxt creates the .output/ directory when building your application for production."
head.title: ".output/" head.title: ".output/"
navigation.icon: i-ph-folder-duotone navigation.icon: i-ph-folder
--- ---
::important ::important

2
docs/2.guide/2.directory-structure/1.assets.md
View File

@ -2,7 +2,7 @@
title: "assets" title: "assets"
description: "The assets/ directory is used to add all the website's assets that the build tool will process." description: "The assets/ directory is used to add all the website's assets that the build tool will process."
head.title: "assets/" head.title: "assets/"
navigation.icon: i-ph-folder-duotone navigation.icon: i-ph-folder
--- ---
The directory usually contains the following types of files: The directory usually contains the following types of files:

6
docs/2.guide/2.directory-structure/1.components.md
View File

@ -2,7 +2,7 @@
title: "components" title: "components"
head.title: "components/" head.title: "components/"
description: "The components/ directory is where you put all your Vue components." description: "The components/ directory is where you put all your Vue components."
navigation.icon: i-ph-folder-duotone navigation.icon: i-ph-folder
--- ---
Nuxt automatically imports any components in this directory (along with components that are registered by any modules you may be using). Nuxt automatically imports any components in this directory (along with components that are registered by any modules you may be using).
@ -254,11 +254,11 @@ Server components allow server-rendering individual components within your clien
Server components can either be used on their own or paired with a [client component](#paired-with-a-client-component). Server components can either be used on their own or paired with a [client component](#paired-with-a-client-component).
::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=u1yyXe86xJM" target="_blank"} ::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=u1yyXe86xJM" target="_blank"}
Watch Learn Vue video about Nuxt Server Components. Watch Learn Vue video about Nuxt Server Components.
:: ::
::tip{icon="i-ph-article-duotone" to="https://roe.dev/blog/nuxt-server-components" target="_blank"} ::tip{icon="i-ph-article" to="https://roe.dev/blog/nuxt-server-components" target="_blank"}
Read Daniel Roe's guide to Nuxt Server Components. Read Daniel Roe's guide to Nuxt Server Components.
:: ::

2
docs/2.guide/2.directory-structure/1.composables.md
View File

@ -2,7 +2,7 @@
title: 'composables' title: 'composables'
head.title: 'composables/' head.title: 'composables/'
description: Use the composables/ directory to auto-import your Vue composables into your application. description: Use the composables/ directory to auto-import your Vue composables into your application.
navigation.icon: i-ph-folder-duotone navigation.icon: i-ph-folder
--- ---
## Usage ## Usage

2
docs/2.guide/2.directory-structure/1.content.md
View File

@ -2,7 +2,7 @@
title: 'content' title: 'content'
head.title: 'content/' head.title: 'content/'
description: Use the content/ directory to create a file-based CMS for your application. description: Use the content/ directory to create a file-based CMS for your application.
navigation.icon: i-ph-folder-duotone navigation.icon: i-ph-folder
--- ---
[Nuxt Content](https://content.nuxt.com) reads the [`content/` directory](/docs/guide/directory-structure/content) in your project and parses `.md`, `.yml`, `.csv` and `.json` files to create a file-based CMS for your application. [Nuxt Content](https://content.nuxt.com) reads the [`content/` directory](/docs/guide/directory-structure/content) in your project and parses `.md`, `.yml`, `.csv` and `.json` files to create a file-based CMS for your application.

4
docs/2.guide/2.directory-structure/1.layouts.md
View File

@ -2,10 +2,10 @@
title: "layouts" title: "layouts"
head.title: "layouts/" head.title: "layouts/"
description: "Nuxt provides a layouts framework to extract common UI patterns into reusable layouts." description: "Nuxt provides a layouts framework to extract common UI patterns into reusable layouts."
navigation.icon: i-ph-folder-duotone navigation.icon: i-ph-folder
--- ---
::tip{icon="i-ph-rocket-launch-duotone" color="gray" } ::tip{icon="i-ph-rocket-launch" color="gray" }
For best performance, components placed in this directory will be automatically loaded via asynchronous import when used. For best performance, components placed in this directory will be automatically loaded via asynchronous import when used.
:: ::

2
docs/2.guide/2.directory-structure/1.middleware.md
View File

@ -2,7 +2,7 @@
title: "middleware" title: "middleware"
description: "Nuxt provides middleware to run code before navigating to a particular route." description: "Nuxt provides middleware to run code before navigating to a particular route."
head.title: "middleware/" head.title: "middleware/"
navigation.icon: i-ph-folder-duotone navigation.icon: i-ph-folder
--- ---
Nuxt provides a customizable **route middleware** framework you can use throughout your application, ideal for extracting code that you want to run before navigating to a particular route. Nuxt provides a customizable **route middleware** framework you can use throughout your application, ideal for extracting code that you want to run before navigating to a particular route.

4
docs/2.guide/2.directory-structure/1.modules.md
View File

@ -2,7 +2,7 @@
title: 'modules' title: 'modules'
head.title: 'modules/' head.title: 'modules/'
description: Use the modules/ directory to automatically register local modules within your application. description: Use the modules/ directory to automatically register local modules within your application.
navigation.icon: i-ph-folder-duotone navigation.icon: i-ph-folder
--- ---
It is a good place to place any local modules you develop while building your application. It is a good place to place any local modules you develop while building your application.
@ -61,6 +61,6 @@ modules/
:read-more{to="/docs/guide/going-further/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?friend=nuxt" target="_blank"} ::tip{icon="i-ph-video" to="https://vueschool.io/lessons/creating-your-first-module-from-scratch?friend=nuxt" target="_blank"}
Watch Vue School video about Nuxt private modules. Watch Vue School video about Nuxt private modules.
:: ::

2
docs/2.guide/2.directory-structure/1.node_modules.md
View File

@ -2,7 +2,7 @@
title: "node_modules" title: "node_modules"
description: "The package manager stores the dependencies of your project in the node_modules/ directory." description: "The package manager stores the dependencies of your project in the node_modules/ directory."
head.title: "node_modules/" head.title: "node_modules/"
navigation.icon: i-ph-folder-duotone navigation.icon: i-ph-folder
--- ---
The package manager ([`npm`](https://docs.npmjs.com/cli/commands/npm) or [`yarn`](https://yarnpkg.com) or [`pnpm`](https://pnpm.io/cli/install) or [`bun`](https://bun.sh/package-manager)) creates this directory to store the dependencies of your project. The package manager ([`npm`](https://docs.npmjs.com/cli/commands/npm) or [`yarn`](https://yarnpkg.com) or [`pnpm`](https://pnpm.io/cli/install) or [`bun`](https://bun.sh/package-manager)) creates this directory to store the dependencies of your project.

2
docs/2.guide/2.directory-structure/1.pages.md
View File

@ -2,7 +2,7 @@
title: "pages" title: "pages"
description: "Nuxt provides file-based routing to create routes within your web application." description: "Nuxt provides file-based routing to create routes within your web application."
head.title: "pages/" head.title: "pages/"
navigation.icon: i-ph-folder-duotone navigation.icon: i-ph-folder
--- ---
::note ::note

4
docs/2.guide/2.directory-structure/1.plugins.md
View File

@ -2,7 +2,7 @@
title: "plugins" title: "plugins"
description: "Nuxt has a plugins system to use Vue plugins and more at the creation of your Vue application." description: "Nuxt has a plugins system to use Vue plugins and more at the creation of your Vue application."
head.title: "plugins/" head.title: "plugins/"
navigation.icon: i-ph-folder-duotone navigation.icon: i-ph-folder
--- ---
Nuxt automatically reads the files in the `plugins/` directory and loads them at the creation of the Vue application. Nuxt automatically reads the files in the `plugins/` directory and loads them at the creation of the Vue application.
@ -76,7 +76,7 @@ export default defineNuxtPlugin({
}) })
``` ```
::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=2aXZyXB1QGQ" target="_blank"} ::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=2aXZyXB1QGQ" target="_blank"}
Watch a video from Alexander Lichter about the Object Syntax for Nuxt plugins. Watch a video from Alexander Lichter about the Object Syntax for Nuxt plugins.
:: ::

2
docs/2.guide/2.directory-structure/1.public.md
View File

@ -2,7 +2,7 @@
title: "public" title: "public"
description: "The public/ directory is used to serve your website's static assets." description: "The public/ directory is used to serve your website's static assets."
head.title: "public/" head.title: "public/"
navigation.icon: i-ph-folder-duotone navigation.icon: i-ph-folder
--- ---
Files contained within the `public/` directory are served at the root and are not modified by the build process. This is suitable for files that have to keep their names (e.g. `robots.txt`) _or_ likely won't change (e.g. `favicon.ico`). Files contained within the `public/` directory are served at the root and are not modified by the build process. This is suitable for files that have to keep their names (e.g. `robots.txt`) _or_ likely won't change (e.g. `favicon.ico`).

2
docs/2.guide/2.directory-structure/1.server.md
View File

@ -2,7 +2,7 @@
title: server title: server
head.title: 'server/' head.title: 'server/'
description: The server/ directory is used to register API and server handlers to your application. description: The server/ directory is used to register API and server handlers to your application.
navigation.icon: i-ph-folder-duotone navigation.icon: i-ph-folder
--- ---
Nuxt automatically scans files inside these directories to register API and server handlers with Hot Module Replacement (HMR) support. Nuxt automatically scans files inside these directories to register API and server handlers with Hot Module Replacement (HMR) support.

2
docs/2.guide/2.directory-structure/1.utils.md
View File

@ -2,7 +2,7 @@
title: 'utils' title: 'utils'
head.title: 'utils/' head.title: 'utils/'
description: Use the utils/ directory to auto-import your utility functions throughout your application. description: Use the utils/ directory to auto-import your utility functions throughout your application.
navigation.icon: i-ph-folder-duotone navigation.icon: i-ph-folder
--- ---
The main purpose of the [`utils/` directory](/docs/guide/directory-structure/utils) is to allow a semantic distinction between your Vue composables and other auto-imported utility functions. The main purpose of the [`utils/` directory](/docs/guide/directory-structure/utils) is to allow a semantic distinction between your Vue composables and other auto-imported utility functions.

2
docs/2.guide/2.directory-structure/2.env.md
View File

@ -2,7 +2,7 @@
title: ".env" title: ".env"
description: "A .env file specifies your build/dev-time environment variables." description: "A .env file specifies your build/dev-time environment variables."
head.title: ".env" head.title: ".env"
navigation.icon: i-ph-file-duotone navigation.icon: i-ph-file
--- ---
::important ::important

2
docs/2.guide/2.directory-structure/2.gitignore.md
View File

@ -2,7 +2,7 @@
title: ".gitignore" title: ".gitignore"
description: "A .gitignore file specifies intentionally untracked files that git should ignore." description: "A .gitignore file specifies intentionally untracked files that git should ignore."
head.title: ".gitignore" head.title: ".gitignore"
navigation.icon: i-ph-file-duotone navigation.icon: i-ph-file
--- ---
A `.gitignore` file specifies intentionally untracked files that git should ignore. A `.gitignore` file specifies intentionally untracked files that git should ignore.

2
docs/2.guide/2.directory-structure/2.nuxtignore.md
View File

@ -2,7 +2,7 @@
title: .nuxtignore title: .nuxtignore
head.title: '.nuxtignore' head.title: '.nuxtignore'
description: The .nuxtignore file lets Nuxt ignore files in your project’s root directory during the build phase. description: The .nuxtignore file lets Nuxt ignore files in your project’s root directory during the build phase.
navigation.icon: i-ph-file-duotone navigation.icon: i-ph-file
--- ---
The `.nuxtignore` file tells Nuxt to ignore files in your project’s root directory ([`rootDir`](/docs/api/nuxt-config#rootdir)) during the build phase. The `.nuxtignore` file tells Nuxt to ignore files in your project’s root directory ([`rootDir`](/docs/api/nuxt-config#rootdir)) during the build phase.

2
docs/2.guide/2.directory-structure/3.app-config.md
View File

@ -2,7 +2,7 @@
title: app.config.ts title: app.config.ts
head.title: 'app.config.ts' head.title: 'app.config.ts'
description: Expose reactive configuration within your application with the App Config file. description: Expose reactive configuration within your application with the App Config file.
navigation.icon: i-ph-file-duotone navigation.icon: i-ph-file
--- ---
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). 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).

2
docs/2.guide/2.directory-structure/3.app.md
View File

@ -2,7 +2,7 @@
title: "app.vue" title: "app.vue"
description: "The app.vue file is the main component of your Nuxt application." description: "The app.vue file is the main component of your Nuxt application."
head.title: "app.vue" head.title: "app.vue"
navigation.icon: i-ph-file-duotone navigation.icon: i-ph-file
--- ---
## Minimal Usage ## Minimal Usage

2
docs/2.guide/2.directory-structure/3.error.md
View File

@ -2,7 +2,7 @@
title: "error.vue" title: "error.vue"
description: "The error.vue file is the error page in your Nuxt application." description: "The error.vue file is the error page in your Nuxt application."
head.title: "error.vue" head.title: "error.vue"
navigation.icon: i-ph-file-duotone navigation.icon: i-ph-file
--- ---
During the lifespan of your application, some errors may appear unexpectedly at runtime. In such case, we can use the `error.vue` file to override the default error files and display the error nicely. During the lifespan of your application, some errors may appear unexpectedly at runtime. In such case, we can use the `error.vue` file to override the default error files and display the error nicely.

2
docs/2.guide/2.directory-structure/3.nuxt-config.md
View File

@ -2,7 +2,7 @@
title: "nuxt.config.ts" title: "nuxt.config.ts"
description: "Nuxt can be easily configured with a single nuxt.config file." description: "Nuxt can be easily configured with a single nuxt.config file."
head.title: "nuxt.config.ts" head.title: "nuxt.config.ts"
navigation.icon: i-ph-file-duotone navigation.icon: i-ph-file
--- ---
The `nuxt.config` file extension can either be `.js`, `.ts` or `.mjs`. The `nuxt.config` file extension can either be `.js`, `.ts` or `.mjs`.

2
docs/2.guide/2.directory-structure/3.package.md
View File

@ -2,7 +2,7 @@
title: package.json title: package.json
head.title: package.json head.title: package.json
description: The package.json file contains all the dependencies and scripts for your application. description: The package.json file contains all the dependencies and scripts for your application.
navigation.icon: i-ph-file-duotone navigation.icon: i-ph-file
--- ---
The minimal `package.json` of your Nuxt application should looks like: The minimal `package.json` of your Nuxt application should looks like:

2
docs/2.guide/2.directory-structure/3.tsconfig.md
View File

@ -2,7 +2,7 @@
title: "tsconfig.json" title: "tsconfig.json"
description: "Nuxt generates a .nuxt/tsconfig.json file with sensible defaults and your aliases." description: "Nuxt generates a .nuxt/tsconfig.json file with sensible defaults and your aliases."
head.title: "tsconfig.json" head.title: "tsconfig.json"
navigation.icon: i-ph-file-duotone navigation.icon: i-ph-file
--- ---
Nuxt [automatically generates](/docs/guide/concepts/typescript) a `.nuxt/tsconfig.json` file with the resolved aliases you are using in your Nuxt project, as well as with other sensible defaults. Nuxt [automatically generates](/docs/guide/concepts/typescript) a `.nuxt/tsconfig.json` file with the resolved aliases you are using in your Nuxt project, as well as with other sensible defaults.

2
docs/2.guide/2.directory-structure/_dir.yml
View File

@ -1,3 +1,3 @@
title: Directory Structure title: Directory Structure
titleTemplate: '%s · Nuxt Directory Structure' titleTemplate: '%s · Nuxt Directory Structure'
icon: i-ph-folders-duotone icon: i-ph-folders

8
docs/2.guide/3.going-further/1.experimental-features.md
View File

@ -104,11 +104,11 @@ export default defineNuxtConfig({
Matching route rules will be created, based on the page's `path`. Matching route rules will be created, based on the page's `path`.
::read-more{to="/docs/api/utils/define-route-rules" icon="i-ph-function-duotone"} ::read-more{to="/docs/api/utils/define-route-rules" icon="i-ph-function"}
Read more in `defineRouteRules` utility. Read more in `defineRouteRules` utility.
:: ::
:read-more{to="/docs/guide/concepts/rendering#hybrid-rendering" icon="i-ph-medal-duotone"} :read-more{to="/docs/guide/concepts/rendering#hybrid-rendering" icon="i-ph-medal"}
## renderJsonPayloads ## renderJsonPayloads
@ -254,7 +254,7 @@ Out of the box, this will enable typed usage of [`navigateTo`](/docs/api/utils/n
You can even get typed params within a page by using `const route = useRoute('route-name')`. You can even get typed params within a page by using `const route = useRoute('route-name')`.
::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=SXk-L19gTZk" target="_blank"} ::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=SXk-L19gTZk" target="_blank"}
Watch a video from Daniel Roe explaining type-safe routing in Nuxt. Watch a video from Daniel Roe explaining type-safe routing in Nuxt.
:: ::
@ -292,7 +292,7 @@ export default defineNuxtConfig({
}) })
``` ```
::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=1jUupYHVvrU" target="_blank"} ::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=1jUupYHVvrU" target="_blank"}
Watch a video from Alexander Lichter about the experimental `sharedPrerenderData` setting. Watch a video from Alexander Lichter about the experimental `sharedPrerenderData` setting.
:: ::

2
docs/2.guide/3.going-further/10.runtime-config.md
View File

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

10
docs/2.guide/3.going-further/3.modules.md
View File

@ -45,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. 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?friend=nuxt" target="_blank"} ::tip{icon="i-ph-video" to="https://vueschool.io/lessons/navigating-the-official-starter-template?friend=nuxt" target="_blank"}
Watch Vue School video about Nuxt module starter template. Watch Vue School video about Nuxt module starter template.
:: ::
@ -274,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). 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?friend=nuxt" target="_blank"} ::tip{icon="i-ph-video" to="https://vueschool.io/lessons/extending-and-altering-nuxt-configuration-and-options?friend=nuxt" target="_blank"}
Watch Vue School video about altering Nuxt configuration. Watch Vue School video about altering Nuxt configuration.
:: ::
@ -311,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"} :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?friend=nuxt" target="_blank"} ::tip{icon="i-ph-video" 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. Watch Vue School video about passing and exposing Nuxt module options.
:: ::
@ -538,7 +538,7 @@ export default defineNuxtModule({
:read-more{to="/docs/api/advanced/hooks"} :read-more{to="/docs/api/advanced/hooks"}
::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/nuxt-lifecycle-hooks?friend=nuxt" target="_blank"} ::tip{icon="i-ph-video" to="https://vueschool.io/lessons/nuxt-lifecycle-hooks?friend=nuxt" target="_blank"}
Watch Vue School video about using Nuxt lifecycle hooks in modules. Watch Vue School video about using Nuxt lifecycle hooks in modules.
:: ::
@ -764,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! [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?friend=nuxt" target="_blank"} ::tip{icon="i-ph-video" to="https://vueschool.io/lessons/exploring-nuxt-modules-ecosystem-and-module-types?friend=nuxt" target="_blank"}
Watch Vue School video about Nuxt module types. Watch Vue School video about Nuxt module types.
:: ::

2
docs/2.guide/3.going-further/_dir.yml
View File

@ -1,3 +1,3 @@
title: Going Further title: Going Further
titleTemplate: '%s · Nuxt Advanced' titleTemplate: '%s · Nuxt Advanced'
icon: i-ph-star-duotone icon: i-ph-star

2
docs/2.guide/4.recipes/_dir.yml
View File

@ -1,3 +1,3 @@
title: Recipes title: Recipes
titleTemplate: '%s · Recipes' titleTemplate: '%s · Recipes'
icon: i-ph-cooking-pot-duotone icon: i-ph-cooking-pot

2
docs/2.guide/_dir.yml
View File

@ -1,2 +1,2 @@
title: 'Guide' title: 'Guide'
icon: i-ph-book-open-duotone icon: i-ph-book-open

2
docs/3.api/1.components/_dir.yml
View File

@ -1,3 +1,3 @@
title: 'Components' title: 'Components'
titleTemplate: '%s · Nuxt Components' titleTemplate: '%s · Nuxt Components'
icon: i-ph-cube-duotone icon: i-ph-cube

2
docs/3.api/2.composables/_dir.yml
View File

@ -1,3 +1,3 @@
title: 'Composables' title: 'Composables'
titleTemplate: '%s · Nuxt Composables' titleTemplate: '%s · Nuxt Composables'
icon: i-ph-arrows-left-right-duotone icon: i-ph-arrows-left-right

2
docs/3.api/2.composables/use-fetch.md
View File

@ -74,7 +74,7 @@ const { data, status, error, refresh, clear } = await useFetch('/api/auth/login'
If you encounter the `data` variable destructured from a `useFetch` returns a string and not a JSON parsed object then make sure your component doesn't include an import statement like `import { useFetch } from '@vueuse/core`. If you encounter the `data` variable destructured from a `useFetch` returns a string and not a JSON parsed object then make sure your component doesn't include an import statement like `import { useFetch } from '@vueuse/core`.
:: ::
::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=njsGVmcWviY" target="_blank"} ::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=njsGVmcWviY" target="_blank"}
Watch the video from Alexander Lichter to avoid using `useFetch` the wrong way! Watch the video from Alexander Lichter to avoid using `useFetch` the wrong way!
:: ::

2
docs/3.api/2.composables/use-nuxt-app.md
View File

@ -138,7 +138,7 @@ Nuxt exposes the following properties through `ssrContext`:
Since [Nuxt v3.4](https://nuxt.com/blog/v3-4#payload-enhancements), it is possible to define your own reducer/reviver for types that are not supported by Nuxt. Since [Nuxt v3.4](https://nuxt.com/blog/v3-4#payload-enhancements), it is possible to define your own reducer/reviver for types that are not supported by Nuxt.
::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=8w6ffRBs8a4" target="_blank"} ::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=8w6ffRBs8a4" target="_blank"}
Watch a video from Alexander Lichter about serializing payloads, especially with regards to classes. Watch a video from Alexander Lichter about serializing payloads, especially with regards to classes.
:: ::

2
docs/3.api/2.composables/use-state.md
View File

@ -25,7 +25,7 @@ Because the data inside `useState` will be serialized to JSON, it is important t
`useState` is a reserved function name transformed by the compiler, so you should not name your own function `useState`. `useState` is a reserved function name transformed by the compiler, so you should not name your own function `useState`.
:: ::
::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=mv0WcBABcIk" target="_blank"} ::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=mv0WcBABcIk" target="_blank"}
Watch a video from Alexander Lichter about why and when to use `useState()`. Watch a video from Alexander Lichter about why and when to use `useState()`.
:: ::

4
docs/3.api/3.utils/$fetch.md
View File

@ -10,11 +10,11 @@ links:
Nuxt uses [ofetch](https://github.com/unjs/ofetch) to expose globally the `$fetch` helper for making HTTP requests within your Vue app or API routes. Nuxt uses [ofetch](https://github.com/unjs/ofetch) to expose globally the `$fetch` helper for making HTTP requests within your Vue app or API routes.
::tip{icon="i-ph-rocket-launch-duotone" color="gray"} ::tip{icon="i-ph-rocket-launch" color="gray"}
During server-side rendering, calling `$fetch` to fetch your internal [API routes](/docs/guide/directory-structure/server) will directly call the relevant function (emulating the request), **saving an additional API call**. During server-side rendering, calling `$fetch` to fetch your internal [API routes](/docs/guide/directory-structure/server) will directly call the relevant function (emulating the request), **saving an additional API call**.
:: ::
::note{color="blue" icon="i-ph-info-duotone"} ::note{color="blue" icon="i-ph-info"}
Using `$fetch` in components without wrapping it with [`useAsyncData`](/docs/api/composables/use-async-data) causes fetching the data twice: initially on the server, then again on the client-side during hydration, because `$fetch` does not transfer state from the server to the client. Thus, the fetch will be executed on both sides because the client has to get the data again. Using `$fetch` in components without wrapping it with [`useAsyncData`](/docs/api/composables/use-async-data) causes fetching the data twice: initially on the server, then again on the client-side during hydration, because `$fetch` does not transfer state from the server to the client. Thus, the fetch will be executed on both sides because the client has to get the data again.
:: ::

2
docs/3.api/3.utils/_dir.yml
View File

@ -1,3 +1,3 @@
title: 'Utils' title: 'Utils'
titleTemplate: '%s · Nuxt Utils' titleTemplate: '%s · Nuxt Utils'
navigation.icon: i-ph-function-duotone navigation.icon: i-ph-function

4
docs/3.api/3.utils/define-route-rules.md
View File

@ -8,7 +8,7 @@ links:
size: xs size: xs
--- ---
::read-more{to="/docs/guide/going-further/experimental-features#inlinerouterules" icon="i-ph-star-duotone"} ::read-more{to="/docs/guide/going-further/experimental-features#inlinerouterules" icon="i-ph-star"}
This feature is experimental and in order to use it you must enable the `experimental.inlineRouteRules` option in your `nuxt.config`. This feature is experimental and in order to use it you must enable the `experimental.inlineRouteRules` option in your `nuxt.config`.
:: ::
@ -47,6 +47,6 @@ When running [`nuxt build`](/docs/api/commands/build), the home page will be pre
For more control, such as if you are using a custom `path` or `alias` set in the page's [`definePageMeta`](/docs/api/utils/define-page-meta), you should set `routeRules` directly within your `nuxt.config`. For more control, such as if you are using a custom `path` or `alias` set in the page's [`definePageMeta`](/docs/api/utils/define-page-meta), you should set `routeRules` directly within your `nuxt.config`.
::read-more{to="/docs/guide/concepts/rendering#hybrid-rendering" icon="i-ph-medal-duotone"} ::read-more{to="/docs/guide/concepts/rendering#hybrid-rendering" icon="i-ph-medal"}
Read more about the `routeRules`. Read more about the `routeRules`.
:: ::

2
docs/3.api/3.utils/preload-route-components.md
View File

@ -10,7 +10,7 @@ links:
Preloading routes loads the components of a given route that the user might navigate to in future. This ensures that the components are available earlier and less likely to block the navigation, improving performance. Preloading routes loads the components of a given route that the user might navigate to in future. This ensures that the components are available earlier and less likely to block the navigation, improving performance.
::tip{icon="i-ph-rocket-launch-duotone" color="gray"} ::tip{icon="i-ph-rocket-launch" color="gray"}
Nuxt already automatically preloads the necessary routes if you're using the `NuxtLink` component. Nuxt already automatically preloads the necessary routes if you're using the `NuxtLink` component.
:: ::

2
docs/3.api/3.utils/reload-nuxt-app.md
View File

@ -14,7 +14,7 @@ links:
By default, it will also save the current `state` of your app (that is, any state you could access with `useState`). By default, it will also save the current `state` of your app (that is, any state you could access with `useState`).
::read-more{to="/docs/guide/going-further/experimental-features#restorestate" icon="i-ph-star-duotone"} ::read-more{to="/docs/guide/going-further/experimental-features#restorestate" icon="i-ph-star"}
You can enable experimental restoration of this state by enabling the `experimental.restoreState` option in your `nuxt.config` file. You can enable experimental restoration of this state by enabling the `experimental.restoreState` option in your `nuxt.config` file.
:: ::

2
docs/3.api/4.commands/_dir.yml
View File

@ -1,3 +1,3 @@
title: 'Commands' title: 'Commands'
icon: i-ph-terminal-window-duotone icon: i-ph-terminal-window
titleTemplate: '%s · Nuxt Commands' titleTemplate: '%s · Nuxt Commands'

2
docs/3.api/5.kit/12.resolving.md
View File

@ -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. 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?friend=nuxt" target="_blank"} ::tip{icon="i-ph-video" to="https://vueschool.io/lessons/resolving-paths-and-injecting-assets-to-the-app?friend=nuxt" target="_blank"}
Watch Vue School video about createResolver. Watch Vue School video about createResolver.
:: ::

2
docs/3.api/5.kit/4.autoimports.md
View File

@ -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. 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?friend=nuxt" target="_blank"} ::tip{icon="i-ph-video" to="https://vueschool.io/lessons/expanding-nuxt-s-auto-imports?friend=nuxt" target="_blank"}
Watch Vue School video about Auto-imports Nuxt Kit utilities. Watch Vue School video about Auto-imports Nuxt Kit utilities.
:: ::

2
docs/3.api/5.kit/5.components.md
View File

@ -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. 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?friend=nuxt" target="_blank"} ::tip{icon="i-ph-video" to="https://vueschool.io/lessons/injecting-components-and-component-directories?friend=nuxt" target="_blank"}
Watch Vue School video about injecting components. Watch Vue School video about injecting components.
:: ::

6
docs/3.api/5.kit/7.pages.md
View File

@ -12,7 +12,7 @@ links:
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. 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?friend=nuxt" target="_blank"} ::tip{icon="i-ph-video" to="https://vueschool.io/lessons/extend-and-alter-nuxt-pages?friend=nuxt" target="_blank"}
Watch Vue School video about extendPages. 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). 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?friend=nuxt" target="_blank"} ::tip{icon="i-ph-video" 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. 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). 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?friend=nuxt" target="_blank"} ::tip{icon="i-ph-video" 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. Watch Vue School video about adding route rules and route middelwares.
:: ::

4
docs/3.api/5.kit/9.plugins.md
View File

@ -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. Registers a Nuxt plugin and to the plugins array.
::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/injecting-plugins?friend=nuxt" target="_blank"} ::tip{icon="i-ph-video" to="https://vueschool.io/lessons/injecting-plugins?friend=nuxt" target="_blank"}
Watch Vue School video about addPlugin. 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. 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?friend=nuxt" target="_blank"} ::tip{icon="i-ph-video" to="https://vueschool.io/lessons/injecting-plugin-templates?friend=nuxt" target="_blank"}
Watch Vue School video about addPluginTemplate. Watch Vue School video about addPluginTemplate.
:: ::

2
docs/3.api/5.kit/_dir.yml
View File

@ -1,3 +1,3 @@
title: Nuxt Kit title: Nuxt Kit
navigation.icon: i-ph-toolbox-duotone navigation.icon: i-ph-toolbox
titleTemplate: '%s · Nuxt Kit' titleTemplate: '%s · Nuxt Kit'

2
docs/3.api/6.advanced/_dir.yml
View File

@ -1 +1 @@
icon: i-ph-brain-duotone icon: i-ph-brain

2
docs/3.api/6.nuxt-config.md
View File

@ -2,7 +2,7 @@
title: Nuxt Configuration title: Nuxt Configuration
titleTemplate: '%s' titleTemplate: '%s'
description: Discover all the options you can use in your nuxt.config.ts file. description: Discover all the options you can use in your nuxt.config.ts file.
navigation.icon: i-ph-gear-duotone navigation.icon: i-ph-gear
--- ---
::note{icon="i-simple-icons-github" color="gray" to="https://github.com/nuxt/nuxt/tree/main/packages/schema/src/config" target="_blank"} ::note{icon="i-simple-icons-github" color="gray" to="https://github.com/nuxt/nuxt/tree/main/packages/schema/src/config" target="_blank"}

14
docs/3.api/index.md
View File

@ -7,25 +7,25 @@ surround: false
--- ---
::card-group ::card-group
::card{icon="i-ph-cube-duotone" title="Components" to="/docs/api/components/client-only"} ::card{icon="i-ph-cube" title="Components" to="/docs/api/components/client-only"}
Explore Nuxt built-in components for pages, layouts, head, and more. Explore Nuxt built-in components for pages, layouts, head, and more.
:: ::
::card{icon="i-ph-arrows-left-right-duotone" title="Composables" to="/docs/api/composables/use-app-config"} ::card{icon="i-ph-arrows-left-right" title="Composables" to="/docs/api/composables/use-app-config"}
Discover Nuxt composable functions for data-fetching, head management and more. Discover Nuxt composable functions for data-fetching, head management and more.
:: ::
::card{icon="i-ph-function-duotone" title="Utils" to="/docs/api/utils/dollarfetch"} ::card{icon="i-ph-function" title="Utils" to="/docs/api/utils/dollarfetch"}
Learn about Nuxt utility functions for navigation, error handling and more. Learn about Nuxt utility functions for navigation, error handling and more.
:: ::
::card{icon="i-ph-terminal-window-duotone" title="Commands" to="/docs/api/commands/add"} ::card{icon="i-ph-terminal-window" title="Commands" to="/docs/api/commands/add"}
List of Nuxt CLI commands to init, analyze, build, and preview your application. List of Nuxt CLI commands to init, analyze, build, and preview your application.
:: ::
::card{icon="i-ph-toolbox-duotone" title="Nuxt Kit" to="/docs/api/kit/modules"} ::card{icon="i-ph-toolbox" title="Nuxt Kit" to="/docs/api/kit/modules"}
Understand Nuxt Kit utilities to create modules and control Nuxt. Understand Nuxt Kit utilities to create modules and control Nuxt.
:: ::
::card{icon="i-ph-brain-duotone" title="Advanced" to="/docs/api/advanced/hooks"} ::card{icon="i-ph-brain" title="Advanced" to="/docs/api/advanced/hooks"}
Go deep in Nuxt internals with Nuxt lifecycle hooks. Go deep in Nuxt internals with Nuxt lifecycle hooks.
:: ::
::card{icon="i-ph-gear-duotone" title="Nuxt Configuration" to="/docs/api/nuxt-config"} ::card{icon="i-ph-gear" title="Nuxt Configuration" to="/docs/api/nuxt-config"}
Explore all Nuxt configuration options to customize your application. Explore all Nuxt configuration options to customize your application.
:: ::
:: ::

2
docs/5.community/2.getting-help.md
View File

@ -2,7 +2,7 @@
title: Getting Help title: Getting Help
description: We're a friendly community of developers and we'd love to help. description: We're a friendly community of developers and we'd love to help.
navigation: navigation:
icon: i-ph-lifebuoy-duotone icon: i-ph-lifebuoy
--- ---
At some point, you may find that there's an issue you need some help with. At some point, you may find that there's an issue you need some help with.

2
docs/5.community/3.reporting-bugs.md
View File

@ -1,7 +1,7 @@
--- ---
title: 'Reporting Bugs' title: 'Reporting Bugs'
description: 'One of the most valuable roles in open source is taking the time to report bugs helpfully.' description: 'One of the most valuable roles in open source is taking the time to report bugs helpfully.'
navigation.icon: i-ph-bug-duotone navigation.icon: i-ph-bug
--- ---
Try as we might, we will never completely eliminate bugs. Try as we might, we will never completely eliminate bugs.

10
docs/5.community/4.contribution.md
View File

@ -1,7 +1,7 @@
--- ---
title: 'Contribution' title: 'Contribution'
description: 'Nuxt is a community project - and so we love contributions of all kinds! ❤️' description: 'Nuxt is a community project - and so we love contributions of all kinds! ❤️'
navigation.icon: i-ph-git-pull-request-duotone navigation.icon: i-ph-git-pull-request
--- ---
There is a range of different ways you might be able to contribute to the Nuxt ecosystem. There is a range of different ways you might be able to contribute to the Nuxt ecosystem.
@ -184,21 +184,21 @@ Here are some tips that may help improve your documentation:
Keep in mind your readers can have different backgrounds and experiences. Therefore, these words don't convey meaning and can be harmful. Keep in mind your readers can have different backgrounds and experiences. Therefore, these words don't convey meaning and can be harmful.
::caution{ icon="i-ph-x-circle-duotone"} ::caution{ icon="i-ph-x-circle"}
Simply make sure the function returns a promise. Simply make sure the function returns a promise.
:: ::
::tip{icon="i-ph-check-circle-duotone"} ::tip{icon="i-ph-check-circle"}
Make sure the function returns a [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). Make sure the function returns a [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).
:: ::
* Prefer [active voice](https://developers.google.com/tech-writing/one/active-voice). * Prefer [active voice](https://developers.google.com/tech-writing/one/active-voice).
::caution{icon="i-ph-x-circle-duotone"} ::caution{icon="i-ph-x-circle"}
An error will be thrown by Nuxt. An error will be thrown by Nuxt.
:: ::
::tip{icon="i-ph-check-circle-duotone"} ::tip{icon="i-ph-check-circle"}
Nuxt will throw an error. Nuxt will throw an error.
:: ::

2
docs/5.community/5.framework-contribution.md
View File

@ -1,6 +1,6 @@
--- ---
title: 'Framework' title: 'Framework'
navigation.icon: i-ph-github-logo-duotone navigation.icon: i-ph-github-logo
description: Some specific points about contributions to the framework repository. description: Some specific points about contributions to the framework repository.
--- ---

2
docs/5.community/6.roadmap.md
View File

@ -1,7 +1,7 @@
--- ---
title: 'Roadmap' title: 'Roadmap'
description: 'Nuxt is constantly evolving, with new features and modules being added all the time.' description: 'Nuxt is constantly evolving, with new features and modules being added all the time.'
navigation.icon: i-ph-map-trifold-duotone navigation.icon: i-ph-map-trifold
--- ---
::read-more{to="/blog"} ::read-more{to="/blog"}

2
docs/5.community/7.changelog.md
View File

@ -1,7 +1,7 @@
--- ---
title: 'Releases' title: 'Releases'
description: Discover the latest releases of Nuxt & Nuxt official modules. description: Discover the latest releases of Nuxt & Nuxt official modules.
navigation.icon: i-ph-notification-duotone navigation.icon: i-ph-notification
--- ---
::card-group ::card-group

2
docs/5.community/_dir.yml
View File

@ -1,3 +1,3 @@
title: 'Community' title: 'Community'
titleTemplate: '%s · Nuxt Community' titleTemplate: '%s · Nuxt Community'
icon: i-ph-chats-teardrop-duotone icon: i-ph-chats-teardrop

2
docs/6.bridge/_dir.yml
View File

@ -1,3 +1,3 @@
titleTemplate: 'Migrate to Nuxt Bridge: %s' titleTemplate: 'Migrate to Nuxt Bridge: %s'
title: 'Migrate to Nuxt Bridge' title: 'Migrate to Nuxt Bridge'
icon: i-ph-bridge-duotone icon: i-ph-bridge

2
docs/7.migration/20.module-authors.md
View File

@ -9,7 +9,7 @@ Nuxt 3 has a basic backward compatibility layer for Nuxt 2 modules using `@nuxt/
We have prepared a [Dedicated Guide](/docs/guide/going-further/modules) for authoring Nuxt 3 ready modules using `@nuxt/kit`. Currently best migration path is to follow it and rewrite your modules. Rest of this guide includes preparation steps if you prefer to avoid a full rewrite yet making modules compatible with Nuxt 3. We have prepared a [Dedicated Guide](/docs/guide/going-further/modules) for authoring Nuxt 3 ready modules using `@nuxt/kit`. Currently best migration path is to follow it and rewrite your modules. Rest of this guide includes preparation steps if you prefer to avoid a full rewrite yet making modules compatible with Nuxt 3.
::tip{icon="i-ph-puzzle-piece-duotone" to="/modules"} ::tip{icon="i-ph-puzzle-piece" to="/modules"}
Explore Nuxt 3 compatible modules. Explore Nuxt 3 compatible modules.
:: ::

2
docs/7.migration/_dir.yml
View File

@ -1,3 +1,3 @@
titleTemplate: 'Migrate to Nuxt 3: %s' titleTemplate: 'Migrate to Nuxt 3: %s'
title: 'Migrate to Nuxt 3' title: 'Migrate to Nuxt 3'
icon: i-ph-arrow-circle-up-duotone icon: i-ph-arrow-circle-up

2
docs/_dir.yml
View File

@ -1,2 +1,2 @@
title: Docs title: Docs
icon: i-ph-book-bookmark-duotone icon: i-ph-book-bookmark

10
package.json
View File

@ -45,13 +45,13 @@
"@types/node": "20.16.5", "@types/node": "20.16.5",
"c12": "2.0.0-beta.2", "c12": "2.0.0-beta.2",
"h3": "npm:h3-nightly@2.0.0-1718872656.6765a6e", "h3": "npm:h3-nightly@2.0.0-1718872656.6765a6e",
"jiti": "2.0.0-beta.3", "jiti": "2.0.0-rc.1",
"magic-string": "^0.30.11", "magic-string": "^0.30.11",
"nitro": "npm:nitro-nightly@3.0.0-beta-28665895.e727afda", "nitro": "npm:nitro-nightly@3.0.0-beta-28665895.e727afda",
"nuxt": "workspace:*", "nuxt": "workspace:*",
"ohash": "1.1.4", "ohash": "1.1.4",
"postcss": "8.4.47", "postcss": "8.4.47",
"rollup": "4.21.3", "rollup": "4.22.2",
"send": ">=0.19.0", "send": ">=0.19.0",
"typescript": "5.6.2", "typescript": "5.6.2",
"ufo": "1.5.4", "ufo": "1.5.4",
@ -71,12 +71,12 @@
"@types/semver": "7.5.8", "@types/semver": "7.5.8",
"@unhead/schema": "1.11.6", "@unhead/schema": "1.11.6",
"@unhead/vue": "1.11.6", "@unhead/vue": "1.11.6",
"@vitejs/plugin-vue": "5.1.3", "@vitejs/plugin-vue": "5.1.4",
"@vitest/coverage-v8": "2.1.1", "@vitest/coverage-v8": "2.1.1",
"@vue/test-utils": "2.4.6", "@vue/test-utils": "2.4.6",
"autoprefixer": "10.4.20", "autoprefixer": "10.4.20",
"case-police": "0.7.0", "case-police": "0.7.0",
"changelogen": "0.5.5", "changelogen": "0.5.7",
"consola": "3.2.3", "consola": "3.2.3",
"cssnano": "7.0.6", "cssnano": "7.0.6",
"destr": "2.0.3", "destr": "2.0.3",
@ -87,7 +87,7 @@
"eslint-typegen": "0.3.2", "eslint-typegen": "0.3.2",
"h3": "npm:h3-nightly@2.0.0-1718872656.6765a6e", "h3": "npm:h3-nightly@2.0.0-1718872656.6765a6e",
"happy-dom": "15.7.4", "happy-dom": "15.7.4",
"jiti": "2.0.0-beta.3", "jiti": "2.0.0-rc.1",
"markdownlint-cli": "0.41.0", "markdownlint-cli": "0.41.0",
"nitro": "npm:nitro-nightly@3.0.0-beta-28665895.e727afda", "nitro": "npm:nitro-nightly@3.0.0-beta-28665895.e727afda",
"nuxi": "3.13.2", "nuxi": "3.13.2",

2
packages/kit/package.json
View File

@ -35,7 +35,7 @@
"globby": "^14.0.2", "globby": "^14.0.2",
"hash-sum": "^2.0.0", "hash-sum": "^2.0.0",
"ignore": "^6.0.1", "ignore": "^6.0.1",
"jiti": "^2.0.0-beta.3", "jiti": "^2.0.0-rc.1",
"klona": "^2.0.6", "klona": "^2.0.6",
"mlly": "^1.7.1", "mlly": "^1.7.1",
"pathe": "^1.1.2", "pathe": "^1.1.2",

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