Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-22 05:35:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into fix/use-cookie

Browse Source
This commit is contained in:
Alexander Lichter 2023-07-12 18:59:32 +02:00 committed by GitHub
commit 63912b6075
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
121 changed files with 1101 additions and 866 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc
View File

@ -1,4 +1,5 @@
{
"$schema": "https://json.schemastore.org/eslintrc",
"globals": {
"NodeJS": true,
"$fetch": true

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

@ -19,7 +19,7 @@ jobs:
steps:
- uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
- run: corepack enable
- uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
- uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
with:
node-version: 20
cache: "pnpm"
@ -30,4 +30,4 @@ jobs:
- name: Lint (docs)
run: pnpm lint:docs:fix
- uses: autofix-ci/action@8bc06253bec489732e5f9c52884c7cace15c0160
- uses: autofix-ci/action@8caa572fd27b0019a65e4c695447089c8d3138b9

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

@ -15,7 +15,7 @@ jobs:
steps:
- uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
- run: corepack enable
- uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
- uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
with:
node-version: 20
cache: "pnpm"
@ -42,4 +42,4 @@ jobs:
- name: Update bundle size
run: pnpm vitest run bundle -u
- uses: autofix-ci/action@8bc06253bec489732e5f9c52884c7cace15c0160
- uses: autofix-ci/action@8caa572fd27b0019a65e4c695447089c8d3138b9

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

@ -23,7 +23,7 @@ jobs:
with:
fetch-depth: 0
- run: corepack enable
- uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
- uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
with:
node-version: 20
cache: "pnpm"

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

@ -40,7 +40,7 @@ jobs:
steps:
- uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
- run: corepack enable
- uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
- uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
with:
node-version: 20
cache: "pnpm"
@ -77,7 +77,7 @@ jobs:
steps:
- uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
- run: corepack enable
- uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
- uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
with:
node-version: 20
cache: "pnpm"
@ -117,7 +117,7 @@ jobs:
steps:
- uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
- run: corepack enable
- uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
- uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
with:
node-version: 20
cache: "pnpm"
@ -146,7 +146,7 @@ jobs:
steps:
- uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
- run: corepack enable
- uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
- uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
with:
node-version: 20
cache: "pnpm"
@ -182,7 +182,7 @@ jobs:
steps:
- uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
- run: corepack enable
- uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
- uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
with:
node-version: ${{ matrix.node }}
cache: "pnpm"
@ -257,7 +257,7 @@ jobs:
with:
fetch-depth: 0
- run: corepack enable
- uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
- uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
with:
node-version: 20
cache: "pnpm"
@ -296,7 +296,7 @@ jobs:
with:
fetch-depth: 0
- run: corepack enable
- uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
- uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
with:
node-version: 20
cache: "pnpm"

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

@ -23,7 +23,7 @@ jobs:
steps:
- uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
- run: corepack enable
- uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
- uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
with:
cache: "pnpm"

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

@ -22,7 +22,7 @@ jobs:
steps:
- uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
- run: corepack enable
- uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
- uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
with:
node-version: 20
cache: "pnpm"

2
.github/workflows/nuxt2-edge.yml vendored
View File

@ -27,7 +27,7 @@ jobs:
fetch-depth: 0 # All history
- name: fetch tags
run: git fetch --depth=1 origin "+refs/tags/*:refs/tags/*"
- uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
- uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
with:
node-version: 16
registry-url: 'https://registry.npmjs.org'

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

@ -35,7 +35,7 @@ jobs:
fetch-depth: 0
- run: corepack enable
- uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
- uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
with:
node-version: 20
cache: "pnpm"

7
.vscode/extensions.json vendored Normal file
View File

@ -0,0 +1,7 @@
{
// See https://go.microsoft.com/fwlink/?LinkId=827846
// for the documentation about the extensions.json format
"recommendations": [
"vue.volar"
]
}

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

@ -34,7 +34,7 @@ Start with one of our starters and themes directly by opening [nuxt.new](https:/
- **Volar**: Either enable [**Take Over Mode**](https://vuejs.org/guide/typescript/overview.html#volar-takeover-mode) (recommended) or add the [TypeScript Vue Plugin](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin)
If you have enabled **Take Over Mode** or installed the **TypeScript Vue Plugin (Volar)**, you can disable generating the shim for `*.vue` files in your `nuxt.config.ts` file:
If you have enabled **Take Over Mode** or installed the **TypeScript Vue Plugin (Volar)**, you can disable generating the shim for `*.vue` files in your [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt.config) file:
```ts [nuxt.config.ts]
export default defineNuxtConfig({

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

@ -9,7 +9,7 @@ By default, Nuxt is configured to cover most use cases. The [`nuxt.config.ts`](/
## Nuxt Configuration
The `nuxt.config.ts` file is located at the root of a Nuxt project and can override or extend the application's behavior.
The [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt.config) file is located at the root of a Nuxt project and can override or extend the application's behavior.
A minimal configuration file exports the `defineNuxtConfig` function containing an object with your configuration. The `defineNuxtConfig` helper is globally available without import.
@ -135,7 +135,7 @@ Non primitive JS types | ❌ No | ✅ Yes
## External Configuration Files
Nuxt uses `nuxt.config.ts` file as the single source of trust for configurations and skips reading external configuration files. During the course of building your project, you may have a need to configure those. The following table highlights common configurations and, where applicable, how they can be configured with Nuxt.
Nuxt uses [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt.config) file as the single source of trust for configurations and skips reading external configuration files. During the course of building your project, you may have a need to configure those. The following table highlights common configurations and, where applicable, how they can be configured with Nuxt.
Name | Config File | How To Configure
|---------------------------------------------|---------------------------|-------------------------

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

@ -28,7 +28,7 @@ If you are familiar with Vue, you might wonder where `main.js` is (the file that
![Components are reusable pieces of UI](/assets/docs/getting-started/views/components.svg)
Most components are reusable pieces of the user interface, like buttons and menus. In Nuxt, you can create these components in the `components/` directory, and they will be automatically available across your application without having to explicitly import them.
Most components are reusable pieces of the user interface, like buttons and menus. In Nuxt, you can create these components in the [`components/` directory](/docs/guide/directory-structure/components), and they will be automatically available across your application without having to explicitly import them.
::code-group
@ -57,9 +57,9 @@ Most components are reusable pieces of the user interface, like buttons and menu
![Pages are views tied to a specific route](/assets/docs/getting-started/views/pages.svg)
Pages represent views for each specific route pattern. Every file in the `pages/` directory represents a different route displaying its content.
Pages represent views for each specific route pattern. Every file in the [`pages/` directory](/docs/guide/directory-structure/pages) represents a different route displaying its content.
To use pages, create `pages/index.vue` file and add `<NuxtPage />` component to the `app.vue` (or remove `app.vue` for default entry). You can now create more pages and their corresponding routes by adding new files in the `pages/` directory.
To use pages, create `pages/index.vue` file and add `<NuxtPage />` component to the `app.vue` (or remove `app.vue` for default entry). You can now create more pages and their corresponding routes by adding new files in the [`pages/` directory](/docs/guide/directory-structure/pages).
::code-group
@ -136,7 +136,7 @@ If you want to create more layouts and learn how to use them in your pages, find
## Advanced: Extending the HTML template
::alert{type=info}
If you only need to modify the head, you can refer to the [SEO and meta section](docs/getting-started/seo-meta).
If you only need to modify the head, you can refer to the [SEO and meta section](/docs/getting-started/seo-meta).
::
You can have full control over the HTML template by adding a Nitro plugin that registers a hook.

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

@ -13,7 +13,7 @@ Nuxt uses two directories to handle assets like stylesheets, fonts or images.
The [`public/` directory](/docs/guide/directory-structure/public) is used as a public server for static assets publicly available at a defined URL of your application.
You can get a file in the `public/` directory from your application's code or from a browser by the root URL `/`.
You can get a file in the [`public/` directory](/docs/guide/directory-structure/public) from your application's code or from a browser by the root URL `/`.
### Example
@ -29,9 +29,9 @@ For example, referencing an image file in the `public/img/` directory, available
Nuxt uses [Vite](https://vitejs.dev/guide/assets.html) or [webpack](https://webpack.js.org/guides/asset-management/) to build and bundle your application. The main function of these build tools is to process JavaScript files, but they can be extended through [plugins](https://vitejs.dev/plugins/) (for Vite) or [loaders](https://webpack.js.org/loaders/) (for webpack) to process other kind of assets, like stylesheets, fonts or SVG. This step transforms the original file mainly for performance or caching purposes (such as stylesheets minification or browser cache invalidation).
By convention, Nuxt uses the `assets/` directory to store these files but there is no auto-scan functionality for this directory, and you can use any other name for it.
By convention, Nuxt uses the [`assets/` directory](/docs/guide/directory-structure/assets) to store these files but there is no auto-scan functionality for this directory, and you can use any other name for it.
In your application's code, you can reference a file located in the `assets/` directory by using the `~/assets/` path.
In your application's code, you can reference a file located in the [`assets/` directory](/docs/guide/directory-structure/assets) by using the `~/assets/` path.
### Example
@ -44,7 +44,7 @@ For example, referencing an image file that will be processed if a build tool is
```
::alert{type=info icon=💡}
Nuxt won't serve files in the `assets/` directory at a static URL like `/assets/my-file.png`. If you need a static URL, use the [`public/` directory](#public-directory).
Nuxt won't serve files in the [`assets/` directory](/docs/guide/directory-structure/assets) at a static URL like `/assets/my-file.png`. If you need a static URL, use the [`public/` directory](#public-directory).
::
### Global Styles Imports

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

@ -9,7 +9,7 @@ You can use CSS preprocessors, CSS frameworks, UI libraries and Nuxt modules to
## Local Stylesheets
If you're writing local stylesheets, the natural place to put them is the `assets/` directory.
If you're writing local stylesheets, the natural place to put them is the [`assets/` directory](/docs/guide/directory-structure/assets).
### Importing Within Components
@ -37,7 +37,7 @@ The stylesheets will be inlined in the HTML rendered by Nuxt.
### The CSS Property
You can also use the `css` property in the Nuxt configuration.
The natural place for your stylesheets is the `assets/` directory. You can then reference its path and Nuxt will include it to all the pages of your application.
The natural place for your stylesheets is the [`assets/` directory](/docs/guide/directory-structure/assets). You can then reference its path and Nuxt will include it to all the pages of your application.
```ts [nuxt.config.ts]
export default defineNuxtConfig({
@ -105,7 +105,7 @@ export default defineNuxtConfig({
You can include external stylesheets in your application by adding a link element in the head section of your nuxt.config file. You can achieve this result using different methods. Note that local stylesheets can also be included like this.
You can manipulate the head with the `app.head` property of your Nuxt configuration:
You can manipulate the head with the [`app.head`](/docs/api/configuration/nuxt-config#head) property of your Nuxt configuration:
```ts [nuxt.config.ts]
export default defineNuxtConfig({

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

@ -4,11 +4,11 @@ description: Nuxt file-system routing creates a route for every file in the page
---
# Routing
One core feature of Nuxt is the file system router. Every Vue file inside the `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/` directory](/docs/guide/directory-structure/pages) 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.
## Pages
Nuxt routing is based on [vue-router](https://router.vuejs.org/) and generates the routes from every component created in the [`pages/`](/docs/guide/directory-structure/pages) directory, based on their filename.
Nuxt routing is based on [vue-router](https://router.vuejs.org/) and generates the routes from every component created in the [`pages/` directory](/docs/guide/directory-structure/pages), based on their filename.
This file system routing uses naming conventions to create dynamic and nested routes:
@ -93,8 +93,8 @@ Route middleware runs within the Vue part of your Nuxt app. Despite the similar
There are three kinds of route middleware:
1. Anonymous (or inline) route middleware, which are defined directly in the pages where they are used.
2. Named route middleware, which are placed in the `middleware/` directory and will be automatically loaded via asynchronous import when used on a page. (**Note**: The route middleware name is normalized to kebab-case, so `someMiddleware` becomes `some-middleware`.)
3. Global route middleware, which are placed in the `middleware/` directory (with a `.global` suffix) and will be automatically run on every route change.
2. Named route middleware, which are placed in the [`middleware/` directory](/docs/guide/directory-structure/middleware) and will be automatically loaded via asynchronous import when used on a page. (**Note**: The route middleware name is normalized to kebab-case, so `someMiddleware` becomes `some-middleware`.)
3. Global route middleware, which are placed in the [`middleware/` directory](/docs/guide/directory-structure/middleware) (with a `.global` suffix) and will be automatically run on every route change.
Example of an `auth` middleware protecting the `/dashboard` page:

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

@ -35,7 +35,7 @@ Shortcuts are available to make configuration easier: `charset` and `viewport`.
## `useHead`
The `useHead` composable function allows you to manage your head tags in a programmatic and reactive way,
The [`useHead`](/docs/api/composables/use-head) composable function allows you to manage your head tags in a programmatic and reactive way,
powered by [Unhead](https://unhead.harlanzw.com/).
As with all composables, it can only be used with a components `setup` and lifecycle hooks.
@ -59,7 +59,7 @@ We recommend to take a look at the [`useHead`](/docs/api/composables/use-head) a
## `useSeoMeta` and `useServerSeoMeta`
The `useSeoMeta` and `useServerSeoMeta` composables let you define your site's SEO meta tags as a flat object with full TypeScript support.
The `useSeoMeta` and [`useServerSeoMeta`](/docs/api/composables/use-server-seo-meta) composables let you define your site's SEO meta tags as a flat object with full TypeScript support.
This helps you avoid typos and common mistakes, such as using `name` instead of `property`.
@ -108,7 +108,7 @@ const title = ref('Hello World')
## Types
The below is the non-reactive types used for `useHead`, `app.head` and components.
Below are the non-reactive types used for [`useHead`](/docs/api/composables/use-head), [`app.head`](/docs/api/configuration/nuxt-config#head) and components.
```ts
interface MetaObject {
@ -196,7 +196,7 @@ If you want to use a function (for full control), then this cannot be set in you
::
Now, if you set the title to `My Page` with `useHead` on another page of your site, the title would appear as 'My Page - Site Title' in the browser tab. You could also pass `null` to default to the site title.
Now, if you set the title to `My Page` with [`useHead`](/docs/api/composables/use-head) on another page of your site, the title would appear as 'My Page - Site Title' in the browser tab. You could also pass `null` to default to the site title.
### Body Tags
@ -222,7 +222,7 @@ useHead({
### With `definePageMeta`
Within your `pages/` directory, you can use `definePageMeta` along with `useHead` to set metadata based on the current route.
Within your [`pages/` directory](/docs/guide/directory-structure/pages), you can use `definePageMeta` along with [`useHead`](/docs/api/composables/use-head) to set metadata based on the current route.
For example, you can first set the current page title (this is extracted at build time via a macro, so it can't be set dynamically):
@ -274,7 +274,7 @@ useHead({
### External CSS
The example below shows how you might enable Google Fonts using either the `link` property of the `useHead` composable or using the `<Link>` component:
The example below shows how you might enable Google Fonts using either the `link` property of the [`useHead`](/docs/api/composables/use-head) composable or using the `<Link>` component:
::code-group

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

@ -5,15 +5,15 @@ description: Nuxt provides composables to handle data fetching within your appli
# Data fetching
Nuxt comes with two composables and a built-in library to perform data-fetching in browser or server environments: `useFetch`, `useAsyncData` 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` .
Used together, they ensure cross-environment compatibility and efficient caching and avoid duplicate network calls.
`useFetch` is the most straightforward way to handle data fetching in a component setup function.
[`useFetch`](/docs/api/composables/use-fetch) is the most straightforward way to handle data fetching in a component setup function.
On the other hand, when wanting to make a network request based on user interaction, `$fetch` is almost always the right handler to go for.
If you need more fine-grained control, you can use `useAsyncData` and `$fetch` independently.
If you need more fine-grained control, you can use [`useAsyncData`](/docs/api/composables/use-async-data) and `$fetch` independently.
The two composables share a common set of options and patterns that we will detail in the last sections.
@ -23,7 +23,7 @@ When using a framework like Nuxt that can perform calls and render pages on both
### Network calls duplication
The `useFetch` and `useAsyncData` composables ensure that once an API call is made on the server, the data is properly forwarded to the client in the payload. This JavaScript object is accessible through [`useNuxtApp().payload`](/docs/api/composables/use-nuxt-app#payload) and is used on the client to avoid refetching the same data when the code is executed in the browser.
The [`useFetch`](/docs/api/composables/use-fetch) and [`useAsyncData`](/docs/api/composables/use-async-data) composables ensure that once an API call is made on the server, the data is properly forwarded to the client in the payload. This JavaScript object is accessible through [`useNuxtApp().payload`](/docs/api/composables/use-nuxt-app#payload) and is used on the client to avoid refetching the same data when the code is executed in the browser.
::alert{icon=⚙️}
Use the [Nuxt DevTools](https://devtools.nuxtjs.org) to inspect this data in the payload tab.
@ -31,7 +31,7 @@ Use the [Nuxt DevTools](https://devtools.nuxtjs.org) to inspect this data in the
### Effective caching
`useFetch` and `useAsyncData` both use a key to cache API responses and further reduce API calls. We will detail later how to invalidate this cache.
[`useFetch`](/docs/api/composables/use-fetch) and [`useAsyncData`](/docs/api/composables/use-async-data) both use a key to cache API responses and further reduce API calls. We will detail later how to invalidate this cache.
### Suspense
@ -43,7 +43,7 @@ These composables are auto-imported and can be used in `setup` functions or life
## `useFetch`
`useFetch` is the most straightforward way to perform data fetching. It is a wrapper around the `useAsyncData` composable and `$fetch` utility.
[`useFetch`](/docs/api/composables/use-fetch) is the most straightforward way to perform data fetching. It is a wrapper around the [`useAsyncData`](/docs/api/composables/use-async-data) composable and `$fetch` utility.
```vue [app.vue]
<script setup>
@ -75,7 +75,7 @@ The `ofetch` library is built on top of the `fetch` API and adds handy features
[Read the full documentation of ofetch](https://github.com/unjs/ofetch)
::
ofetch is auto-imported by Nuxt and used by the `useFetch` composable.
ofetch is auto-imported by Nuxt and used by the [`useFetch`](/docs/api/composables/use-fetch) composable.
It can also be used in your whole application with the `$fetch` alias:
@ -92,16 +92,16 @@ Beware that using only `$fetch` will not provide the benefits described in [the
## `useAsyncData`
`useFetch` receives a URL and gets that data, whereas `useAsyncData` might have more complex logic. `useFetch(url)` is nearly equivalent to `useAsyncData(url, () => $fetch(url))` - it's developer experience sugar for the most common use case.
[`useFetch`](/docs/api/composables/use-fetch) receives a URL and gets that data, whereas [`useAsyncData`](/docs/api/composables/use-async-data) might have more complex logic. `useFetch(url)` is nearly equivalent to `useAsyncData(url, () => $fetch(url))` - it's developer experience sugar for the most common use case.
There are some cases when using the `useFetch` composable is not appropriate, for example when a CMS or a third-party provide their own query layer. In this case, you can use `useAsyncData` to wrap your calls and still keep the benefits provided by the composable:
There are some cases when using the [`useFetch`](/docs/api/composables/use-fetch) composable is not appropriate, for example when a CMS or a third-party provide their own query layer. In this case, you can use [`useAsyncData`](/docs/api/composables/use-async-data) to wrap your calls and still keep the benefits provided by the composable:
```ts
const { data, error } = await useAsyncData('users', () => myGetFunction('users'))
```
::alert{icon=👉}
The first argument of `useAsyncData` is the unique key used to cache the response of the second argument, the querying function. This argument can be ignored by directly passing the querying function. In that case, it will be auto-generated.
The first argument of [`useAsyncData`](/docs/api/composables/use-async-data) is the unique key used to cache the response of the second argument, the querying function. This argument can be ignored by directly passing the querying function. In that case, it will be auto-generated.
::
::ReadMore{link="/docs/api/composables/use-async-data"}
@ -109,7 +109,7 @@ The first argument of `useAsyncData` is the unique key used to cache the respons
## Options
`useAsyncData` and `useFetch` return the same object type and accept a common set of options as their last argument. They can help you control the composables behavior, such as navigation blocking, caching or execution.
[`useAsyncData`](/docs/api/composables/use-async-data) and [`useFetch`](/docs/api/composables/use-fetch) return the same object type and accept a common set of options as their last argument. They can help you control the composables behavior, such as navigation blocking, caching or execution.
### Lazy
@ -134,7 +134,7 @@ const { pending, data: posts } = useFetch('/api/posts', {
</script>
```
You can alternatively use `useLazyFetch` and `useLazyAsyncData` as convenient methods to perform the same.
You can alternatively use [`useLazyFetch`](/docs/api/composables/use-lazy-fetch) and `useLazyAsyncData` as convenient methods to perform the same.
```ts
const { pending, data: posts } = useLazyFetch('/api/posts')
@ -188,10 +188,10 @@ const { data: mountains } = await useFetch('/api/mountains', {
#### Keys
`useFetch` and `useAsyncData` use keys to prevent refetching the same data.
[`useFetch`](/docs/api/composables/use-fetch) and [`useAsyncData`](/docs/api/composables/use-async-data) use keys to prevent refetching the same data.
- `useFetch` uses the provided URL as a key. Alternatively, a `key` value can be provided in the `options` object passed as a last argument.
- `useAsyncData` uses its first argument as a key if it is a string. If the first argument is the handler function that performs the query, then a key that is unique to the file name and line number of the instance of `useAsyncData` will be generated for you.
- [`useFetch`](/docs/api/composables/use-fetch) uses the provided URL as a key. Alternatively, a `key` value can be provided in the `options` object passed as a last argument.
- [`useAsyncData`](/docs/api/composables/use-async-data) uses its first argument as a key if it is a string. If the first argument is the handler function that performs the query, then a key that is unique to the file name and line number of the instance of `useAsyncData` will be generated for you.
::alert{icon=📘}
To get the cached data by key, you can use [`useNuxtData`](/docs/api/composables/use-nuxt-data)
@ -310,7 +310,7 @@ Using `<script setup lang="ts">` is the recommended way of declaring Vue compone
## Serialization
When fetching data from the `server` directory, the response is serialized using `JSON.stringify`. However, since serialization is limited to only JavaScript primitive types, Nuxt does its best to convert the return type of `$fetch` and `useFetch` to match the actual value.
When fetching data from the `server` directory, the response is serialized using `JSON.stringify`. However, since serialization is limited to only JavaScript primitive types, Nuxt does its best to convert the return type of `$fetch` and [`useFetch`](/docs/api/composables/use-fetch) to match the actual value.
::alert{icon=👉}
You can learn more about `JSON.stringify` limitations [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#description).

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

@ -5,18 +5,18 @@ description: Nuxt provides powerful state management libraries and the useState
# State Management
Nuxt provides the `useState` 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` 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.
::ReadMore{link="/docs/api/composables/use-state"}
::
::alert{icon=👉}
`useState` only works during `setup` or [`Lifecycle Hooks`](https://vuejs.org/api/composition-api-lifecycle.html#composition-api-lifecycle-hooks).
[`useState`](/docs/api/composables/use-state) only works during `setup` or [`Lifecycle Hooks`](https://vuejs.org/api/composition-api-lifecycle.html#composition-api-lifecycle-hooks).
::
::alert{type=warning}
Because the data inside `useState` will be serialized to JSON, it is important that it does not contain anything that cannot be serialized, such as classes, functions or symbols.
Because the data inside [`useState`](/docs/api/composables/use-state) will be serialized to JSON, it is important that it does not contain anything that cannot be serialized, such as classes, functions or symbols.
::
## Best Practices

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

@ -11,14 +11,14 @@ Some use cases:
::list{type="success"}
- Share reusable configuration presets across projects using `nuxt.config` and `app.config`
- Create a component library using `components/` directory
- Create utility and composable library using `composables/` and `utils/` directories
- Create a component library using [`components/` directory](/docs/guide/directory-structure/components)
- Create utility and composable library using [`composables/` directory](/docs/guide/directory-structure/composables) and [`utils/` directory](/docs/guide/directory-structure/utils)
- Create [Nuxt themes](https://github.com/nuxt-themes)
- Create Nuxt module presets
- Share standard setup across projects
::
You can extend a layer by adding the [extends](/docs/api/configuration/nuxt-config#extends) property to the `nuxt.config.ts` file.
You can extend a layer by adding the [extends](/docs/api/configuration/nuxt-config#extends) property to the [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt.config) file.
```ts [nuxt.config.ts]
export default defineNuxtConfig({

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

@ -2,7 +2,9 @@
description: "Nuxt auto-imports helper functions, composables and Vue APIs."
---
# Auto imports
# Auto-imports
## Composables and Helper 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 components, composables and plugins. Components, composables or plugins can use these functions.
@ -21,9 +23,9 @@ In the [server directory](/docs/guide/directory-structure/server), we auto impor
You can also auto-import functions exported from custom folders or third-party packages by configuring the [`imports` section](/docs/api/configuration/nuxt-config#imports) of your `nuxt.config` file.
::
## Built-in Auto-imports
### Built-in Auto-imports
### Nuxt Auto-imports
#### Nuxt Auto-imports
Nuxt auto-imports functions and composables to perform [data fetching](/docs/getting-started/data-fetching), get access to the [app context](/docs/api/composables/use-nuxt-app) and [runtime config](/docs/guide/going-further/runtime-config), manage [state](/docs/getting-started/state-management) or define components and plugins.
@ -34,7 +36,7 @@ Nuxt auto-imports functions and composables to perform [data fetching](/docs/get
</script>
```
### Vue Auto-imports
#### Vue Auto-imports
Vue 3 exposes Reactivity APIs like `ref` or `computed`, as well as lifecycle hooks and helpers that are auto-imported by Nuxt.
@ -46,7 +48,7 @@ Vue 3 exposes Reactivity APIs like `ref` or `computed`, as well as lifecycle hoo
</script>
```
### Using Vue and Nuxt composables
#### Using Vue and Nuxt composables
<!-- TODO: move to separate page with https://github.com/nuxt/nuxt/issues/14723 and add more information -->
@ -63,7 +65,7 @@ See the full explanation in this [comment](https://github.com/nuxt/nuxt/issues/1
::NeedContribution
::
#### Example
##### Example
**Example:** Breaking code:
@ -88,7 +90,7 @@ export const useMyComposable = () => {
}
```
## Directory-based Auto-imports
### Directory-based Auto-imports
Nuxt directly auto-imports files created in defined directories:
@ -96,7 +98,7 @@ Nuxt directly auto-imports files created in defined directories:
- `composables/` for [Vue composables](/docs/guide/directory-structure/composables).
- `utils/` for helper functions and other utilities.
## Explicit Imports
### Explicit Imports
Nuxt exposes every auto-import with the `#imports` alias that can be used to make the import explicit if needed:
@ -109,9 +111,9 @@ Nuxt exposes every auto-import with the `#imports` alias that can be used to mak
</script>
```
## Disable Auto-imports
### Disabling Auto-imports
In case you want to disable auto-imports, you can set `imports.autoImport` to `false` in your `nuxt.config.ts`.
If you want to disable auto-importing composables and utilities, you can set `imports.autoImport` to `false` in the `nuxt.config` file.
```ts [nuxt.config.ts]
export default defineNuxtConfig({
@ -121,4 +123,20 @@ export default defineNuxtConfig({
})
```
This will disable implicit auto imports completely but it's still possible to use [Explicit Imports](#explicit-imports).
This will disable auto-imports completely but it's still possible to use [explicit imports](#explicit-imports) from `#imports`.
## Auto-imported Components
Nuxt also automatically imports components from your `~/components` directory, although this is configured separately from auto-importing composables and utility functions.
:ReadMore{link="/docs/guide/directory-structure/components"}
To disable auto-importing components from your own `~/components` directory, you can set `components.dirs` to an empty array (though note that this will not affect components added by modules).
```ts [nuxt.config.ts]
export default defineNuxtConfig({
components: {
dirs: []
}
})
```

4
docs/2.guide/1.concepts/2.vuejs-development.md
View File

@ -36,7 +36,7 @@ Most applications need multiple pages and a way to navigate between them. This i
The `app.vue` file is the entry point, which represents the page displayed in the browser window.
Inside the `<template>` of the component, we use the `<Welcome>` component created in the `components/` directory without having to import it.
Inside the `<template>` of the component, we use the `<Welcome>` component created in the [`components/` directory](/docs/guide/directory-structure/components) without having to import it.
Try to replace the `<template>`’s content with a custom welcome message. The browser window on the right will automatically render the changes without reloading.
@ -103,7 +103,7 @@ Used with the `setup` keyword in the `<script>` definition, here is the above co
The goal of Nuxt 3 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).
- Write your own auto-imported reusable functions in the `composables/` directory.
- Write your own auto-imported reusable functions in the [`composables/` directory](/docs/guide/directory-structure/composables).
### TypeScript Support

2
docs/2.guide/1.concepts/4.server-engine.md
View File

@ -24,7 +24,7 @@ Key features include:
Check out [the h3 docs](https://github.com/unjs/h3) for more information.
::alert{type="info" icon=ℹ️}
Learn more about the API layer in the [`server/`](/docs/guide/directory-structure/server) directory.
Learn more about the API layer in the [`server/` directory](/docs/guide/directory-structure/server).
::
## Direct API Calls

2
docs/2.guide/1.concepts/5.modules.md
View File

@ -19,7 +19,7 @@ Best of all, Nuxt modules can be distributed in npm packages. This makes it poss
## The `modules` Property
Once you have installed the modules you can then add them to your `nuxt.config.ts` file under the `modules` property. Module developers usually provide additional steps and details for usage.
Once you have installed the modules you can then add them to your [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt.config) file under the `modules` property. Module developers usually provide additional steps and details for usage.
```ts{}[nuxt.config.ts]
export default defineNuxtConfig({

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

@ -7,7 +7,7 @@ head.title: ".nuxt/"
# .nuxt Directory
Nuxt uses the `.nuxt/` directory in development to generate your Vue application.
Nuxt uses the [`.nuxt/` directory](/docs/guide/directory-structure/nuxt) in development to generate your Vue application.
::alert{type=warning}
You should not touch any files inside since the whole directory will be re-created when running `nuxt dev`.

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

@ -7,7 +7,7 @@ head.title: ".output/"
# Output Directory
Nuxt creates the `.output/` directory when building your application for production.
Nuxt creates the [`.output/` directory](/docs/guide/directory-structure/output) when building your application for production.
::alert{type=warning}
You should not touch any files inside since the whole directory will be re-created when running `nuxt build`.

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

@ -7,7 +7,7 @@ head.title: "assets/"
# Assets Directory
The `assets/` directory is used to add all the website's assets that the build tool (webpack or Vite) will process.
The [`assets/` directory](/docs/guide/directory-structure/assets) is used to add all the website's assets that the build tool (webpack or Vite) will process.
The directory usually contains the following types of files:

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

@ -7,9 +7,9 @@ head.title: "components/"
# Components Directory
The `components/` directory is where you put all your Vue components which can then be imported inside your pages or other components ([learn more](https://vuejs.org/guide/essentials/component-basics.html#components-basics)).
The [`components/` directory](/docs/guide/directory-structure/components) is where you put all your Vue components which can then be imported inside your pages or other components ([learn more](https://vuejs.org/guide/essentials/component-basics.html#components-basics)).
Nuxt automatically imports any components in your `components/` directory (along with components that are registered by any modules you may be using).
Nuxt automatically imports any components in your [`components/` directory](/docs/guide/directory-structure/components) (along with components that are registered by any modules you may be using).
```bash
| components/

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

@ -7,7 +7,7 @@ description: Use the composables/ directory to auto-import your Vue composables
# Composables Directory
Nuxt 3 uses the `composables/` directory to automatically import your Vue composables into your application using [auto-imports](/docs/guide/concepts/auto-imports)!
Nuxt 3 uses the [`composables/` directory](/docs/guide/directory-structure/composables) to automatically import your Vue composables into your application using [auto-imports](/docs/guide/concepts/auto-imports)!
Under the hood, Nuxt auto generates the file `.nuxt/imports.d.ts` to declare the types.
@ -75,7 +75,7 @@ export const useHello = () => {
## How Files Are Scanned
Nuxt only scans files at the top level of the `composables/` directory, e.g.:
Nuxt only scans files at the top level of the [`composables/` directory](/docs/guide/directory-structure/composables), e.g.:
```bash
composables

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

@ -7,7 +7,7 @@ description: The Content module reads the content/ directory to create a file-ba
# Content Directory
The [Nuxt Content module](https://content.nuxtjs.org) reads the `content/` directory in your project and parses `.md`, `.yml`, `.csv` and `.json` files to create a file-based CMS for your application.
The [Nuxt Content module](https://content.nuxtjs.org) 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.
::list{type=success}
@ -55,7 +55,7 @@ export default defineNuxtConfig({
### Create Content
Place your markdown files inside the `content/` directory in the root directory of your project:
Place your markdown files inside the [`content/` directory](/docs/guide/directory-structure/content) in the root directory of your project:
```md [content/index.md]
# Hello Content

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

@ -9,7 +9,7 @@ head.title: "layouts/"
Nuxt provides a customizable layouts framework you can use throughout your application, ideal for extracting common UI or code patterns into reusable layout components.
Layouts are placed in the `layouts/` directory and will be automatically loaded via asynchronous import when used. Layouts are used by adding `<NuxtLayout>` to your `app.vue`, and either setting a `layout` property as part of your page metadata (if you are using the `~/pages` integration), or by manually specifying it as a prop to `<NuxtLayout>`. (**Note**: The layout name is normalized to kebab-case, so `someLayout` becomes `some-layout`.)
Layouts are placed in the [`layouts/` directory](/docs/guide/directory-structure/layouts) and will be automatically loaded via asynchronous import when used. Layouts are used by adding `<NuxtLayout>` to your `app.vue`, and either setting a `layout` property as part of your page metadata (if you are using the `~/pages` integration), or by manually specifying it as a prop to `<NuxtLayout>`. (**Note**: The layout name is normalized to kebab-case, so `someLayout` becomes `some-layout`.)
If you only have a single layout in your application, we recommend using [app.vue](/docs/guide/directory-structure/app) instead.

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

@ -16,8 +16,8 @@ Route middleware run within the Vue part of your Nuxt app. Despite the similar n
There are three kinds of route middleware:
1. Anonymous (or inline) route middleware, which are defined directly in the pages where they are used.
2. Named route middleware, which are placed in the `middleware/` directory and will be automatically loaded via asynchronous import when used on a page. (**Note**: The route middleware name is normalized to kebab-case, so `someMiddleware` becomes `some-middleware`.)
3. Global route middleware, which are placed in the `middleware/` directory (with a `.global` suffix) and will be automatically run on every route change.
2. Named route middleware, which are placed in the [`middleware/` directory](/docs/guide/directory-structure/middleware) and will be automatically loaded via asynchronous import when used on a page. (**Note**: The route middleware name is normalized to kebab-case, so `someMiddleware` becomes `some-middleware`.)
3. Global route middleware, which are placed in the [`middleware/` directory](/docs/guide/directory-structure/middleware) (with a `.global` suffix) and will be automatically run on every route change.
The first two kinds of route middleware can be [defined in `definePageMeta`](/docs/guide/directory-structure/pages).

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

@ -7,7 +7,7 @@ description: Use the modules/ directory to automatically register local modules
# Modules Directory
Nuxt scans the `modules/` directory and loads them before starting. It is a good place to place any local modules you develop while building your application.
Nuxt scans the [`modules/` directory](/docs/guide/directory-structure/modules) and loads them before starting. It is a good place to place any local modules you develop while building your application.
The auto-registered files patterns are:
- `modules/*/index.ts`

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

@ -7,4 +7,4 @@ head.title: "node_modules/"
# Node modules Directory
The package manager ([`npm`](https://docs.npmjs.com/cli/v7/commands/npm) or [`yarn`](https://yarnpkg.com/) or [`pnpm`](https://pnpm.io/cli/install)) creates the `node_modules/` directory to store the dependencies of your project.
The package manager ([`npm`](https://docs.npmjs.com/cli/v7/commands/npm) or [`yarn`](https://yarnpkg.com/) or [`pnpm`](https://pnpm.io/cli/install)) creates the [`node_modules/` directory](/docs/guide/directory-structure/node_modules) to store the dependencies of your project.

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

@ -122,7 +122,7 @@ Navigating to `/users-admins/123` would render:
<p>admins - 123</p>
```
If you want to access the route using Composition API, there is a global `useRoute` function that will allow you to access the route just like `this.$route` in the Options API.
If you want to access the route using Composition API, there is a global [`useRoute`](/docs/api/composables/use-route) function that will allow you to access the route just like `this.$route` in the Options API.
```vue
<script setup>

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

@ -10,12 +10,12 @@ head.title: "plugins/"
Nuxt automatically reads the files in your `plugins` directory and loads them at the creation of the Vue application. You can use `.server` or `.client` suffix in the file name to load a plugin only on the server or client side.
::alert{type=warning}
All plugins in your `plugins/` directory are auto-registered, so you should not add them to your `nuxt.config` separately.
All plugins in your [`plugins/` directory](/docs/guide/directory-structure/plugins) are auto-registered, so you should not add them to your `nuxt.config` separately.
::
## Which Files Are Registered
Only files at the top level of the `plugins/` directory (or index files within any subdirectories) will be registered as plugins.
Only files at the top level of the [`plugins/` directory](/docs/guide/directory-structure/plugins) (or index files within any subdirectories) will be registered as plugins.
For example:

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

@ -7,8 +7,8 @@ head.title: "public/"
# Public Directory
The `public/` directory is directly served at the server root and contains public files that have to keep their names (e.g. `robots.txt`) _or_ likely won't change (e.g. `favicon.ico`).
The [`public/` directory](/docs/guide/directory-structure/public) is directly served at the server root and contains public files that have to keep their names (e.g. `robots.txt`) _or_ likely won't change (e.g. `favicon.ico`).
::alert{icon=💡}
This is known as the [`static/`](https://nuxtjs.org/docs/directory-structure/static) directory in Nuxt 2.
This is known as the [`static/` directory](https://nuxtjs.org/docs/directory-structure/static) in Nuxt 2.
::

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

@ -7,10 +7,10 @@ description: Use the utils/ directory to auto-import your utility functions thro
# Utils Directory
Nuxt 3 uses the `utils/` directory to automatically import helper functions and other utilities throughout your application using [auto-imports](/docs/guide/concepts/auto-imports)!
Nuxt 3 uses the [`utils/` directory](/docs/guide/directory-structure/utils) to automatically import helper functions and other utilities throughout your application using [auto-imports](/docs/guide/concepts/auto-imports)!
::alert{type=info}
The main purpose of the `utils/` directory 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.
The way `utils/` auto-imports work and are scanned is identical to [the composables/ directory](/docs/guide/directory-structure/composables). You can see examples and more information about how they work in that section of the docs.
::

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

@ -69,7 +69,7 @@ Allows Nuxt app state to be restored from `sessionStorage` when reloading the pa
::alert{type=warning icon=⚠️}
Consider carefully before enabling this as it can cause unexpected behavior,
and consider providing explicit keys to `useState` as auto-generated keys may not match across builds.
and consider providing explicit keys to [`useState`](/docs/api/composables/use-state) as auto-generated keys may not match across builds.
::
```ts [nuxt.config.ts]

6
docs/2.guide/3.going-further/7.layers.md
View File

@ -6,7 +6,7 @@ description: Nuxt provides a powerful system that allows you to extend the defau
Nuxt layers are a powerful feature that you can use to share and reuse partial Nuxt applications within a monorepo, or from a git repository or npm package. The layers structure is almost identical to a standard Nuxt application, which makes them easy to author and maintain. ([Read More](/docs/getting-started/layers))
A minimal Nuxt layer directory should contain a `nuxt.config.ts` file to indicate it is a layer.
A minimal Nuxt layer directory should contain a [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt.config) file to indicate it is a layer.
```ts{}[base/nuxt.config.ts]
export default defineNuxtConfig({})
@ -18,7 +18,7 @@ Additionally, certain other files in the layer directory will be auto-scanned an
- `composables/*` - Extend the default composables
- `pages/*` - Extend the default pages
- `server/*` - Extend the default server endpoints & middleware
- `nuxt.config.ts` - Extend the default nuxt config
- [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt.config)- Extend the default nuxt config
- `app.config.ts` - Extend the default app config
## Basic Example
@ -62,7 +62,7 @@ Additionally, certain other files in the layer directory will be auto-scanned an
::
::alert{type="info"}
If you're interested in deepening your understanding about layers, consider examining [a fully fleshed out `nuxt.config.ts` file on the Docus platform](https://github.com/nuxt-themes/docus/blob/main/nuxt.config.ts).
If you're interested in deepening your understanding about layers, consider examining [a fully fleshed out [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt.config) file on the Docus platform](https://github.com/nuxt-themes/docus/blob/main/nuxt.config.ts).
::
## Starter Template

26
docs/2.guide/3.going-further/9.debugging.md
View File

@ -60,6 +60,32 @@ You may need to update the config below with a path to your web browser. For mor
}
```
### Example JetBrains IDEs Debug Configuration
You can also debug your Nuxt app in JetBrains IDEs such as IntelliJ IDEA, WebStorm, or PhpStorm.
1. Create a new file in your project root directory and name it `nuxt.run.xml`.
2. Open the `nuxt.run.xml` file and paste the following debug configuration:
```xml
<component name="ProjectRunConfigurationManager">
<configuration default="false" name="client: chrome" type="JavascriptDebugType" uri="http://localhost:3000" useFirstLineBreakpoints="true">
<method v="2" />
</configuration>
<configuration default="false" name="server: nuxt" type="NodeJSConfigurationType" application-parameters="dev" path-to-js-file="$PROJECT_DIR$/node_modules/nuxi/bin/nuxi.mjs" working-dir="$PROJECT_DIR$">
<method v="2" />
</configuration>
<configuration default="false" name="fullstack: nuxt" type="CompoundRunConfigurationType">
<toRun name="client: chrome" type="JavascriptDebugType" />
<toRun name="server: nuxt" type="NodeJSConfigurationType" />
<method v="2" />
</configuration>
</component>
```
### Other IDEs
If you have another IDE and would like to contribute sample configuration, feel free to [open a PR](https://github.com/nuxt/nuxt/edit/main/docs/2.guide/3.going-further/9.debugging.md)!

10
docs/3.api/1.composables/use-async-data.md
View File

@ -1,12 +1,12 @@
---
description: useAsyncData provides access to data that resolves asynchronously.
---
# `useAsyncData`
# useAsyncData
Within your pages, components, and plugins you can use useAsyncData to get access to data that resolves asynchronously.
::alert{type=warning}
`useAsyncData` is a composable meant to be called directly in a setup function, plugin, or route middleware. It returns reactive composables and handles adding responses to the Nuxt payload so they can be passed from server to client without re-fetching the data on client side when the page hydrates.
[`useAsyncData`](/docs/api/composables/use-async-data) is a composable meant to be called directly in a setup function, plugin, or route middleware. It returns reactive composables and handles adding responses to the Nuxt payload so they can be passed from server to client without re-fetching the data on client side when the page hydrates.
::
## Type
@ -50,7 +50,7 @@ type AsyncDataRequestStatus = 'idle' | 'pending' | 'success' | 'error'
## Params
* **key**: a unique key to ensure that data fetching can be properly de-duplicated across requests. If you do not provide a key, then a key that is unique to the file name and line number of the instance of `useAsyncData` will be generated for you.
* **key**: a unique key to ensure that data fetching can be properly de-duplicated across requests. If you do not provide a key, then a key that is unique to the file name and line number of the instance of [`useAsyncData`](/docs/api/composables/use-async-data) will be generated for you.
* **handler**: an asynchronous function that returns a value
* **options**:
* _lazy_: whether to resolve the async function after loading the route, instead of blocking client-side navigation (defaults to `false`)
@ -74,7 +74,7 @@ Under the hood, `lazy: false` uses `<Suspense>` to block the loading of the rout
By default, Nuxt waits until a `refresh` is finished before it can be executed again.
::alert{type=warning}
If you have not fetched data on the server (for example, with `server: false`), then the data _will not_ be fetched until hydration completes. This means even if you await `useAsyncData` on the client side, `data` will remain `null` within `<script setup>`.
If you have not fetched data on the server (for example, with `server: false`), then the data _will not_ be fetched until hydration completes. This means even if you await [`useAsyncData`](/docs/api/composables/use-async-data) on the client side, `data` will remain `null` within `<script setup>`.
::
## Example
@ -105,7 +105,7 @@ const { data: posts } = await useAsyncData(
```
::alert{type=warning}
`useAsyncData` is a reserved function name transformed by the compiler, so you should not name your own function `useAsyncData`.
[`useAsyncData`](/docs/api/composables/use-async-data) is a reserved function name transformed by the compiler, so you should not name your own function [`useAsyncData`](/docs/api/composables/use-async-data) .
::
::ReadMore{link="/docs/getting-started/data-fetching"}

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

@ -38,7 +38,7 @@ counter.value = counter.value || Math.round(Math.random() * 1000)
</script>
```
:button-link[Open on StackBlitz]{href="https://stackblitz.com/github/nuxt/nuxt/tree/main/examples/composables/use-cookie?terminal=dev&file=app.vue" blank}
:button-link[Open on StackBlitz]{href="https://stackblitz.com/github/nuxt/examples/tree/main/advanced/use-cookie?terminal=dev&file=app.vue" blank}
## Options

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

@ -4,7 +4,7 @@ This composable provides a convenient wrapper around [`useAsyncData`](/docs/api/
It automatically generates a key based on URL and fetch options, provides type hints for request url based on server routes, and infers API response type.
::alert{type=warning}
`useFetch` is a composable meant to be called directly in a setup function, plugin, or route middleware. It returns reactive composables and handles adding responses to the Nuxt payload so they can be passed from server to client without re-fetching the data on client side when the page hydrates.
[`useFetch`](/docs/api/composables/use-fetch) is a composable meant to be called directly in a setup function, plugin, or route middleware. It returns reactive composables and handles adding responses to the Nuxt payload so they can be passed from server to client without re-fetching the data on client side when the page hydrates.
::
## Type
@ -60,8 +60,8 @@ interface AsyncDataExecuteOptions {
All fetch options can be given a `computed` or `ref` value. These will be watched and new requests made automatically with any new values if they are updated.
::
* **Options (from `useAsyncData`)**:
* `key`: a unique key to ensure that data fetching can be properly de-duplicated across requests, if not provided, it will be generated based on the static code location where `useAsyncData` is used.
* **Options (from [`useAsyncData`](/docs/api/composables/use-async-data) )**:
* `key`: a unique key to ensure that data fetching can be properly de-duplicated across requests, if not provided, it will be generated based on the static code location where [`useAsyncData`](/docs/api/composables/use-async-data) is used.
* `server`: Whether to fetch the data on the server (defaults to `true`).
* `default`: A factory function to set the default value of the data, before the async function resolves - particularly useful with the `lazy: true` option.
* `pick`: Only pick specified keys in this array from the `handler` function result.
@ -70,7 +70,7 @@ All fetch options can be given a `computed` or `ref` value. These will be watche
* `immediate`: When set to `false`, will prevent the request from firing immediately. (defaults to `true`)
::alert{type=warning}
If you provide a function or ref as the `url` parameter, or if you provide functions as arguments to the `options` parameter, then the `useFetch` call will not match other `useFetch` calls elsewhere in your codebase, even if the options seem to be identical. If you wish to force a match, you may provide your own key in `options`.
If you provide a function or ref as the `url` parameter, or if you provide functions as arguments to the `options` parameter, then the [`useFetch`](/docs/api/composables/use-fetch) call will not match other [`useFetch`](/docs/api/composables/use-fetch) calls elsewhere in your codebase, even if the options seem to be identical. If you wish to force a match, you may provide your own key in `options`.
::
## Return Values
@ -84,7 +84,7 @@ If you provide a function or ref as the `url` parameter, or if you provide funct
By default, Nuxt waits until a `refresh` is finished before it can be executed again.
::alert{type=warning}
If you have not fetched data on the server (for example, with `server: false`), then the data _will not_ be fetched until hydration completes. This means even if you await `useFetch` on client-side, `data` will remain null within `<script setup>`.
If you have not fetched data on the server (for example, with `server: false`), then the data _will not_ be fetched until hydration completes. This means even if you await [`useFetch`](/docs/api/composables/use-fetch) on client-side, `data` will remain null within `<script setup>`.
::
## Example
@ -131,7 +131,7 @@ const { data, pending, error, refresh } = await useFetch('/api/auth/login', {
```
::alert{type=warning}
`useFetch` is a reserved function name transformed by the compiler, so you should not name your own function `useFetch`.
[`useFetch`](/docs/api/composables/use-fetch) is a reserved function name transformed by the compiler, so you should not name your own function `useFetch`.
::
::LinkExample{link="/docs/examples/advanced/use-custom-fetch-composable"}

2
docs/3.api/1.composables/use-head-safe.md
View File

@ -8,7 +8,7 @@ The `useHeadSafe` composable is a wrapper around the [`useHead`](/docs/api/compo
## Usage
You can pass all the same values as `useHead`
You can pass all the same values as [`useHead`](/docs/api/composables/use-head)
```ts
useHeadSafe({

8
docs/3.api/1.composables/use-head.md
View File

@ -2,9 +2,9 @@
description: useHead customizes the head properties of individual pages of your Nuxt app.
---
# `useHead`
# useHead
The `useHead` composable function allows you to manage your head tags in a programmatic and reactive way, powered by [Unhead](https://unhead.harlanzw.com/). If the data comes from a user or other untrusted source, we recommend you check out [`useHeadSafe`](/docs/api/composables/use-head-safe)
The [`useHead`](/docs/api/composables/use-head) composable function allows you to manage your head tags in a programmatic and reactive way, powered by [Unhead](https://unhead.harlanzw.com/). If the data comes from a user or other untrusted source, we recommend you check out [`useHeadSafe`](/docs/api/composables/use-head-safe)
:ReadMore{link="/docs/getting-started/seo-meta"}
@ -14,7 +14,7 @@ The `useHead` composable function allows you to manage your head tags in a progr
useHead(meta: MaybeComputedRef<MetaObject>): void
```
Below are the non-reactive types for `useHead`.
Below are the non-reactive types for [`useHead`](/docs/api/composables/use-head) .
```ts
interface MetaObject {
@ -34,7 +34,7 @@ interface MetaObject {
See [@unhead/schema](https://github.com/unjs/unhead/blob/main/packages/schema/src/schema.ts) for more detailed types.
::alert{type=info}
The properties of `useHead` can be dynamic, accepting `ref`, `computed` and `reactive` properties. `meta` parameter can also accept a function returning an object to make the entire object reactive.
The properties of [`useHead`](/docs/api/composables/use-head) can be dynamic, accepting `ref`, `computed` and `reactive` properties. `meta` parameter can also accept a function returning an object to make the entire object reactive.
::
## Parameters

4
docs/3.api/1.composables/use-lazy-async-data.md
View File

@ -4,13 +4,13 @@ description: This wrapper around useAsyncData triggers navigation immediately.
# `useLazyAsyncData`
`useLazyAsyncData` provides a wrapper around `useAsyncData` that triggers navigation before the handler is resolved by setting the `lazy` option to `true`.
`useLazyAsyncData` provides a wrapper around [`useAsyncData`](/docs/api/composables/use-async-data) that triggers navigation before the handler is resolved by setting the `lazy` option to `true`.
## Description
By default, [useAsyncData](/docs/api/composables/use-async-data) blocks navigation until its async handler is resolved.
> `useLazyAsyncData` has the same signature as `useAsyncData`.
> `useLazyAsyncData` has the same signature as [`useAsyncData`](/docs/api/composables/use-async-data) .
:ReadMore{link="/docs/api/composables/use-async-data"}

4
docs/3.api/1.composables/use-lazy-fetch.md
View File

@ -4,13 +4,13 @@ description: This wrapper around useFetch triggers navigation immediately.
# `useLazyFetch`
`useLazyFetch` provides a wrapper around `useFetch` that triggers navigation before the handler is resolved by setting the `lazy` option to `true`.
`useLazyFetch` provides a wrapper around [`useFetch`](/docs/api/composables/use-fetch) that triggers navigation before the handler is resolved by setting the `lazy` option to `true`.
## Description
By default, [useFetch](/docs/api/composables/use-fetch) blocks navigation until its async handler is resolved.
> `useLazyFetch` has the same signature as `useFetch`.
> [`useLazyFetch`](/docs/api/composables/use-lazy-fetch) has the same signature as `useFetch`.
:ReadMore{link="/docs/api/composables/use-fetch"}

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

@ -87,21 +87,19 @@ await nuxtApp.callHook('my-plugin:init')
`payload` exposes data and state variables from server side to client side. The following keys will be available on the client after they have been passed from the server side:
- **serverRendered** (boolean) - Indicates if response is server-side-rendered.
- **data** (object) - When you fetch the data from an API endpoint using either `useFetch` or `useAsyncData`, resulting payload can be accessed from the `payload.data`. This data is cached and helps you prevent fetching the same data in case an identical request is made more than once.
- **data** (object) - When you fetch the data from an API endpoint using either [`useFetch`](/docs/api/composables/use-fetch) or [`useAsyncData`](/docs/api/composables/use-async-data) , resulting payload can be accessed from the `payload.data`. This data is cached and helps you prevent fetching the same data in case an identical request is made more than once.
```vue [app.vue]
export default defineComponent({
async setup() {
const { data } = await useAsyncData('count', () => $fetch('/api/count'))
}
})
<script setup>
const { data } = await useAsyncData('count', () => $fetch('/api/count'))
</script>
```
After fetching the value of `count` using `useAsyncData` in the example above, if you access `payload.data`, you will see `{ count: 1 }` recorded there. The value of `count` is updated whenever the page count increases.
After fetching the value of `count` using [`useAsyncData`](/docs/api/composables/use-async-data) in the example above, if you access `payload.data`, you will see `{ count: 1 }` recorded there. The value of `count` is updated whenever the page count increases.
When accessing the same `payload.data` from [ssrcontext](#ssrcontext), you can access the same value on the server side as well.
- **state** (object) - When you use `useState` composable in Nuxt to set shared state, this state data is accessed through `payload.state.[name-of-your-state]`.
- **state** (object) - When you use [`useState`](/docs/api/composables/use-state) composable in Nuxt to set shared state, this state data is accessed through `payload.state.[name-of-your-state]`.
```js [plugins/my-plugin.ts]
export const useColor = () => useState<string>('color', () => 'pink')

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

@ -1,6 +1,6 @@
# `useNuxtData`
`useNuxtData` gives you access to the current cached value of `useAsyncData`, `useLazyAsyncData`, `useFetch` and `useLazyFetch` with explicitly provided key.
`useNuxtData` gives you access to the current cached value of [`useAsyncData`](/docs/api/composables/use-async-data) , `useLazyAsyncData`, [`useFetch`](/docs/api/composables/use-fetch) and [`useLazyFetch`](/docs/api/composables/use-lazy-fetch) with explicitly provided key.
## Type

6
docs/3.api/1.composables/use-request-headers.md
View File

@ -5,7 +5,7 @@ description: "Use useRequestHeaders to access the incoming request headers."
# `useRequestHeaders`
You can use built-in `useRequestHeaders` composable to access the incoming request headers within your pages, components, and plugins.
You can use built-in [`useRequestHeaders`](/docs/api/composables/use-request-headers) composable to access the incoming request headers within your pages, components, and plugins.
```js
// Get all request headers
@ -16,12 +16,12 @@ const headers = useRequestHeaders(['cookie'])
```
::alert{icon=👉}
In the browser, `useRequestHeaders` will return an empty object.
In the browser, [`useRequestHeaders`](/docs/api/composables/use-request-headers) will return an empty object.
::
## Example
We can use `useRequestHeaders` to access and proxy the initial request's `authorization` header to any future internal requests during SSR.
We can use [`useRequestHeaders`](/docs/api/composables/use-request-headers) to access and proxy the initial request's `authorization` header to any future internal requests during SSR.
The example below adds the `authorization` request header to an isomorphic `$fetch` call.

4
docs/3.api/1.composables/use-route.md
View File

@ -5,13 +5,13 @@ description: The useRoute composable returns the current route.
# `useRoute`
The `useRoute` composable returns the current route and must be called in a `setup` function, plugin, or route middleware.
The [`useRoute`](/docs/api/composables/use-route) composable returns the current route and must be called in a `setup` function, plugin, or route middleware.
Within the template of a Vue component, you can access the route using `$route`.
## Example
In the following example, we call an API via `useFetch` using a dynamic page parameter - `slug` - as part of the URL.
In the following example, we call an API via [`useFetch`](/docs/api/composables/use-fetch) using a dynamic page parameter - `slug` - as part of the URL.
```html [~/pages/[slug].vue]
<script setup>

6
docs/3.api/1.composables/use-router.md
View File

@ -5,11 +5,11 @@ description: "The useRouter composable returns the router instance."
# `useRouter`
The `useRouter` composable returns the router instance and must be called in a setup function, plugin, or route middleware.
The [`useRouter`](/docs/api/composables/use-router) composable returns the router instance and must be called in a setup function, plugin, or route middleware.
Within the template of a Vue component, you can access the router using `$router` instead.
If you have a `pages/` folder, `useRouter` is identical in behavior to the one provided by `vue-router`. Feel free to read the router documentation for more information on what each method does.
If you have a `pages/` folder, [`useRouter`](/docs/api/composables/use-router) is identical in behavior to the one provided by `vue-router`. Feel free to read the router documentation for more information on what each method does.
::ReadMore{link="https://router.vuejs.org/api/interfaces/Router.html#Properties-currentRoute"}
::
@ -63,4 +63,4 @@ However, Nuxt has a concept of **route middleware** that simplifies the implemen
## Universal Router Instance
If you do not have a `pages/` folder, then `useRouter` will return a universal router instance with similar helper methods, but be aware that not all features may be supported or behave in exactly the same way as with `vue-router`.
If you do not have a `pages/` folder, then [`useRouter`](/docs/api/composables/use-router) will return a universal router instance with similar helper methods, but be aware that not all features may be supported or behave in exactly the same way as with `vue-router`.

2
docs/3.api/1.composables/use-runtime-config.md
View File

@ -1,6 +1,6 @@
# `useRuntimeConfig`
The `useRuntimeConfig` composable is used to expose config variables within your app.
The [`useRuntimeConfig`](/docs/api/composables/use-runtime-config) composable is used to expose config variables within your app.
## Usage

4
docs/3.api/1.composables/use-server-seo-meta.md
View File

@ -4,8 +4,8 @@ description: The useServerSeoMeta composable lets you define your site's SEO met
# `useServerSeoMeta`
Just like [`useSeoMeta`](/docs/api/composables/use-seo-meta), `useServerSeoMeta` composable lets you define your site's SEO meta tags as a flat object with full TypeScript support.
Just like [`useSeoMeta`](/docs/api/composables/use-seo-meta), [`useServerSeoMeta`](/docs/api/composables/use-server-seo-meta) composable lets you define your site's SEO meta tags as a flat object with full TypeScript support.
:ReadMore{link="/docs/api/composables/use-seo-meta"}
In most instances, the meta doesn't need to be reactive as robots will only scan the initial load. So we recommend using `useServerSeoMeta` as a performance-focused utility that will not do anything (or return a `head` object) on the client.
In most instances, the meta doesn't need to be reactive as robots will only scan the initial load. So we recommend using [`useServerSeoMeta`](/docs/api/composables/use-server-seo-meta) as a performance-focused utility that will not do anything (or return a `head` object) on the client.
Parameters are exactly the same as with [`useSeoMeta`](/docs/api/composables/use-seo-meta)

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

@ -10,16 +10,16 @@ useState<T>(init?: () => T | Ref<T>): Ref<T>
useState<T>(key: string, init?: () => T | Ref<T>): Ref<T>
```
* **key**: A unique key ensuring that data fetching is properly de-duplicated across requests. If you do not provide a key, then a key that is unique to the file and line number of the instance of `useState` will be generated for you.
* **key**: A unique key ensuring that data fetching is properly de-duplicated across requests. If you do not provide a key, then a key that is unique to the file and line number of the instance of [`useState`](/docs/api/composables/use-state) will be generated for you.
* **init**: A function that provides initial value for the state when not initiated. This function can also return a `Ref`.
* **T**: (typescript only) Specify the type of state
::alert{type=warning}
Because the data inside `useState` will be serialized to JSON, it is important that it does not contain anything that cannot be serialized, such as classes, functions or symbols.
Because the data inside [`useState`](/docs/api/composables/use-state) will be serialized to JSON, it is important that it does not contain anything that cannot be serialized, such as classes, functions or symbols.
::
::alert{type=warning}
`useState` is a reserved function name transformed by the compiler, so you should not name your own function `useState`.
[`useState`](/docs/api/composables/use-state) is a reserved function name transformed by the compiler, so you should not name your own function `useState`.
::
::ReadMore{link="/docs/getting-started/state-management"}

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

@ -5,7 +5,7 @@ description: The NuxtPage component is required to display pages located in the
# `<NuxtPage>`
`<NuxtPage>` is a built-in component that comes with Nuxt. `NuxtPage` is required to display top-level or nested pages located in the `pages/` directory.
`<NuxtPage>` is a built-in component that comes with Nuxt. `NuxtPage` is required to display top-level or nested pages located in the [`pages/` directory](/docs/guide/directory-structure/pages).
`NuxtPage` is a wrapper around [`<RouterView>`](https://router.vuejs.org/api/interfaces/RouterViewProps.html#interface-routerviewprops) component from Vue Router. `NuxtPage` component accepts same `name` and `route` props.
@ -44,7 +44,7 @@ definePageMeta({
</script>
```
:button-link[Open on StackBlitz]{href="https://stackblitz.com/github/nuxt/nuxt/tree/main/examples/routing/pages?file=app.vue" blank}
:button-link[Open on StackBlitz]{href="https://stackblitz.com/github/nuxt/examples/tree/main/routing/pages?file=app.vue" blank}
## Accessing a page's component ref
@ -71,7 +71,7 @@ In addition, `NuxtPage` also accepts custom props that you may need to pass furt
<NuxtPage :foobar="123" />
```
For example, in above example, value of `foobar` will be available using `attrs.foobar`.
For example, in the above example, the value of `foobar` will be available using `$attrs.foobar` in the template or `useAttrs().foobar` in `<script setup>`.
::ReadMore{link="/docs/guide/directory-structure/app"}
::

8
docs/3.api/2.components/4.nuxt-link.md
View File

@ -24,8 +24,6 @@ In this example, we use `<NuxtLink>` component to link to a website.
</template>
```
:button-link[Open on StackBlitz]{href="https://stackblitz.com/github/nuxt/nuxt/tree/main/examples/routing/nuxt-link?terminal=dev&file=/pages/index.vue" blank}
### Internal Routing
In this example, we use `<NuxtLink>` component to link to another page of the application.
@ -39,8 +37,6 @@ In this example, we use `<NuxtLink>` component to link to another page of the ap
</template>
```
:button-link[Open on StackBlitz]{href="https://stackblitz.com/github/nuxt/nuxt/tree/main/examples/routing/nuxt-link?terminal=dev&file=/pages/index.vue" blank}
### `target` and `rel` Attributes
In this example, we use `<NuxtLink>` with `target`, `rel`, and `noRel` props.
@ -69,8 +65,6 @@ In this example, we use `<NuxtLink>` with `target`, `rel`, and `noRel` props.
</template>
```
:button-link[Open on StackBlitz]{href="https://stackblitz.com/github/nuxt/nuxt/tree/main/examples/routing/nuxt-link?terminal=dev&file=/pages/index.vue" blank}
## Props
- **to**: Any URL or a [route location object](https://router.vuejs.org/api/interfaces/RouteLocation.html) from Vue Router
@ -104,8 +98,6 @@ export default defineNuxtLink({
You can then use `<MyNuxtLink />` component as usual with your new defaults.
:button-link[Open on StackBlitz]{href="https://stackblitz.com/github/nuxt/nuxt/tree/main/examples/routing/nuxt-link?terminal=dev&file=/components/MyNuxtLink.ts" blank}
### `defineNuxtLink` Signature
```ts

4
docs/3.api/2.components/5.nuxt-loading-indicator.md
View File

@ -11,13 +11,15 @@ Add `<NuxtLoadingIndicator/>` in your `app.vue` or layouts.
```vue [app.vue]
<template>
<NuxtLayout>
<div>
<NuxtLoadingIndicator /> <!-- here -->
<NuxtPage />
</div>
</NuxtLayout>
</template>
```
:button-link[Open on StackBlitz]{href="https://stackblitz.com/github/nuxt/nuxt/tree/main/examples/routing/pages?terminal=dev&file=/app.vue" blank}
:button-link[Open on StackBlitz]{href="https://stackblitz.com/github/nuxt/examples/tree/main/routing/pages?file=app.vue&terminal=dev" blank}
::alert{type=warning}
If you are changing layouts as well as page, the page transition you set here will not run. Instead, you should set a layout transition.

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

@ -9,7 +9,7 @@ Nuxt uses [ofetch](https://github.com/unjs/ofetch) to expose globally the `$fetc
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**.
However, using `$fetch` in components without wrapping it with `useAsyncData` 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.
However, 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.
We recommend to use [`useFetch`](https://nuxt.com/docs/api/composables/use-fetch) or [`useAsyncData`](https://nuxt.com/docs/api/composables/use-async-data) + `$fetch` to prevent double data fetching when fetching the component data.

4
docs/3.api/3.utils/clear-nuxt-data.md
View File

@ -1,6 +1,6 @@
# `clearNuxtData`
Delete cached data, error status and pending promises of `useAsyncData` and `useFetch`.
Delete cached data, error status and pending promises of [`useAsyncData`](/docs/api/composables/use-async-data) and `useFetch`.
This method is useful if you want to invalidate the data fetching for another page.
@ -12,4 +12,4 @@ clearNuxtData (keys?: string | string[] | ((key: string) => boolean)): void
## Parameters
* `keys`: One or an array of keys that are used in `useAsyncData` to delete their cached data. If no keys are provided, **all data** will be invalidated.
* `keys`: One or an array of keys that are used in [`useAsyncData`](/docs/api/composables/use-async-data) to delete their cached data. If no keys are provided, **all data** will be invalidated.

2
docs/3.api/3.utils/clear-nuxt-state.md
View File

@ -12,4 +12,4 @@ clearNuxtState (keys?: string | string[] | ((key: string) => boolean)): void
## Parameters
* `keys`: One or an array of keys that are used in `useState` to delete their cached state. If no keys are provided, **all state** will be invalidated.
* `keys`: One or an array of keys that are used in [`useState`](/docs/api/composables/use-state) to delete their cached state. If no keys are provided, **all state** will be invalidated.

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

@ -6,7 +6,7 @@ title: "defineNuxtRouteMiddleware"
Create named route middleware using `defineNuxtRouteMiddleware` helper function.
Route middleware are stored in the `middleware/` directory of your Nuxt application (unless [set otherwise](/docs/api/configuration/nuxt-config#middleware)).
Route middleware are stored in the [`middleware/` directory](/docs/guide/directory-structure/middleware) of your Nuxt application (unless [set otherwise](/docs/api/configuration/nuxt-config#middleware)).
## Type
@ -46,7 +46,7 @@ The above route middleware will redirect a user to the custom error page defined
### Redirection
Use `useState` in combination with `navigateTo` helper function inside the route middleware to redirect users to different routes based on their authentication status:
Use [`useState`](/docs/api/composables/use-state) in combination with `navigateTo` helper function inside the route middleware to redirect users to different routes based on their authentication status:
```ts [middleware/auth.ts]
export default defineNuxtRouteMiddleware((to, from) => {

4
docs/3.api/3.utils/define-page-meta.md
View File

@ -4,7 +4,7 @@ title: "definePageMeta"
# `definePageMeta`
`definePageMeta` is a compiler macro that you can use to set metadata for your **page** components located in the `pages/` directory (unless [set otherwise](/docs/api/configuration/nuxt-config#pages)). This way you can set custom metadata for each static or dynamic route of your Nuxt application.
`definePageMeta` is a compiler macro that you can use to set metadata for your **page** components located in the [`pages/` directory](/docs/guide/directory-structure/pages) (unless [set otherwise](/docs/api/configuration/nuxt-config#pages)). This way you can set custom metadata for each static or dynamic route of your Nuxt application.
```vue [pages/some-page.vue]
<script setup>
@ -161,7 +161,7 @@ The example below shows how the middleware can be defined using a `function` dir
### Defining Layout
You can define the layout that matches the layout's file name located (by default) in the `layouts/` directory. You can also disable the layout by setting the `layout` to `false`:
You can define the layout that matches the layout's file name located (by default) in the [`layouts/` directory](/docs/guide/directory-structure/layouts). You can also disable the layout by setting the `layout` to `false`:
```vue [pages/some-page.vue]
<script setup>

6
docs/3.api/3.utils/refresh-nuxt-data.md
View File

@ -5,7 +5,7 @@ description: refreshNuxtData refetches all data from the server and updates the
# `refreshNuxtData`
`refreshNuxtData` re-fetches all data from the server and updates the page as well as invalidates the cache of `useAsyncData`, `useLazyAsyncData`, `useFetch` and `useLazyFetch`.
`refreshNuxtData` re-fetches all data from the server and updates the page as well as invalidates the cache of [`useAsyncData`](/docs/api/composables/use-async-data) , `useLazyAsyncData`, [`useFetch`](/docs/api/composables/use-fetch) and `useLazyFetch`.
## Type
@ -19,13 +19,13 @@ refreshNuxtData(keys?: string | string[])
**Type**: `String | String[]`
`refreshNuxtData` accepts a single or an array of strings as `keys` that are used to fetch the data. This parameter is **optional**. All `useAsyncData` and `useFetch` are re-fetched when no `keys` are specified.
`refreshNuxtData` accepts a single or an array of strings as `keys` that are used to fetch the data. This parameter is **optional**. All [`useAsyncData`](/docs/api/composables/use-async-data) and [`useFetch`](/docs/api/composables/use-fetch) are re-fetched when no `keys` are specified.
## Examples
### Refresh All data
This example below refreshes all data being fetched using `useAsyncData` and `useFetch` on the current page.
This example below refreshes all data being fetched using [`useAsyncData`](/docs/api/composables/use-async-data) and [`useFetch`](/docs/api/composables/use-fetch) on the current page.
```vue [pages/some-page.vue]
<template>

12
docs/6.bridge/1.overview.md
View File

@ -7,7 +7,7 @@ If you're starting a fresh Nuxt 3 project, please skip this section and go to [N
::
::alert{type=warning}
Nuxt Bridge provides identical features to Nuxt 3 ([docs](/docs/guide/concepts/auto-imports)) but there are some limitations, notably that `useAsyncData` and `useFetch` composables are not available. Please read the rest of this page for details.
Nuxt Bridge provides identical features to Nuxt 3 ([docs](/docs/guide/concepts/auto-imports)) but there are some limitations, notably that [`useAsyncData`](/docs/api/composables/use-async-data) and [`useFetch`](/docs/api/composables/use-fetch) composables are not available. Please read the rest of this page for details.
::
Bridge is a forward-compatibility layer that allows you to experience many of the new Nuxt 3 features by simply installing and enabling a Nuxt module.
@ -111,7 +111,7 @@ For all other situations, you can use the `nuxi build` command.
Please make sure to avoid any CommonJS syntax such as `module.exports`, `require` or `require.resolve` in your config file. It will soon be deprecated and unsupported.
You can use static `import`, dynamic `import()` and `export default` instead. Using TypeScript by renaming to `nuxt.config.ts` is also possible and recommended.
You can use static `import`, dynamic `import()` and `export default` instead. Using TypeScript by renaming to [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt.config) is also possible and recommended.
```ts [nuxt.config.js|ts]
import { defineNuxtConfig } from '@nuxt/bridge'
@ -226,7 +226,7 @@ export default defineNuxtPlugin(nuxtApp => {
```
::alert
If you want to use the new Nuxt composables (such as `useNuxtApp` or `useRuntimeConfig`) within your plugins, you will need to use the `defineNuxtPlugin` helper for those plugins.
If you want to use the new Nuxt composables (such as [`useNuxtApp`](/docs/api/composables/use-nuxt-app) or `useRuntimeConfig`) within your plugins, you will need to use the `defineNuxtPlugin` helper for those plugins.
::
::alert{type=warning}
@ -257,7 +257,7 @@ Nuxt Bridge does not support `definePageMeta`.
## New `useHead` (Optional)
Nuxt Bridge provides a new Nuxt 3 meta API that can be accessed with a new `useHead` composable.
Nuxt Bridge provides a new Nuxt 3 meta API that can be accessed with a new [`useHead`](/docs/api/composables/use-head) composable.
```vue
<script setup>
@ -279,11 +279,11 @@ export default defineNuxtConfig({
```
::alert
This `useHead` composable uses `@vueuse/head` under the hood (rather than `vue-meta`) to manipulate your `<head>`. You need to add `@vueuse/head` to your package.json file for it to work properly.
This [`useHead`](/docs/api/composables/use-head) composable uses `@vueuse/head` under the hood (rather than `vue-meta`) to manipulate your `<head>`. You need to add `@vueuse/head` to your package.json file for it to work properly.
::
::alert{type=warning}
We recommend not using the native Nuxt 2 `head()` properties in addition to `useHead`, as they may conflict.
We recommend not using the native Nuxt 2 `head()` properties in addition to [`useHead`](/docs/api/composables/use-head) , as they may conflict.
::
For more information on how to use this composable, see [the docs](/docs/getting-started/seo-meta).

12
docs/6.bridge/2.bridge-composition-api.md
View File

@ -91,7 +91,7 @@ You may wish to [migrate your plugins to Nuxt 3-style plugins](/docs/bridge/over
### `onGlobalSetup`
This function has been removed, but its use cases can be met by using `useNuxtApp` or `useState` within `defineNuxtPlugin`. You can also run any custom code within the `setup()` function of a layout.
This function has been removed, but its use cases can be met by using [`useNuxtApp`](/docs/api/composables/use-nuxt-app) or [`useState`](/docs/api/composables/use-state) within `defineNuxtPlugin`. You can also run any custom code within the `setup()` function of a layout.
```diff
- import { onGlobalSetup } from '@nuxtjs/composition-api'
@ -110,7 +110,7 @@ This function has been removed, but its use cases can be met by using `useNuxtAp
These two functions have been replaced with a new composable that works very similarly under the hood: `useState`.
The key differences are that you must provide a _key_ for this state (which Nuxt generated automatically for `ssrRef` and `shallowSsrRef`), and that it can only be called within a Nuxt 3 plugin (which is defined by `defineNuxtPlugin`) or a component instance. (In other words, you cannot use `useState` with a global/ambient context, because of the danger of shared state across requests.)
The key differences are that you must provide a _key_ for this state (which Nuxt generated automatically for `ssrRef` and `shallowSsrRef`), and that it can only be called within a Nuxt 3 plugin (which is defined by `defineNuxtPlugin`) or a component instance. (In other words, you cannot use [`useState`](/docs/api/composables/use-state) with a global/ambient context, because of the danger of shared state across requests.)
```diff
- import { ssrRef } from '@nuxtjs/composition-api'
@ -133,9 +133,9 @@ This function has been removed, and you will need to find an alternative impleme
### `useRouter` and `useRoute`
Nuxt Bridge provides direct replacements for these composables via `useRouter` and `useRoute`.
Nuxt Bridge provides direct replacements for these composables via [`useRouter`](/docs/api/composables/use-router) and `useRoute`.
The only key difference is that `useRoute` no longer returns a computed property.
The only key difference is that [`useRoute`](/docs/api/composables/use-route) no longer returns a computed property.
```diff
- import { useRouter, useRoute } from '@nuxtjs/composition-api'
@ -246,7 +246,7 @@ title.value = 'new title'
Be careful not to use both `useNuxt2Meta()` and the Options API `head()` within the same component, as behavior may be unpredictable.
::
Nuxt Bridge also provides a Nuxt 3-compatible meta implementation that can be accessed with the `useHead` composable.
Nuxt Bridge also provides a Nuxt 3-compatible meta implementation that can be accessed with the [`useHead`](/docs/api/composables/use-head) composable.
```diff
<script setup>
@ -268,6 +268,6 @@ export default defineNuxtConfig({
})
```
This `useHead` composable uses `@vueuse/head` under the hood (rather than `vue-meta`) to manipulate your `<head>`. Accordingly, it is recommended not to use both the native Nuxt 2 `head()` properties as well as `useHead`, as they may conflict.
This [`useHead`](/docs/api/composables/use-head) composable uses `@vueuse/head` under the hood (rather than `vue-meta`) to manipulate your `<head>`. Accordingly, it is recommended not to use both the native Nuxt 2 `head()` properties as well as [`useHead`](/docs/api/composables/use-head) , as they may conflict.
For more information on how to use this composable, see [the Nuxt 3 docs](/docs/getting-started/seo-meta).

2
docs/7.migration/2.configuration.md
View File

@ -94,7 +94,7 @@ If you are a module author, you can check out [more information about module com
## Directory Changes
The `static/` directory (for storing static assets) has been renamed to `public/`. You can either rename your `static` directory to `public`, or keep the name by setting `dir.public` in your `nuxt.config`.
The [`static/` directory](/docs/guide/directory-structure/static) (for storing static assets) has been renamed to `public/`. You can either rename your `static` directory to `public`, or keep the name by setting `dir.public` in your `nuxt.config`.
::ReadMore{link="/docs/guide/directory-structure/public"}
::

6
docs/7.migration/4.meta.md
View File

@ -3,7 +3,7 @@
Nuxt 3 provides several different ways to manage your meta tags.
1. Through your `nuxt.config`.
2. Through the `useHead` [composable](/docs/getting-started/seo-meta)
2. Through the [`useHead`](/docs/api/composables/use-head) [composable](/docs/getting-started/seo-meta)
3. Through [global meta components](/docs/getting-started/seo-meta)
You can customize `title`, `titleTemplate`, `base`, `script`, `noscript`, `style`, `meta`, `link`, `htmlAttrs` and `bodyAttrs`.
@ -17,10 +17,10 @@ Nuxt currently uses [`vueuse/head`](https://github.com/vueuse/head) to manage yo
## Migration
1. In your `nuxt.config`, rename `head` to `meta`. Consider moving this shared meta configuration into your `app.vue` instead. (Note that objects no longer have a `hid` key for deduplication.)
1. If you need to access the component state with `head`, you should migrate to using `useHead`. You might also consider using the built-in meta-components.
1. If you need to access the component state with `head`, you should migrate to using [`useHead`](/docs/api/composables/use-head) . You might also consider using the built-in meta-components.
1. If you need to use the Options API, there is a `head()` method you can use when you use `defineNuxtComponent`.
### Example: `useHead`
### Example: useHead
::code-group

4
docs/7.migration/6.pages-and-layouts.md
View File

@ -64,7 +64,7 @@ You will also need to change how you define the layout used by a page using the
## Pages
Nuxt 3 ships with an optional `vue-router` integration triggered by the existence of a `pages/` directory in your source directory. If you only have a single page, you may consider instead moving it to `app.vue` for a lighter build.
Nuxt 3 ships with an optional `vue-router` integration triggered by the existence of a [`pages/` directory](/docs/guide/directory-structure/pages) in your source directory. If you only have a single page, you may consider instead moving it to `app.vue` for a lighter build.
### Dynamic Routes
@ -93,7 +93,7 @@ If you have been defining transitions for your page or layout directly in your c
1. Rename any pages with dynamic parameters to match the new format.
1. Update `<Nuxt>` and `<NuxtChild>` to be `<NuxtPage>`.
1. If you're using the Composition API, you can also migrate `this.$route` and `this.$router` to use `useRoute` and `useRouter` composables.
1. If you're using the Composition API, you can also migrate `this.$route` and `this.$router` to use [`useRoute`](/docs/api/composables/use-route) and [`useRouter`](/docs/api/composables/use-router) composables.
#### Example: Dynamic Routes

8
docs/7.migration/7.component-options.md
View File

@ -21,7 +21,7 @@ You can read more [about direct API calls](/docs/guide/concepts/server-engine#di
### Using Composables
Nuxt 3 provides new composables for fetching data: `useAsyncData` and `useFetch`. They each have 'lazy' variants (`useLazyAsyncData` and `useLazyFetch`), which do not block client-side navigation.
Nuxt 3 provides new composables for fetching data: [`useAsyncData`](/docs/api/composables/use-async-data) and `useFetch`. They each have 'lazy' variants (`useLazyAsyncData` and `useLazyFetch`), which do not block client-side navigation.
In Nuxt 2, you'd fetch your data in your component using a syntax similar to:
@ -54,13 +54,13 @@ With Nuxt 3, you can perform this data fetching using composables in your `setup
You can now use `post` inside of your Nuxt 3 template, or call `refresh` to update the data.
::alert{type=info}
Despite the names, `useFetch` is not a direct replacement of the `fetch()` hook. Rather, `useAsyncData` replaces both hooks and is more customizable; it can do more than simply fetching data from an endpoint. `useFetch` is a convenience wrapper around `useAsyncData` for simply fetching data from an endpoint.
Despite the names, [`useFetch`](/docs/api/composables/use-fetch) is not a direct replacement of the `fetch()` hook. Rather, [`useAsyncData`](/docs/api/composables/use-async-data) replaces both hooks and is more customizable; it can do more than simply fetching data from an endpoint. [`useFetch`](/docs/api/composables/use-fetch) is a convenience wrapper around [`useAsyncData`](/docs/api/composables/use-async-data) for simply fetching data from an endpoint.
::
### Migration
1. Replace the `asyncData` hook with `useAsyncData` or `useFetch` in your page/component.
1. Replace the `fetch` hook with `useAsyncData` or `useFetch` in your component.
1. Replace the `asyncData` hook with [`useAsyncData`](/docs/api/composables/use-async-data) or [`useFetch`](/docs/api/composables/use-fetch) in your page/component.
1. Replace the `fetch` hook with [`useAsyncData`](/docs/api/composables/use-async-data) or [`useFetch`](/docs/api/composables/use-fetch) in your component.
## `head`

6
docs/7.migration/8.runtime-config.md
View File

@ -2,16 +2,16 @@
If you wish to reference environment variables within your Nuxt 3 app, you will need to use runtime config.
When referencing these variables within your components, you will have to use the `useRuntimeConfig` composable in your setup method (or Nuxt plugin).
When referencing these variables within your components, you will have to use the [`useRuntimeConfig`](/docs/api/composables/use-runtime-config) composable in your setup method (or Nuxt plugin).
In the `server/` portion of your app, you can use `useRuntimeConfig` without any import.
In the `server/` portion of your app, you can use [`useRuntimeConfig`](/docs/api/composables/use-runtime-config) without any import.
[Read more about runtime config](/docs/guide/going-further/runtime-config).
## Migration
1. Add any environment variables that you use in your app to the `runtimeConfig` property of the `nuxt.config` file.
1. Migrate `process.env` to `useRuntimeConfig` throughout the Vue part of your app.
1. Migrate `process.env` to [`useRuntimeConfig`](/docs/api/composables/use-runtime-config) throughout the Vue part of your app.
## Example

19
package.json
View File

@ -37,20 +37,21 @@
"nuxt": "workspace:*",
"vite": "4.3.9",
"vue": "3.3.4",
"magic-string": "^0.30.0"
"magic-string": "^0.30.1"
},
"devDependencies": {
"@actions/core": "1.10.0",
"@nuxt/test-utils": "workspace:*",
"@nuxt/webpack-builder": "workspace:*",
"@nuxtjs/eslint-config-typescript": "12.0.0",
"@types/fs-extra": "11.0.1",
"@types/node": "18.16.19",
"@types/semver": "7.5.0",
"case-police": "0.6.1",
"chalk": "5.3.0",
"changelogen": "0.5.3",
"changelogen": "0.5.4",
"cheerio": "1.0.0-rc.12",
"consola": "3.2.2",
"consola": "3.2.3",
"devalue": "4.3.2",
"eslint": "8.44.0",
"eslint-plugin-import": "2.27.5",
@ -58,10 +59,11 @@
"eslint-plugin-no-only-tests": "3.1.0",
"execa": "7.1.1",
"fs-extra": "11.1.1",
"globby": "13.2.1",
"globby": "13.2.2",
"h3": "1.7.1",
"jiti": "1.18.2",
"jiti": "1.19.1",
"markdownlint-cli": "^0.33.0",
"nitropack": "2.5.2",
"nuxi": "workspace:*",
"nuxt": "workspace:*",
"nuxt-vitest": "0.8.7",
@ -74,13 +76,14 @@
"typescript": "5.0.4",
"ufo": "1.1.2",
"vite": "4.3.9",
"vitest": "0.32.4",
"vitest": "0.33.0",
"vitest-environment-nuxt": "0.8.7",
"vue": "3.3.4",
"vue-eslint-parser": "9.3.1",
"vue-tsc": "1.8.3"
"vue-router": "4.2.4",
"vue-tsc": "1.8.4"
},
"packageManager": "pnpm@8.6.5",
"packageManager": "pnpm@8.6.6",
"engines": {
"node": "^14.18.0 || >=16.10.0"
}

12
packages/kit/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nuxt/kit",
"version": "3.6.1",
"version": "3.6.2",
"repository": "nuxt/nuxt",
"license": "MIT",
"type": "module",
@ -22,12 +22,12 @@
"dependencies": {
"@nuxt/schema": "workspace:../schema",
"c12": "^1.4.2",
"consola": "^3.2.2",
"consola": "^3.2.3",
"defu": "^6.1.2",
"globby": "^13.2.1",
"globby": "^13.2.2",
"hash-sum": "^2.0.0",
"ignore": "^5.2.4",
"jiti": "^1.18.2",
"jiti": "^1.19.1",
"knitwork": "^1.0.0",
"mlly": "^1.4.0",
"pathe": "^1.1.1",
@ -35,7 +35,7 @@
"scule": "^1.0.0",
"semver": "^7.5.3",
"unctx": "^2.3.1",
"unimport": "^3.0.11",
"unimport": "^3.0.14",
"untyped": "^1.3.2"
},
"devDependencies": {
@ -46,7 +46,7 @@
"nitropack": "2.5.2",
"unbuild": "latest",
"vite": "4.3.9",
"vitest": "0.32.4",
"vitest": "0.33.0",
"webpack": "5.88.1"
},
"engines": {

2
packages/kit/src/module/compatibility.ts
View File

@ -46,7 +46,7 @@ export async function getNuxtModuleVersion (module: string | NuxtModule, nuxt: N
return version
}
// it's possible that the module will be installed, it just hasn't been done yet, preemptively load the instance
if (typeof module !== 'string' && nuxt.options.modules.includes(moduleMeta.name)) {
if (nuxt.options.modules.includes(moduleMeta.name)) {
const { buildTimeModuleMeta } = await loadNuxtModuleInstance(moduleMeta.name, nuxt)
return buildTimeModuleMeta.version || false
}

2
packages/kit/src/module/define.ts
View File

@ -77,7 +77,7 @@ export function defineNuxtModule<OptionsT extends ModuleOptions> (definition: Mo
const setupTime = perf ? Math.round((perf.duration * 100)) / 100 : 0 // TODO: remove when Node 14 reaches EOL
// Measure setup time
if (setupTime > 5000) {
if (setupTime > 5000 && uniqueKey !== '@nuxt/telemetry') {
logger.warn(`Slow module \`${uniqueKey || '<no name>'}\` took \`${setupTime}ms\` to setup.`)
} else if (nuxt.options.debug) {
logger.info(`Module \`${uniqueKey || '<no name>'}\` took \`${setupTime}ms\` to setup.`)

6
packages/nuxi/package.json
View File

@ -1,6 +1,6 @@
{
"name": "nuxi",
"version": "3.6.1",
"version": "3.6.2",
"repository": "nuxt/nuxt",
"license": "MIT",
"type": "module",
@ -29,7 +29,7 @@
"clear": "0.1.0",
"clipboardy": "3.0.0",
"colorette": "2.0.20",
"consola": "3.2.2",
"consola": "3.2.3",
"deep-object-diff": "1.1.9",
"defu": "6.1.2",
"destr": "2.0.0",
@ -37,7 +37,7 @@
"flat": "5.0.2",
"giget": "1.1.2",
"h3": "1.7.1",
"jiti": "1.18.2",
"jiti": "1.19.1",
"listhen": "1.0.4",
"mlly": "1.4.0",
"mri": "1.2.0",

22
packages/nuxt/package.json
View File

@ -1,6 +1,6 @@
{
"name": "nuxt",
"version": "3.6.1",
"version": "3.6.2",
"repository": "nuxt/nuxt",
"license": "MIT",
"type": "module",
@ -55,13 +55,13 @@
"@nuxt/devalue": "^2.0.2",
"@nuxt/kit": "workspace:../kit",
"@nuxt/schema": "workspace:../schema",
"@nuxt/telemetry": "^2.2.0",
"@nuxt/telemetry": "^2.3.0",
"@nuxt/ui-templates": "^1.2.0",
"@nuxt/vite-builder": "workspace:../vite",
"@unhead/ssr": "^1.1.29",
"@unhead/vue": "^1.1.29",
"@unhead/ssr": "^1.1.30",
"@unhead/vue": "^1.1.30",
"@vue/shared": "^3.3.4",
"acorn": "8.9.0",
"acorn": "8.10.0",
"c12": "^1.4.2",
"chokidar": "^3.5.3",
"cookie-es": "^1.0.0",
@ -72,14 +72,14 @@
"escape-string-regexp": "^5.0.0",
"estree-walker": "^3.0.3",
"fs-extra": "^11.1.1",
"globby": "^13.2.1",
"globby": "^13.2.2",
"h3": "^1.7.1",
"hookable": "^5.5.3",
"jiti": "^1.18.2",
"jiti": "^1.19.1",
"klona": "^2.0.6",
"knitwork": "^1.0.0",
"local-pkg": "^0.4.3",
"magic-string": "^0.30.0",
"magic-string": "^0.30.1",
"mlly": "^1.4.0",
"nitropack": "^2.5.2",
"nuxi": "workspace:../nuxi",
@ -96,14 +96,14 @@
"uncrypto": "^0.1.3",
"unctx": "^2.3.1",
"unenv": "^1.5.1",
"unimport": "^3.0.11",
"unimport": "^3.0.14",
"unplugin": "^1.3.2",
"unplugin-vue-router": "^0.6.4",
"untyped": "^1.3.2",
"vue": "^3.3.4",
"vue-bundle-renderer": "^1.0.3",
"vue-devtools-stub": "^0.1.0",
"vue-router": "^4.2.2"
"vue-router": "^4.2.4"
},
"devDependencies": {
"@parcel/watcher": "2.2.0",
@ -113,7 +113,7 @@
"@vitejs/plugin-vue": "4.2.3",
"unbuild": "latest",
"vite": "4.3.9",
"vitest": "0.32.4"
"vitest": "0.33.0"
},
"peerDependencies": {
"@parcel/watcher": "^2.1.0",

10
packages/nuxt/src/app/components/injections.ts Normal file
View File

@ -0,0 +1,10 @@
import type { InjectionKey } from 'vue'
import type { RouteLocationNormalizedLoaded } from 'vue-router'
export interface LayoutMeta {
isCurrent: (route: RouteLocationNormalizedLoaded) => boolean
}
export const LayoutMetaSymbol: InjectionKey<LayoutMeta> = Symbol('layout-meta')
export const PageRouteSymbol: InjectionKey<RouteLocationNormalizedLoaded> = Symbol('route')

41
packages/nuxt/src/app/components/layout.ts
View File

@ -1,7 +1,9 @@
import type { InjectionKey, Ref, VNode } from 'vue'
import type { Ref, VNode } from 'vue'
import { Suspense, Transition, computed, defineComponent, h, inject, mergeProps, nextTick, onMounted, provide, ref, unref } from 'vue'
import type { RouteLocationNormalizedLoaded } from 'vue-router'
import { _wrapIf } from './utils'
import { LayoutMetaSymbol, PageRouteSymbol } from './injections'
import { useRoute } from '#app/composables/router'
// @ts-expect-error virtual file
import { useRoute as useVueRouterRoute } from '#build/pages'
@ -11,12 +13,6 @@ import layouts from '#build/layouts'
import { appLayoutTransition as defaultLayoutTransition } from '#build/nuxt.config.mjs'
import { useNuxtApp } from '#app'
export interface LayoutMeta {
isCurrent: (route: RouteLocationNormalizedLoaded) => boolean
}
export const LayoutMetaSymbol: InjectionKey<LayoutMeta> = Symbol('layout-meta')
export default defineComponent({
name: 'NuxtLayout',
inheritAttrs: false,
@ -29,7 +25,7 @@ export default defineComponent({
setup (props, context) {
const nuxtApp = useNuxtApp()
// Need to ensure (if we are not a child of `<NuxtPage>`) that we use synchronous route (not deferred)
const injectedRoute = inject('_route') as RouteLocationNormalizedLoaded
const injectedRoute = inject(PageRouteSymbol)
const route = injectedRoute === useRoute() ? useVueRouterRoute() : injectedRoute
const layout = computed(() => unref(props.name) ?? route.meta.layout as string ?? 'default')
@ -49,13 +45,14 @@ export default defineComponent({
// We avoid rendering layout transition if there is no layout to render
return _wrapIf(Transition, hasLayout && transitionProps, {
default: () => h(Suspense, { suspensible: true, onResolve: () => { nextTick(done) } }, {
default: () => _wrapIf(LayoutProvider, hasLayout && {
// @ts-expect-error seems to be an issue in vue types
default: () => h(LayoutProvider, {
layoutProps: mergeProps(context.attrs, { ref: layoutRef }),
key: layout.value,
name: layout.value,
shouldProvide: !props.name,
hasTransition: !!transitionProps
}, context.slots).default()
}, context.slots)
})
}).default()
}
@ -67,7 +64,7 @@ const LayoutProvider = defineComponent({
inheritAttrs: false,
props: {
name: {
type: String
type: [String, Boolean]
},
layoutProps: {
type: Object
@ -81,33 +78,45 @@ const LayoutProvider = defineComponent({
},
setup (props, context) {
// Prevent reactivity when the page will be rerendered in a different suspense fork
if (props.shouldProvide) {
// eslint-disable-next-line vue/no-setup-props-destructure
const name = props.name
if (props.shouldProvide) {
provide(LayoutMetaSymbol, {
isCurrent: (route: RouteLocationNormalizedLoaded) => name === (route.meta.layout ?? 'default')
})
}
let vnode: VNode
let vnode: VNode | undefined
if (process.dev && process.client) {
onMounted(() => {
nextTick(() => {
if (['#comment', '#text'].includes(vnode?.el?.nodeName)) {
console.warn(`[nuxt] \`${props.name}\` layout does not have a single root node and will cause errors when navigating between routes.`)
if (name) {
console.warn(`[nuxt] \`${name}\` layout does not have a single root node and will cause errors when navigating between routes.`)
} else {
console.warn('[nuxt] `<NuxtLayout>` needs to be passed a single root node in its default slot.')
}
}
})
})
}
return () => {
if (!name || (typeof name === 'string' && !(name in layouts))) {
if (process.dev && process.client && props.hasTransition) {
vnode = h(layouts[props.name], props.layoutProps, context.slots)
vnode = context.slots.default?.() as VNode | undefined
return vnode
}
return context.slots.default?.()
}
if (process.dev && process.client && props.hasTransition) {
vnode = h(layouts[name], props.layoutProps, context.slots)
return vnode
}
return h(layouts[props.name], props.layoutProps, context.slots)
return h(layouts[name], props.layoutProps, context.slots)
}
}
})

49
packages/nuxt/src/app/components/nuxt-island.ts
View File

@ -5,6 +5,7 @@ import { appendResponseHeader } from 'h3'
import { useHead } from '@unhead/vue'
import { randomUUID } from 'uncrypto'
import { withQuery } from 'ufo'
import type { FetchResponse } from 'ofetch'
// eslint-disable-next-line import/no-restricted-paths
import type { NuxtIslandResponse } from '../../core/runtime/nitro/renderer'
@ -42,11 +43,38 @@ export default defineComponent({
const hashId = computed(() => hash([props.name, props.props, props.context]))
const instance = getCurrentInstance()!
const event = useRequestEvent()
const eventFetch = process.server ? event.fetch : globalThis.fetch
// TODO: remove use of `$fetch.raw` when nitro 503 issues on windows dev server are resolved
const eventFetch = process.server ? event.fetch : process.dev ? $fetch.raw : globalThis.fetch
const mounted = ref(false)
onMounted(() => { mounted.value = true })
const ssrHTML = ref<string>(process.client ? getFragmentHTML(instance.vnode?.el ?? null).join('') ?? '<div></div>' : '<div></div>')
function setPayload (key: string, result: NuxtIslandResponse) {
nuxtApp.payload.data[key] = {
__nuxt_island: {
key,
...(process.server && process.env.prerender)
? {}
: { params: { ...props.context, props: props.props ? JSON.stringify(props.props) : undefined } }
},
...result
}
}
const ssrHTML = ref('<div></div>')
if (process.client) {
const renderedHTML = getFragmentHTML(instance.vnode?.el ?? null).join('')
if (renderedHTML && nuxtApp.isHydrating) {
setPayload(`${props.name}_${hashId.value}`, {
html: getFragmentHTML(instance.vnode?.el ?? null, true).join(''),
state: {},
head: {
link: [],
style: []
}
})
}
ssrHTML.value = renderedHTML ?? '<div></div>'
}
const slotProps = computed(() => getSlotProps(ssrHTML.value))
const uid = ref<string>(ssrHTML.value.match(SSR_UID_RE)?.[1] ?? randomUUID())
const availableSlots = computed(() => [...ssrHTML.value.matchAll(SLOTNAME_RE)].map(m => m[1]))
@ -81,7 +109,7 @@ export default defineComponent({
...props.context,
props: props.props ? JSON.stringify(props.props) : undefined
}))
const result = await r.json() as NuxtIslandResponse
const result = process.server || !process.dev ? await r.json() : (r as FetchResponse<NuxtIslandResponse>)._data
// TODO: support passing on more headers
if (process.server && process.env.prerender) {
const hints = r.headers.get('x-nitro-prerender')
@ -89,20 +117,7 @@ export default defineComponent({
appendResponseHeader(event, 'x-nitro-prerender', hints)
}
}
nuxtApp.payload.data[key] = {
__nuxt_island: {
key,
...(process.server && process.env.prerender)
? {}
: {
params: {
...props.context,
props: props.props ? JSON.stringify(props.props) : undefined
}
}
},
...result
}
setPayload(key, result)
return result
}
const key = ref(0)

3
packages/nuxt/src/app/components/nuxt-root.vue
View File

@ -12,6 +12,7 @@ import { defineAsyncComponent, onErrorCaptured, onServerPrefetch, provide } from
import { useNuxtApp } from '#app/nuxt'
import { isNuxtError, showError, useError } from '#app/composables/error'
import { useRoute } from '#app/composables/router'
import { PageRouteSymbol } from '#app/components/injections'
import AppComponent from '#build/app-component.mjs'
import ErrorComponent from '#build/error-component.mjs'
@ -27,7 +28,7 @@ const SingleRenderer = process.test && process.dev && process.server && url.star
.then(r => r.default(process.server ? url : window.location.href)))
// Inject default route (outside of pages) as active route
provide('_route', useRoute())
provide(PageRouteSymbol, useRoute())
// vue:setup hook
const results = nuxtApp.hooks.callHookWith(hooks => hooks.map(hook => hook()), 'vue:setup')

59
packages/nuxt/src/app/components/route-provider.ts Normal file
View File

@ -0,0 +1,59 @@
import { defineComponent, h, nextTick, onMounted, provide, shallowReactive } from 'vue'
import type { Ref, VNode } from 'vue'
import type { RouteLocation, RouteLocationNormalizedLoaded } from '#vue-router'
import { PageRouteSymbol } from '#app/components/injections'
export const RouteProvider = defineComponent({
name: 'RouteProvider',
props: {
vnode: {
type: Object as () => VNode,
required: true
},
route: {
type: Object as () => RouteLocationNormalizedLoaded,
required: true
},
vnodeRef: Object as () => Ref<any>,
renderKey: String,
trackRootNodes: Boolean
},
setup (props) {
// Prevent reactivity when the page will be rerendered in a different suspense fork
// eslint-disable-next-line vue/no-setup-props-destructure
const previousKey = props.renderKey
// eslint-disable-next-line vue/no-setup-props-destructure
const previousRoute = props.route
// Provide a reactive route within the page
const route = {} as RouteLocation
for (const key in props.route) {
Object.defineProperty(route, key, {
get: () => previousKey === props.renderKey ? props.route[key as keyof RouteLocationNormalizedLoaded] : previousRoute[key as keyof RouteLocationNormalizedLoaded]
})
}
provide(PageRouteSymbol, shallowReactive(route))
let vnode: VNode
if (process.dev && process.client && props.trackRootNodes) {
onMounted(() => {
nextTick(() => {
if (['#comment', '#text'].includes(vnode?.el?.nodeName)) {
const filename = (vnode?.type as any).__file
console.warn(`[nuxt] \`${filename}\` does not have a single root node and will cause errors when navigating between routes.`)
}
})
})
}
return () => {
if (process.dev && process.client) {
vnode = h(props.vnode, { ref: props.vnodeRef })
return vnode
}
return h(props.vnode, { ref: props.vnodeRef })
}
}
})

27
packages/nuxt/src/app/components/utils.ts
View File

@ -99,25 +99,42 @@ export function vforToArray (source: any): any[] {
return []
}
export function getFragmentHTML (element: RendererNode | null) {
/**
* Retrieve the HTML content from an element
* Handles `<!--[-->` Fragment elements
*
* @param element the element to retrieve the HTML
* @param withoutSlots purge all slots from the HTML string retrieved
* @returns {string[]} An array of string which represent the content of each element. Use `.join('')` to retrieve a component vnode.el HTML
*/
export function getFragmentHTML (element: RendererNode | null, withoutSlots = false) {
if (element) {
if (element.nodeName === '#comment' && element.nodeValue === '[') {
return getFragmentChildren(element)
return getFragmentChildren(element, [], withoutSlots)
}
if (withoutSlots) {
const clone = element.cloneNode(true)
clone.querySelectorAll('[nuxt-ssr-slot-name]').forEach((n: Element) => { n.innerHTML = '' })
return [clone.outerHTML]
}
return [element.outerHTML]
}
return []
}
function getFragmentChildren (element: RendererNode | null, blocks: string[] = []) {
function getFragmentChildren (element: RendererNode | null, blocks: string[] = [], withoutSlots = false) {
if (element && element.nodeName) {
if (isEndFragment(element)) {
return blocks
} else if (!isStartFragment(element)) {
blocks.push(element.outerHTML)
const clone = element.cloneNode(true) as Element
if (withoutSlots) {
clone.querySelectorAll('[nuxt-ssr-slot-name]').forEach((n) => { n.innerHTML = '' })
}
blocks.push(clone.outerHTML)
}
getFragmentChildren(element.nextSibling, blocks)
getFragmentChildren(element.nextSibling, blocks, withoutSlots)
}
return blocks
}

3
packages/nuxt/src/app/composables/router.ts
View File

@ -10,6 +10,7 @@ import { createError, showError } from './error'
import { useState } from './state'
import type { PageMeta } from '#app'
import { PageRouteSymbol } from '#app/components/injections'
export const useRouter: typeof _useRouter = () => {
return useNuxtApp()?.$router as Router
@ -20,7 +21,7 @@ export const useRoute: typeof _useRoute = () => {
console.warn('[nuxt] Calling `useRoute` within middleware may lead to misleading results. Instead, use the (to, from) arguments passed to the middleware to access the new and old routes.')
}
if (hasInjectionContext()) {
return inject('_route', useNuxtApp()._route)
return inject(PageRouteSymbol, useNuxtApp()._route)
}
return useNuxtApp()._route
}

2
packages/nuxt/src/imports/module.ts
View File

@ -126,7 +126,7 @@ export default defineNuxtModule<Partial<ImportsOptions>>({
}
})
nuxt.hook('builder:generateApp', async () => {
nuxt.hook('app:templatesGenerated', async () => {
await regenerateImports()
})
}

2
packages/nuxt/src/pages/module.ts
View File

@ -205,7 +205,6 @@ export default defineNuxtModule({
if (nuxt.options.dev || !nitro.options.static) { return }
// Prerender all non-dynamic page routes when generating app
const prerenderRoutes = new Set<string>()
nuxt.hook('modules:done', () => {
nuxt.hook('pages:extend', (pages) => {
prerenderRoutes.clear()
const processPages = (pages: NuxtPage[], currentPath = '/') => {
@ -221,7 +220,6 @@ export default defineNuxtModule({
}
processPages(pages)
})
})
nuxt.hook('nitro:build:before', (nitro) => {
for (const route of nitro.options.prerender.routes || []) {
// Skip default route value as we only generate it if it is already

93
packages/nuxt/src/pages/runtime/page.ts
View File

@ -1,14 +1,15 @@
import { Suspense, Transition, computed, defineComponent, h, inject, nextTick, onMounted, provide, reactive, ref } from 'vue'
import { Suspense, Transition, defineComponent, h, inject, nextTick, ref } from 'vue'
import type { KeepAliveProps, TransitionProps, VNode } from 'vue'
import { RouterView } from '#vue-router'
import { defu } from 'defu'
import type { RouteLocation, RouteLocationNormalized, RouteLocationNormalizedLoaded } from '#vue-router'
import type { RouteLocationNormalized, RouteLocationNormalizedLoaded } from '#vue-router'
import type { RouterViewSlotProps } from './utils'
import { generateRouteKey, wrapInKeepAlive } from './utils'
import { RouteProvider } from '#app/components/route-provider'
import { useNuxtApp } from '#app/nuxt'
import { _wrapIf } from '#app/components/utils'
import { LayoutMetaSymbol } from '#app/components/layout'
import { LayoutMetaSymbol, PageRouteSymbol } from '#app/components/injections'
// @ts-expect-error virtual file
import { appKeepalive as defaultKeepaliveConfig, appPageTransition as defaultPageTransition } from '#build/nuxt.config.mjs'
@ -38,6 +39,7 @@ export default defineComponent({
setup (props, { attrs, expose }) {
const nuxtApp = useNuxtApp()
const pageRef = ref()
const forkRoute = inject(PageRouteSymbol, null)
expose({ pageRef })
@ -47,13 +49,32 @@ export default defineComponent({
return () => {
return h(RouterView, { name: props.name, route: props.route, ...attrs }, {
default: (routeProps: RouterViewSlotProps) => {
if (!routeProps.Component) { return }
const isRenderingNewRouteInOldFork = process.client && haveParentRoutesRendered(forkRoute, routeProps.route, routeProps.Component)
const hasSameChildren = process.client && forkRoute && forkRoute.matched.length === routeProps.route.matched.length
if (!routeProps.Component) {
// If we're rendering a `<NuxtPage>` child route on navigation to a route which lacks a child page
// we'll render the old vnode until the new route finishes resolving
if (process.client && vnode && !hasSameChildren) {
return vnode
}
return
}
// Return old vnode if we are rendering _new_ page suspense fork in _old_ layout suspense fork
if (vnode && _layoutMeta && !_layoutMeta.isCurrent(routeProps.route)) {
if (process.client && vnode && _layoutMeta && !_layoutMeta.isCurrent(routeProps.route)) {
return vnode
}
if (process.client && isRenderingNewRouteInOldFork && forkRoute && (!_layoutMeta || _layoutMeta?.isCurrent(forkRoute))) {
// if leaving a route with an existing child route, render the old vnode
if (hasSameChildren) {
return vnode
}
// If _leaving_ null child route, return null vnode
return null
}
const key = generateRouteKey(routeProps, props.pageKey)
const done = nuxtApp.deferHydration()
@ -70,7 +91,17 @@ export default defineComponent({
suspensible: true,
onPending: () => nuxtApp.callHook('page:start', routeProps.Component),
onResolve: () => { nextTick(() => nuxtApp.callHook('page:finish', routeProps.Component).finally(done)) }
}, { default: () => h(RouteProvider, { key, routeProps, pageKey: key, hasTransition, pageRef } as {}) })
}, {
// @ts-expect-error seems to be an issue in vue types
default: () => h(RouteProvider, {
key,
vnode: routeProps.Component,
route: routeProps.route,
renderKey: key,
trackRootNodes: hasTransition,
vnodeRef: pageRef
})
})
)).default()
return vnode
@ -92,45 +123,15 @@ function _mergeTransitionProps (routeProps: TransitionProps[]): TransitionProps
return defu(..._props as [TransitionProps, TransitionProps])
}
const RouteProvider = defineComponent({
name: 'RouteProvider',
// TODO: Type props
// eslint-disable-next-line vue/require-prop-types
props: ['routeProps', 'pageKey', 'hasTransition', 'pageRef'],
setup (props) {
// Prevent reactivity when the page will be rerendered in a different suspense fork
// eslint-disable-next-line vue/no-setup-props-destructure
const previousKey = props.pageKey
// eslint-disable-next-line vue/no-setup-props-destructure
const previousRoute = props.routeProps.route
function haveParentRoutesRendered (fork: RouteLocationNormalizedLoaded | null, newRoute: RouteLocationNormalizedLoaded, Component?: VNode) {
if (!fork) { return false }
// Provide a reactive route within the page
const route = {} as RouteLocation
for (const key in props.routeProps.route) {
(route as any)[key] = computed(() => previousKey === props.pageKey ? props.routeProps.route[key] : previousRoute[key])
}
const index = newRoute.matched.findIndex(m => m.components?.default === Component?.type)
if (!index || index === -1) { return false }
provide('_route', reactive(route))
let vnode: VNode
if (process.dev && process.client && props.hasTransition) {
onMounted(() => {
nextTick(() => {
if (['#comment', '#text'].includes(vnode?.el?.nodeName)) {
const filename = (vnode?.type as any).__file
console.warn(`[nuxt] \`${filename}\` does not have a single root node and will cause errors when navigating between routes.`)
}
})
})
}
return () => {
if (process.dev && process.client) {
vnode = h(props.routeProps.Component, { ref: props.pageRef })
return vnode
}
return h(props.routeProps.Component, { ref: props.pageRef })
}
}
})
// we only care whether the parent route components have had to rerender
return newRoute.matched.slice(0, index)
.some(
(c, i) => c.components?.default !== fork.matched[i]?.components?.default) ||
(Component && generateRouteKey({ route: newRoute, Component }) !== generateRouteKey({ route: fork, Component }))
}

8
packages/nuxt/src/pages/runtime/plugins/router.ts
View File

@ -1,4 +1,4 @@
import { computed, isReadonly, reactive, shallowRef } from 'vue'
import { isReadonly, reactive, shallowReactive, shallowRef } from 'vue'
import type { Ref } from 'vue'
import type { RouteLocation, Router, RouterScrollBehavior } from '#vue-router'
import {
@ -108,10 +108,12 @@ const plugin: Plugin<{ router: Router }> = defineNuxtPlugin({
// https://github.com/vuejs/router/blob/main/packages/router/src/router.ts#L1225-L1233
const route = {} as RouteLocation
for (const key in _route.value) {
(route as any)[key] = computed(() => _route.value[key as keyof RouteLocation])
Object.defineProperty(route, key, {
get: () => _route.value[key as keyof RouteLocation]
})
}
nuxtApp._route = reactive(route)
nuxtApp._route = shallowReactive(route)
nuxtApp._middleware = nuxtApp._middleware || {
global: [],

10
packages/schema/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nuxt/schema",
"version": "3.6.1",
"version": "3.6.2",
"repository": "nuxt/nuxt",
"license": "MIT",
"type": "module",
@ -26,11 +26,11 @@
"prepack": "unbuild"
},
"devDependencies": {
"@nuxt/telemetry": "2.2.0",
"@nuxt/telemetry": "2.3.0",
"@types/file-loader": "5.0.1",
"@types/pug": "2.0.6",
"@types/sass-loader": "8.0.5",
"@unhead/schema": "1.1.29",
"@unhead/schema": "1.1.30",
"@vitejs/plugin-vue": "4.2.3",
"@vitejs/plugin-vue-jsx": "3.0.1",
"@vue/compiler-core": "3.3.4",
@ -44,7 +44,7 @@
"vue": "3.3.4",
"vue-bundle-renderer": "1.0.3",
"vue-loader": "17.2.2",
"vue-router": "4.2.2",
"vue-router": "4.2.4",
"webpack": "5.88.1",
"webpack-dev-middleware": "6.1.1"
},
@ -56,7 +56,7 @@
"postcss-import-resolver": "^2.0.0",
"std-env": "^3.3.3",
"ufo": "^1.1.2",
"unimport": "^3.0.11",
"unimport": "^3.0.14",
"untyped": "^1.3.2"
},
"engines": {

2
packages/schema/src/config/adhoc.ts
View File

@ -58,7 +58,7 @@ export default defineUntypedSchema({
*
* @see [Nuxt Telemetry](https://github.com/nuxt/telemetry) for more information.
*
* @type {typeof import('@nuxt/telemetry').ModuleOptions}
* @type {boolean | Record<string, any>}
*/
telemetry: undefined,

2
packages/schema/src/config/build.ts
View File

@ -193,7 +193,7 @@ export default defineUntypedSchema({
* Options passed directly to the transformer from `unctx` that preserves async context
* after `await`.
*
* @type {typeof import('unctx').TransformerOptions}
* @type {typeof import('unctx/transform').TransformerOptions}
*/
asyncTransforms: {
asyncFunctions: ['defineNuxtPlugin', 'defineNuxtRouteMiddleware'],

7
packages/schema/src/config/vite.ts
View File

@ -30,7 +30,12 @@ export default defineUntypedSchema({
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
},
publicDir: {
$resolve: async (val, get) => val ?? resolve((await get('srcDir')), (await get('dir')).public)
$resolve: async (val, get) => {
if (val) {
console.warn('Directly configuring the `vite.publicDir` option is not supported. Instead, set `dir.public`. You can read more in `https://nuxt.com/docs/api/configuration/nuxt-config#public`.')
}
return val ?? resolve((await get('srcDir')), (await get('dir')).public)
}
},
vue: {
isProduction: {

10
packages/schema/src/types/config.ts
View File

@ -96,7 +96,7 @@ export interface NuxtOptions extends Omit<ConfigSchema, 'builder'> {
$schema: SchemaDefinition
}
export interface ViteConfig extends ViteUserConfig {
export interface ViteConfig extends Omit<ViteUserConfig, 'publicDir'> {
/** The path to the entrypoint for the Vite build. */
entry?: string
/**
@ -126,6 +126,14 @@ export interface ViteConfig extends ViteUserConfig {
* Use environment variables or top level `server` options to configure Nuxt server.
*/
server?: Omit<ViteServerOptions, 'port' | 'host'>
/**
* Directly configuring the `vite.publicDir` option is not supported. Instead, set `dir.public`.
*
* You can read more in <https://nuxt.com/docs/api/configuration/nuxt-config#public>.
*
* @deprecated
*/
publicDir?: never
}

10
packages/test-utils/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nuxt/test-utils",
"version": "3.6.1",
"version": "3.6.2",
"repository": "nuxt/nuxt",
"license": "MIT",
"type": "module",
@ -24,7 +24,7 @@
"dependencies": {
"@nuxt/kit": "workspace:../kit",
"@nuxt/schema": "workspace:../schema",
"consola": "^3.2.2",
"consola": "^3.2.3",
"defu": "^6.1.2",
"execa": "^7.1.1",
"get-port-please": "^3.0.1",
@ -33,15 +33,15 @@
"ufo": "^1.1.2"
},
"devDependencies": {
"@jest/globals": "29.5.0",
"@jest/globals": "29.6.0",
"playwright": "1.35.1",
"unbuild": "latest",
"vitest": "0.32.4"
"vitest": "0.33.0"
},
"peerDependencies": {
"@jest/globals": "^29.5.0",
"playwright": "^1.34.3",
"vitest": "^0.30.0 || ^0.31.0 || ^0.32.0",
"vitest": "^0.30.0 || ^0.31.0 || ^0.32.0 || ^0.33.0",
"vue": "^3.3.4"
},
"peerDependenciesMeta": {

9
packages/vite/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@nuxt/vite-builder",
"version": "3.6.1",
"version": "3.6.2",
"repository": "nuxt/nuxt",
"license": "MIT",
"type": "module",
@ -19,6 +19,7 @@
},
"devDependencies": {
"@nuxt/schema": "workspace:../schema",
"@types/clear": "0.1.2",
"@types/estree": "1.0.1",
"@types/fs-extra": "11.0.1",
"unbuild": "latest",
@ -31,7 +32,7 @@
"@vitejs/plugin-vue-jsx": "^3.0.1",
"autoprefixer": "^10.4.14",
"clear": "^0.1.0",
"consola": "^3.2.2",
"consola": "^3.2.3",
"cssnano": "^6.0.1",
"defu": "^6.1.2",
"esbuild": "^0.18.11",
@ -42,7 +43,7 @@
"get-port-please": "^3.0.1",
"h3": "^1.7.1",
"knitwork": "^1.0.0",
"magic-string": "^0.30.0",
"magic-string": "^0.30.1",
"mlly": "^1.4.0",
"ohash": "^1.1.2",
"pathe": "^1.1.1",
@ -57,7 +58,7 @@
"ufo": "^1.1.2",
"unplugin": "^1.3.2",
"vite": "~4.3.9",
"vite-node": "^0.32.4",
"vite-node": "^0.33.0",
"vite-plugin-checker": "^0.6.1",
"vue-bundle-renderer": "^1.0.3"
},

2
packages/vite/src/dev-bundler.ts
View File

@ -229,7 +229,7 @@ export async function initViteDevBundler (ctx: ViteBuildContext, onBuild: () =>
const viteServer = ctx.ssrServer!
const options: TransformOptions = {
viteServer,
isExternal: createIsExternal(viteServer, ctx.nuxt.options.rootDir)
isExternal: createIsExternal(viteServer, ctx.nuxt.options.rootDir, ctx.nuxt.options.modulesDir)
}
// Build and watch

4
packages/vite/src/plugins/composable-keys.ts
View File

@ -224,7 +224,7 @@ class ScopedVarsCollector {
const NUXT_IMPORT_RE = /nuxt|#app|#imports/
function detectImportNames (code: string, composableMeta: Record<string, { source?: string | RegExp }>) {
export function detectImportNames (code: string, composableMeta: Record<string, { source?: string | RegExp }>) {
const imports = findStaticImports(code)
const names = new Set<string>()
for (const i of imports) {
@ -235,7 +235,7 @@ function detectImportNames (code: string, composableMeta: Record<string, { sourc
if (source && matchWithStringOrRegex(i.specifier, source)) {
return
}
names.add(namedImports![name])
names.add(name)
}
const { namedImports, defaultImport, namespacedImport } = parseStaticImport(i)

3
packages/vite/src/utils/external.ts
View File

@ -2,7 +2,7 @@ import type { ExternalsOptions } from 'externality'
import { ExternalsDefaults, isExternal } from 'externality'
import type { ViteDevServer } from 'vite'
export function createIsExternal (viteServer: ViteDevServer, rootDir: string) {
export function createIsExternal (viteServer: ViteDevServer, rootDir: string, modulesDirs?: string[]) {
const externalOpts: ExternalsOptions = {
inline: [
/virtual:/,
@ -15,6 +15,7 @@ export function createIsExternal (viteServer: ViteDevServer, rootDir: string) {
/node_modules/
],
resolve: {
modules: modulesDirs,
type: 'module',
extensions: ['.ts', '.js', '.json', '.vue', '.mjs', '.jsx', '.tsx', '.wasm']
}

2
packages/vite/src/vite-node.ts
View File

@ -128,7 +128,7 @@ function createViteNodeApp (ctx: ViteBuildContext, invalidates: Set<string> = ne
web: []
}
})
const isExternal = createIsExternal(viteServer, ctx.nuxt.options.rootDir)
const isExternal = createIsExternal(viteServer, ctx.nuxt.options.rootDir, ctx.nuxt.options.modulesDir)
node.shouldExternalize = async (id: string) => {
const result = await isExternal(id)
if (result?.external) {

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