+
+
+
+π For more details, see the [PR implementing this change](https://github.com/nuxt/nuxt/pull/27029).
+
+##### Reasons for Change
+
+1. **Performance** - placing all your code in the root of your repo causes issues with `.git/` and `node_modules/` folders being scanned/included by FS watchers which can significantly delay startup on non-Mac OSes.
+1. **IDE type-safety** - `server/` and the rest of your app are running in two entirely different contexts with different global imports available, and making sure `server/` isn't _inside_ the same folder as the rest of your app is a big first step to ensuring you get good auto-completes in your IDE.
+
+##### Migration Steps
+
+1. Create a new directory called `app/`.
+1. Move your `assets/`, `components/`, `composables/`, `layouts/`, `middleware/`, `pages/`, `plugins/` and `utils/` folders under it, as well as `app.vue`, `error.vue`, `app.config.ts`. If you have an `app/router-options.ts` or `app/spa-loading-template.html`, these paths remain the same.
+1. Make sure your `nuxt.config.ts`, `modules/`, `public/` and `server/` folders remain outside the `app/` folder, in the root of your project.
+
+However, migration is _not required_. If you wish to keep your current folder structure, Nuxt should auto-detect it. (If it does not, please raise an issue.) You can also force a v3 folder structure with the following configuration:
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+ // This reverts the new srcDir default from `app` back to your root directory
+ srcDir: '.',
+ // This specifies the directory prefix for `app/router.options.ts` and `app/spa-loading-template.html`
+ dir: {
+ app: 'app'
+ }
+})
+```
+
+#### Shared Prerender Data
+
+π¦ **Impact Level**: Medium
+
+##### What Changed
+
+We enabled a previously experimental feature to share data from `useAsyncData` and `useFetch` calls, across different pages. See [original PR](https://github.com/nuxt/nuxt/pull/24894).
+
+##### Reasons for Change
+
+This feature automatically shares payload _data_ between pages that are prerendered. This can result in a significant performance improvement when prerendering sites that use `useAsyncData` or `useFetch` and fetch the same data in different pages.
+
+For example, if your site requires a `useFetch` call for every page (for example, to get navigation data for a menu, or site settings from a CMS), this data would only be fetched once when prerendering the first page that uses it, and then cached for use when prerendering other pages.
+
+##### Migration Steps
+
+Make sure that any unique key of your data is always resolvable to the same data. For example, if you are using `useAsyncData` to fetch data related to a particular page, you should provide a key that uniquely matches that data. (`useFetch` should do this automatically for you.)
+
+```ts [app/pages/test/[slug\\].vue]
+// This would be unsafe in a dynamic page (e.g. `[slug].vue`) because the route slug makes a difference
+// to the data fetched, but Nuxt can't know that because it's not reflected in the key.
+const route = useRoute()
+const { data } = await useAsyncData(async () => {
+ return await $fetch(`/api/my-page/${route.params.slug}`)
+})
+// Instead, you should use a key that uniquely identifies the data fetched.
+const { data } = await useAsyncData(route.params.slug, async () => {
+ return await $fetch(`/api/my-page/${route.params.slug}`)
+})
+```
+
+Alternatively, you can disable this feature with:
+
+```ts twoslash [nuxt.config.ts]
+export default defineNuxtConfig({
+ experimental: {
+ sharedPrerenderData: false
+ }
+})
+```
+
+#### Default `data` and `error` values in `useAsyncData` and `useFetch`
+
+π¦ **Impact Level**: Minimal
+
+##### What Changed
+
+`data` and `error` objects returned from `useAsyncData` will now default to `undefined`.
+
+##### Reasons for Change
+
+Previously `data` was initialized to `null` but reset in `clearNuxtData` to `undefined`. `error` was initialized to `null`. This change is to bring greater consistency.
+
+##### Migration Steps
+
+If you encounter any issues you can revert back to the previous behavior with:
+
+```ts twoslash [nuxt.config.ts]
+export default defineNuxtConfig({
+ experimental: {
+ defaults: {
+ useAsyncData: {
+ value: 'null',
+ errorValue: 'null'
+ }
+ }
+ }
+})
+```
+
+Please report an issue if you are doing this, as we do not plan to keep this as configurable.
+
+#### Respect defaults when clearing `data` in `useAsyncData` and `useFetch`
+
+π¦ **Impact Level**: Minimal
+
+##### What Changed
+
+If you provide a custom `default` value for `useAsyncData`, this will now be used when calling `clear` or `clearNuxtData` and it will be reset to its default value rather than simply unset.
+
+##### Reasons for Change
+
+Often users set an appropriately empty value, such as an empty array, to avoid the need to check for `null`/`undefined` when iterating over it. This should be respected when resetting/clearing the data.
+
+##### Migration Steps
+
+If you encounter any issues you can revert back to the previous behavior, for now, with:
+
+```ts twoslash [nuxt.config.ts]
+export default defineNuxtConfig({
+ experimental: {
+ resetAsyncDataToUndefined: true,
+ }
+})
+```
+
+Please report an issue if you are doing so, as we do not plan to keep this as configurable.
+
+#### Shallow Data Reactivity in `useAsyncData` and `useFetch`
+
+π¦ **Impact Level**: Minimal
+
+The `data` object returned from `useAsyncData`, `useFetch`, `useLazyAsyncData` and `useLazyFetch` is now a `shallowRef` rather than a `ref`.
+
+##### What Changed
+
+When new data is fetched, anything depending on `data` will still be reactive because the entire object is replaced. But if your code changes a property _within_ that data structure, this will not trigger any reactivity in your app.
+
+##### Reasons for Change
+
+This brings a **significant** performance improvement for deeply nested objects and arrays because Vue does not need to watch every single property/array for modification. In most cases, `data` should also be immutable.
+
+##### Migration Steps
+
+In most cases, no migration steps are required, but if you rely on the reactivity of the data object then you have two options:
+
+1. You can granularly opt in to deep reactivity on a per-composable basis:
+ ```diff
+ - const { data } = useFetch('/api/test')
+ + const { data } = useFetch('/api/test', { deep: true })
+ ```
+1. You can change the default behavior on a project-wide basis (not recommended):
+ ```ts twoslash [nuxt.config.ts]
+ export default defineNuxtConfig({
+ experimental: {
+ defaults: {
+ useAsyncData: {
+ deep: true
+ }
+ }
+ }
+ })
+ ```
+
+#### Absolute Watch Paths in `builder:watch`
+
+π¦ **Impact Level**: Minimal
+
+##### What Changed
+
+The Nuxt `builder:watch` hook now emits a path which is absolute rather than relative to your project `srcDir`.
+
+##### Reasons for Change
+
+This allows us to support watching paths which are outside your `srcDir`, and offers better support for layers and other more complex patterns.
+
+##### Migration Steps
+
+We have already proactively migrated the public Nuxt modules which we are aware use this hook. See [issue #25339](https://github.com/nuxt/nuxt/issues/25339).
+
+However, if you are a module author using the `builder:watch` hook and wishing to remain backwards/forwards compatible, you can use the following code to ensure that your code works the same in both Nuxt v3 and Nuxt v4:
+
+ ```diff
++ import { relative, resolve } from 'node:fs'
+ // ...
+ nuxt.hook('builder:watch', async (event, path) => {
++ path = relative(nuxt.options.srcDir, resolve(nuxt.options.srcDir, path))
+ // ...
+ })
+```
+
+#### Directory index scanning
+
+π¦ **Impact Level**: Medium
+
+##### What Changed
+
+Child folders in your `middleware/` folder are also scanned for `index` files and these are now also registered as middleware in your project.
+
+##### Reasons for Change
+
+Nuxt scans a number of folders automatically, including `middleware/` and `plugins/`.
+
+Child folders in your `plugins/` folder are scanned for `index` files and we wanted to make this behavior consistent between scanned directories.
+
+##### Migration Steps
+
+Probably no migration is necessary but if you wish to revert to previous behavior you can add a hook to filter out these middleware:
+
+```ts
+export default defineNuxtConfig({
+ hooks: {
+ 'app:resolve'(app) {
+ app.middleware = app.middleware.filter(mw => !/\/index\.[^/]+$/.test(mw.path))
+ }
+ }
+})
+```
+
+#### Template Compilation Changes
+
+π¦ **Impact Level**: Minimal
+
+##### What Changed
+
+Previously, Nuxt used `lodash/template` to compile templates located on the file system using the `.ejs` file format/syntax.
+
+In addition, we provided some template utilities (`serialize`, `importName`, `importSources`) which could be used for code-generation within these templates, which are now being removed.
+
+##### Reasons for Change
+
+In Nuxt v3 we moved to a 'virtual' syntax with a `getContents()` function which is much more flexible and performant.
+
+In addition, `lodash/template` has had a succession of security issues. These do not really apply to Nuxt projects because it is being used at build-time, not runtime, and by trusted code. However, they still appear in security audits. Moreover, `lodash` is a hefty dependency and is unused by most projects.
+
+Finally, providing code serialization functions directly within Nuxt is not ideal. Instead, we maintain projects like [unjs/knitwork](http://github.com/unjs/knitwork) which can be dependencies of your project, and where security issues can be reported/resolved directly without requiring an upgrade of Nuxt itself.
+
+##### Migration Steps
+
+We have raised PRs to update modules using EJS syntax, but if you need to do this yourself, you have three backwards/forwards-compatible alternatives:
+
+* Moving your string interpolation logic directly into `getContents()`.
+* Using a custom function to handle the replacement, such as in https://github.com/nuxt-modules/color-mode/pull/240.
+* Continuing to use `lodash`, as a dependency of _your_ project rather than Nuxt:
+
+```diff
++ import { readFileSync } from 'node:fs'
++ import { template } from 'lodash-es'
+ // ...
+ addTemplate({
+ fileName: 'appinsights-vue.js'
+ options: { /* some options */ },
+- src: resolver.resolve('./runtime/plugin.ejs'),
++ getContents({ options }) {
++ const contents = readFileSync(resolver.resolve('./runtime/plugin.ejs'), 'utf-8')
++ return template(contents)({ options })
++ },
+ })
+```
+
+Finally, if you are using the template utilities (`serialize`, `importName`, `importSources`), you can replace them as follows with utilities from `knitwork`:
+
+```ts
+import { genDynamicImport, genImport, genSafeVariableName } from 'knitwork'
+
+const serialize = (data: any) => JSON.stringify(data, null, 2).replace(/"{(.+)}"(?=,?$)/gm, r => JSON.parse(r).replace(/^{(.*)}$/, '$1'))
+
+const importSources = (sources: string | string[], { lazy = false } = {}) => {
+ return toArray(sources).map((src) => {
+ if (lazy) {
+ return `const ${genSafeVariableName(src)} = ${genDynamicImport(src, { comment: `webpackChunkName: ${JSON.stringify(src)}` })}`
+ }
+ return genImport(src, genSafeVariableName(src))
+ }).join('\n')
+}
+
+const importName = genSafeVariableName
+```
+
+#### Removal of Experimental Features
+
+π¦ **Impact Level**: Minimal
+
+##### What Changed
+
+Four experimental features are no longer configurable in Nuxt 4:
+
+* `treeshakeClientOnly` will be `true` (default since v3.0)
+* `configSchema` will be `true` (default since v3.3)
+* `polyfillVueUseHead` will be `false` (default since v3.4)
+* `respectNoSSRHeader` will be `false` (default since v3.4)
+
+##### Reasons for Change
+
+These options have been set to their current values for some time and we do not have a reason to believe that they need to remain configurable.
+
+##### Migration Steps
+
+* `polyfillVueUseHead` is implementable in user-land with [this plugin](https://github.com/nuxt/nuxt/blob/f209158352b09d1986aa320e29ff36353b91c358/packages/nuxt/src/head/runtime/plugins/vueuse-head-polyfill.ts#L10-L11)
+
+* `respectNoSSRHeader`is implementable in user-land with [server middleware](https://github.com/nuxt/nuxt/blob/c660b39447f0d5b8790c0826092638d321cd6821/packages/nuxt/src/core/runtime/nitro/no-ssr.ts#L8-L9)
## Nuxt 2 vs Nuxt 3
@@ -26,7 +428,7 @@ In the table below, there is a quick comparison between 3 versions of Nuxt:
Feature / Version | Nuxt 2 | Nuxt Bridge | Nuxt 3
-------------------------|-----------------|------------------|---------
Vue | 2 | 2 | 3
-Stability | π Stable | π Semi-stable | π Stable
+Stability | π Stable | π Stable | π Stable
Performance | π Fast | βοΈ Faster | π Fastest
Nitro Engine | β | β
| β
ESM support | π Partial | π Better | β
diff --git a/docs/1.getting-started/3.configuration.md b/docs/1.getting-started/3.configuration.md
index c14e01f2f..49a0822ec 100644
--- a/docs/1.getting-started/3.configuration.md
+++ b/docs/1.getting-started/3.configuration.md
@@ -46,6 +46,10 @@ export default defineNuxtConfig({
})
```
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=DFZI2iVCrNc" target="_blank"}
+Watch a video from Alexander Lichter about the env-aware `nuxt.config.ts`.
+::
+
::note
If you're authoring layers, you can also use the `$meta` key to provide metadata that you or the consumers of your layer might use.
::
diff --git a/docs/1.getting-started/6.data-fetching.md b/docs/1.getting-started/6.data-fetching.md
index 5a69126ea..32976b1f2 100644
--- a/docs/1.getting-started/6.data-fetching.md
+++ b/docs/1.getting-started/6.data-fetching.md
@@ -16,9 +16,9 @@ Both `useFetch` and `useAsyncData` share a common set of options and patterns th
Before that, it's imperative to know why these composables exist in the first place.
-## Why using specific composables?
+## Why use specific composables for data fetching?
-When using a framework like Nuxt that can perform calls and render pages on both client and server environments, some challenges must be addressed. This is why Nuxt provides composables to wrap your queries, instead of letting the developer rely on [`$fetch`](/docs/api/utils/dollarfetch) calls alone.
+Nuxt is a framework which can run isomorphic (or universal) code in both server and client environments. If the [`$fetch` function](/docs/api/utils/dollarfetch) is used to perform data fetching in the setup function of a Vue component, this may cause data to be fetched twice, once on the server (to render the HTML) and once again on the client (when the HTML is hydrated). This is why Nuxt offers specific data fetching composables so data is fetched only once.
### Network calls duplication
@@ -54,6 +54,10 @@ const { data: count } = await useFetch('/api/count')
This composable is a wrapper around the [`useAsyncData`](/docs/api/composables/use-async-data) composable and `$fetch` utility.
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=njsGVmcWviY" target="_blank"}
+Watch the video from Alexander Lichter to avoid using `useFetch` the wrong way!
+::
+
:read-more{to="/docs/api/composables/use-fetch"}
:link-example{to="/docs/examples/features/data-fetching"}
@@ -76,7 +80,7 @@ async function addTodo() {
```
::warning
-Beware that using only `$fetch` will not provide [network calls de-duplication and navigation prevention](#why-using-specific-composables). :br
+Beware that using only `$fetch` will not provide [network calls de-duplication and navigation prevention](#why-use-specific-composables-for-data-fetching). :br
It is recommended to use `$fetch` for client-side interactions (event based) or combined with [`useAsyncData`](#useasyncdata) when fetching the initial component data.
::
@@ -93,6 +97,10 @@ The `useAsyncData` composable is responsible for wrapping async logic and return
It's developer experience sugar for the most common use case.
::
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=0X-aOpSGabA" target="_blank"}
+Watch a video from Alexander Lichter to dig deeper into the difference between `useFetch` and `useAsyncData`.
+::
+
There are some cases when using the [`useFetch`](/docs/api/composables/use-fetch) composable is not appropriate, for example when a CMS or a third-party provide their own query layer. In this case, you can use [`useAsyncData`](/docs/api/composables/use-async-data) to wrap your calls and still keep the benefits provided by the composable.
```vue [pages/users.vue]
diff --git a/docs/1.getting-started/7.state-management.md b/docs/1.getting-started/7.state-management.md
index d9edf3f16..4957fb4a1 100644
--- a/docs/1.getting-started/7.state-management.md
+++ b/docs/1.getting-started/7.state-management.md
@@ -8,6 +8,10 @@ Nuxt provides the [`useState`](/docs/api/composables/use-state) composable to cr
[`useState`](/docs/api/composables/use-state) is an SSR-friendly [`ref`](https://vuejs.org/api/reactivity-core.html#ref) replacement. Its value will be preserved after server-side rendering (during client-side hydration) and shared across all components using a unique key.
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=mv0WcBABcIk" target="_blank"}
+Watch a video from Alexander Lichter about why and when to use `useState()`.
+::
+
::important
Because the data inside [`useState`](/docs/api/composables/use-state) will be serialized to JSON, it is important that it does not contain anything that cannot be serialized, such as classes, functions or symbols.
::
@@ -208,6 +212,10 @@ const color = useColor() // Same as useState('color')
```
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=dZSNW07sO-A" target="_blank"}
+Watch a video from Daniel Roe on how to deal with global state and SSR in Nuxt.
+::
+
## Using third-party libraries
Nuxt **used to rely** on the Vuex library to provide global state management. If you are migrating from Nuxt 2, please head to [the migration guide](/docs/migration/configuration#vuex).
diff --git a/docs/1.getting-started/8.server.md b/docs/1.getting-started/8.server.md
index 49e0f2146..2a67cc394 100644
--- a/docs/1.getting-started/8.server.md
+++ b/docs/1.getting-started/8.server.md
@@ -20,6 +20,10 @@ Using Nitro gives Nuxt superpowers:
Nitro is internally using [h3](https://github.com/unjs/h3), a minimal H(TTP) framework built for high performance and portability.
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=DkvgJa-X31k" target="_blank"}
+Watch a video from Alexander Lichter to understand the responsibilities of Nuxt and Nitro in your application.
+::
+
## Server Endpoints & Middleware
You can easily manage the server-only part of your Nuxt app, from API endpoints to middleware.
diff --git a/docs/1.getting-started/9.layers.md b/docs/1.getting-started/9.layers.md
index 0c2550794..7e05dadaf 100644
--- a/docs/1.getting-started/9.layers.md
+++ b/docs/1.getting-started/9.layers.md
@@ -51,7 +51,7 @@ Read more about layers in the **Layer Author Guide**.
Watch a video from Learn Vue about Nuxt Layers.
::
-::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=fr5yo3aVkfA&t=271s" target="_blank"}
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=fr5yo3aVkfA" target="_blank"}
Watch a video from Alexander Lichter about Nuxt Layers.
::
diff --git a/docs/2.guide/0.index.md b/docs/2.guide/0.index.md
index b45915e12..a93d01cdb 100644
--- a/docs/2.guide/0.index.md
+++ b/docs/2.guide/0.index.md
@@ -16,4 +16,7 @@ surround: false
::card{icon="i-ph-star-duotone" title="Going Further" to="/docs/guide/going-further"}
Master Nuxt with advanced concepts like experimental features, hooks, modules, and more.
::
+ ::card{icon="i-ph-book-open-duotone" title="Recipes" to="/docs/guide/recipes"}
+ Find solutions to common problems and learn how to implement them in your Nuxt project.
+ ::
::
diff --git a/docs/2.guide/1.concepts/1.auto-imports.md b/docs/2.guide/1.concepts/1.auto-imports.md
index 0fd8a3b63..a7e24cd84 100644
--- a/docs/2.guide/1.concepts/1.auto-imports.md
+++ b/docs/2.guide/1.concepts/1.auto-imports.md
@@ -60,6 +60,10 @@ That means that (with very few exceptions) you cannot use them outside a Nuxt pl
If you get an error message like `Nuxt instance is unavailable` then it probably means you are calling a Nuxt composable in the wrong place in the Vue or Nuxt lifecycle.
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=ofuKRZLtOdY" target="_blank"}
+Watch a video from Alexander Lichter about handling async code in composables and fixing `Nuxt instance is unavailable` in your app.
+::
+
::read-more{to="/docs/guide/going-further/experimental-features#asynccontext" icon="i-ph-star-duotone"}
Checkout the `asyncContext` experimental feature to use Nuxt composables in async functions.
::
@@ -168,3 +172,7 @@ export default defineNuxtConfig({
}
})
```
+
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=FT2LQJ2NvVI" target="_blank"}
+Watch a video from Alexander Lichter on how to easily set up custom auto imports.
+::
diff --git a/docs/2.guide/1.concepts/8.typescript.md b/docs/2.guide/1.concepts/8.typescript.md
index 3c57bd746..4e07f3563 100644
--- a/docs/2.guide/1.concepts/8.typescript.md
+++ b/docs/2.guide/1.concepts/8.typescript.md
@@ -65,6 +65,10 @@ This file contains the recommended basic TypeScript configuration for your proje
[Read more about how to extend this configuration](/docs/guide/directory-structure/tsconfig).
+::tip{icon="i-ph-video-duotone" to="https://youtu.be/umLI7SlPygY" target="_blank"}
+Watch a video from Daniel Roe explaining built-in Nuxt aliases.
+::
+
::note
Nitro also [auto-generates types](/docs/guide/concepts/server-engine#typed-api-routes) for API routes. Plus, Nuxt also generates types for globally available components and [auto-imports from your composables](/docs/guide/directory-structure/composables), plus other core functionality.
::
diff --git a/docs/2.guide/2.directory-structure/1.components.md b/docs/2.guide/2.directory-structure/1.components.md
index 0685a3389..0cdf5cb4b 100644
--- a/docs/2.guide/2.directory-structure/1.components.md
+++ b/docs/2.guide/2.directory-structure/1.components.md
@@ -259,7 +259,7 @@ Watch Learn Vue video about Nuxt Server Components.
::
::tip{icon="i-ph-article-duotone" to="https://roe.dev/blog/nuxt-server-components" target="_blank"}
-Read Daniel Roe's guide to Nuxt server components
+Read Daniel Roe's guide to Nuxt Server Components.
::
### Standalone server components
diff --git a/docs/2.guide/2.directory-structure/1.modules.md b/docs/2.guide/2.directory-structure/1.modules.md
index 2664e5601..ce9de8f9f 100644
--- a/docs/2.guide/2.directory-structure/1.modules.md
+++ b/docs/2.guide/2.directory-structure/1.modules.md
@@ -46,7 +46,11 @@ export default defineEventHandler(() => {
When starting Nuxt, the `hello` module will be registered and the `/api/hello` route will be available.
-Local modules are registered in alphabetical order. You can change the order by adding a number to the front of each directory name:
+Modules are executed in the following sequence:
+- First, the modules defined in [`nuxt.config.ts`](/docs/api/nuxt-config#modules-1) are loaded.
+- Then, modules found in the `modules/` directory are executed, and they load in alphabetical order.
+
+You can change the order of local module by adding a number to the front of each directory name:
```bash [Directory structure]
modules/
diff --git a/docs/2.guide/2.directory-structure/1.plugins.md b/docs/2.guide/2.directory-structure/1.plugins.md
index 3753847b5..b525b1f4c 100644
--- a/docs/2.guide/2.directory-structure/1.plugins.md
+++ b/docs/2.guide/2.directory-structure/1.plugins.md
@@ -76,6 +76,10 @@ export default defineNuxtPlugin({
})
```
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=2aXZyXB1QGQ" target="_blank"}
+Watch a video from Alexander Lichter about the Object Syntax for Nuxt plugins.
+::
+
::note
If you are using the object-syntax, the properties may be statically analyzed in future to produce a more optimized build. So you should not define them at runtime. :br
For example, setting `enforce: import.meta.server ? 'pre' : 'post'` would defeat any future optimization Nuxt is able to do for your plugins.
diff --git a/docs/2.guide/2.directory-structure/2.env.md b/docs/2.guide/2.directory-structure/2.env.md
index 660a8138d..0a39c625a 100644
--- a/docs/2.guide/2.directory-structure/2.env.md
+++ b/docs/2.guide/2.directory-structure/2.env.md
@@ -33,11 +33,25 @@ npx nuxi dev --dotenv .env.local
When updating `.env` in development mode, the Nuxt instance is automatically restarted to apply new values to the `process.env`.
-## Production Preview
+## Production
**After your server is built**, you are responsible for setting environment variables when you run the server.
-Your `.env` file will not be read at this point. How you do this is different for every environment.
+Your `.env` files will not be read at this point. How you do this is different for every environment.
+
+This design decision was made to ensure compatibility across various deployment environments, some of which may not have a traditional file system available, such as serverless platforms or edge networks like Cloudflare Workers.
+
+Since `.env` files are not used in production, you must explicitly set environment variables using the tools and methods provided by your hosting environment. Here are some common approaches:
+
+* You can pass the environment variables as arguments using the terminal:
+
+ `$ DATABASE_HOST=mydatabaseconnectionstring node .output/server/index.mjs`
+
+* You can set environment variables in shell configuration files like `.bashrc` or `.profile`.
+
+* Many cloud service providers, such as Vercel, Netlify, and AWS, provide interfaces for setting environment variables via their dashboards, CLI tools or configuration files.
+
+## Production Preview
For local production preview purpose, we recommend using [`nuxi preview`](/docs/api/commands/preview) since using this command, the `.env` file will be loaded into `process.env` for convenience. Note that this command requires dependencies to be installed in the package directory.
diff --git a/docs/2.guide/3.going-further/1.experimental-features.md b/docs/2.guide/3.going-further/1.experimental-features.md
index fd6ad8d44..691a2187c 100644
--- a/docs/2.guide/3.going-further/1.experimental-features.md
+++ b/docs/2.guide/3.going-further/1.experimental-features.md
@@ -306,6 +306,10 @@ Out of the box, this will enable typed usage of [`navigateTo`](/docs/api/utils/n
You can even get typed params within a page by using `const route = useRoute('route-name')`.
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=SXk-L19gTZk" target="_blank"}
+Watch a video from Daniel Roe explaining type-safe routing in Nuxt.
+::
+
## watcher
Set an alternative watcher that will be used as the watching service for Nuxt.
@@ -340,6 +344,10 @@ export default defineNuxtConfig({
})
```
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=1jUupYHVvrU" target="_blank"}
+Watch a video from Alexander Lichter about the experimental `sharedPrerenderData` setting.
+::
+
It is particularly important when enabling this feature to make sure that any unique key of your data
is always resolvable to the same data. For example, if you are using `useAsyncData` to fetch
data related to a particular page, you should provide a key that uniquely matches that data. (`useFetch`
@@ -378,6 +386,16 @@ This option allows exposing some route metadata defined in `definePageMeta` at b
This only works with static or strings/arrays rather than variables or conditional assignment. See [original issue](https://github.com/nuxt/nuxt/issues/24770) for more information and context.
+
+
## cookieStore
Enables CookieStore support to listen for cookie updates (if supported by the browser) and refresh `useCookie` ref values.
diff --git a/docs/2.guide/3.going-further/1.features.md b/docs/2.guide/3.going-further/1.features.md
index 9439d708b..4ec31794a 100644
--- a/docs/2.guide/3.going-further/1.features.md
+++ b/docs/2.guide/3.going-further/1.features.md
@@ -40,7 +40,7 @@ There is also a `future` namespace for early opting-in to new features that will
### compatibilityVersion
::important
-This configuration option is available in Nuxt v3.12+.
+This configuration option is available in Nuxt v3.12+ or in [the nightly release channel](/docs/guide/going-further/nightly-release-channel).
::
This enables early access to Nuxt features or flags.
@@ -69,6 +69,11 @@ export default defineNuxtConfig({
deep: true
}
}
+ },
+ unhead: {
+ renderSSRHeadOptions: {
+ omitLineBreaks: false
+ }
}
})
```
diff --git a/docs/2.guide/3.going-further/10.runtime-config.md b/docs/2.guide/3.going-further/10.runtime-config.md
index e84823704..9a1832ad5 100644
--- a/docs/2.guide/3.going-further/10.runtime-config.md
+++ b/docs/2.guide/3.going-further/10.runtime-config.md
@@ -61,6 +61,10 @@ Setting the default of `runtimeConfig` values to *differently named environment
It is advised to use environment variables that match the structure of your `runtimeConfig` object.
::
+::tip{icon="i-ph-video-duotone" to="https://youtu.be/_FYV5WfiWvs" target="_blank"}
+Watch a video from Alexander Lichter showcasing the top mistake developers make using runtimeConfig.
+::
+
#### Example
```sh [.env]
diff --git a/docs/2.guide/3.going-further/4.kit.md b/docs/2.guide/3.going-further/4.kit.md
index 061073751..226762b89 100644
--- a/docs/2.guide/3.going-further/4.kit.md
+++ b/docs/2.guide/3.going-further/4.kit.md
@@ -15,6 +15,10 @@ Discover all Nuxt Kit utilities.
You can install the latest Nuxt Kit by adding it to the `dependencies` section of your `package.json`. However, please consider always explicitly installing the `@nuxt/kit` package even if it is already installed by Nuxt.
+::note
+`@nuxt/kit` and `@nuxt/schema` are key dependencies for Nuxt. If you are installing it separately, make sure that the versions of `@nuxt/kit` and `@nuxt/schema` are equal to or greater than your `nuxt` version to avoid any unexpected behavior.
+::
+
```json [package.json]
{
"dependencies": {
diff --git a/docs/2.guide/4.recipes/3.custom-usefetch.md b/docs/2.guide/4.recipes/3.custom-usefetch.md
new file mode 100644
index 000000000..e27af2712
--- /dev/null
+++ b/docs/2.guide/4.recipes/3.custom-usefetch.md
@@ -0,0 +1,105 @@
+---
+navigation.title: 'Custom useFetch'
+title: Custom useFetch in Nuxt
+description: How to create a custom fetcher for calling your external API in Nuxt 3.
+---
+
+When working with Nuxt, you might be making the frontend and fetching an external API, and you might want to set some default options for fetching from your API.
+
+The [`$fetch`](/docs/api/utils/dollarfetch) utility function (used by the [`useFetch`](/docs/api/composables/use-fetch) composable) is intentionally not globally configurable. This is important so that fetching behavior throughout your application remains consistent, and other integrations (like modules) can rely on the behavior of core utilities like `$fetch`.
+
+However, Nuxt provides a way to create a custom fetcher for your API (or multiple fetchers if you have multiple APIs to call).
+
+## Custom `$fetch`
+
+Let's create a custom `$fetch` instance with a [Nuxt plugin](/docs/guide/directory-structure/plugins).
+
+::note
+`$fetch` is a configured instance of [ofetch](https://github.com/unjs/ofetch) which supports adding the base URL of your Nuxt server as well as direct function calls during SSR (avoiding HTTP roundtrips).
+::
+
+Let's pretend here that:
+- The main API is https://api.nuxt.com
+- We are storing the JWT token in a session with [nuxt-auth-utils](https://github.com/atinux/nuxt-auth-utils)
+- If the API responds with a `401` status code, we redirect the user to the `/login` page
+
+```ts [plugins/api.ts]
+export default defineNuxtPlugin(() => {
+ const { session } = useUserSession()
+
+ const api = $fetch.create({
+ baseURL: 'https://api.nuxt.com',
+ onRequest({ request, options, error }) {
+ if (session.value?.token) {
+ const headers = options.headers ||= {}
+ if (Array.isArray(headers)) {
+ headers.push(['Authorization', `Bearer ${session.value?.token}`])
+ } else if (headers instanceof Headers) {
+ headers.set('Authorization', `Bearer ${session.value?.token}`)
+ } else {
+ headers.Authorization = `Bearer ${session.value?.token}`
+ }
+ }
+ },
+ async onResponseError({ response }) {
+ if (response.status === 401) {
+ await navigateTo('/login')
+ }
+ }
+ })
+
+ // Expose to useNuxtApp().$api
+ return {
+ provide: {
+ api
+ }
+ }
+})
+```
+
+With this Nuxt plugin, `$api` is exposed from `useNuxtApp()` to make API calls directly from the Vue components:
+
+```vue [app.vue]
+
+```
+
+::callout
+Wrapping with [`useAsyncData`](/docs/api/composables/use-async-data) **avoid double data fetching when doing server-side rendering** (server & client on hydration).
+::
+
+## Custom `useFetch`
+
+Now that `$api` has the logic we want, let's create a `useAPI` composable to replace the usage of `useAsyncData` + `$api`:
+
+```ts [composables/useAPI.ts]
+import type { UseFetchOptions } from 'nuxt/app'
+
+export function useAPIAn example v4 folder structure.
+ +```sh +.output/ +.nuxt/ +app/ + assets/ + components/ + composables/ + layouts/ + middleware/ + pages/ + plugins/ + utils/ + app.config.ts + app.vue + router.options.ts +modules/ +node_modules/ +public/ +server/ + api/ + middleware/ + plugins/ + routes/ + utils/ +nuxt.config.ts +``` + +
+ Hi there
+
+
+```
diff --git a/docs/3.api/2.composables/use-cookie.md b/docs/3.api/2.composables/use-cookie.md
index 4319f7f05..804d3e278 100644
--- a/docs/3.api/2.composables/use-cookie.md
+++ b/docs/3.api/2.composables/use-cookie.md
@@ -59,13 +59,10 @@ Use these options to set the expiration of the cookie.
The given number will be converted to an integer by rounding down. By default, no maximum age is set.
`expires`: Specifies the `Date` object to be the value for the [`Expires` `Set-Cookie` attribute](https://tools.ietf.org/html/rfc6265#section-5.2.1).
-By default, no expiration is set. Most clients will consider this a "non-persistent cookie" and
-will delete it on a condition like exiting a web browser application.
+By default, no expiration is set. Most clients will consider this a "non-persistent cookie" and will delete it on a condition like exiting a web browser application.
::note
-The [cookie storage model specification](https://tools.ietf.org/html/rfc6265#section-5.3) states that if both `expires` and
-`maxAge` is set, then `maxAge` takes precedence, but not all clients may obey this,
-so if both are set, they should point to the same date and time!
+The [cookie storage model specification](https://tools.ietf.org/html/rfc6265#section-5.3) states that if both `expires` and `maxAge` is set, then `maxAge` takes precedence, but not all clients may obey this, so if both are set, they should point to the same date and time!
::
::note
@@ -74,22 +71,29 @@ If neither of `expires` and `maxAge` is set, the cookie will be session-only and
### `httpOnly`
-Specifies the `boolean` value for the [`HttpOnly` `Set-Cookie` attribute](https://tools.ietf.org/html/rfc6265#section-5.2.6). When truthy,
-the `HttpOnly` attribute is set; otherwise it is not. By default, the `HttpOnly` attribute is not set.
+Specifies the `boolean` value for the [`HttpOnly` `Set-Cookie` attribute](https://tools.ietf.org/html/rfc6265#section-5.2.6). When truthy, the `HttpOnly` attribute is set; otherwise it is not. By default, the `HttpOnly` attribute is not set.
::warning
-Be careful when setting this to `true`, as compliant clients will not allow client-side
-JavaScript to see the cookie in `document.cookie`.
+Be careful when setting this to `true`, as compliant clients will not allow client-side JavaScript to see the cookie in `document.cookie`.
::
### `secure`
-Specifies the `boolean` value for the [`Secure` `Set-Cookie` attribute](https://tools.ietf.org/html/rfc6265#section-5.2.5). When truthy,
-the `Secure` attribute is set; otherwise it is not. By default, the `Secure` attribute is not set.
+Specifies the `boolean` value for the [`Secure` `Set-Cookie` attribute](https://tools.ietf.org/html/rfc6265#section-5.2.5). When truthy, the `Secure` attribute is set; otherwise it is not. By default, the `Secure` attribute is not set.
::warning
-Be careful when setting this to `true`, as compliant clients will not send the cookie back to
-the server in the future if the browser does not have an HTTPS connection. This can lead to hydration errors.
+Be careful when setting this to `true`, as compliant clients will not send the cookie back to the server in the future if the browser does not have an HTTPS connection. This can lead to hydration errors.
+::
+
+### `partitioned`
+
+Specifies the `boolean` value for the [`Partitioned` `Set-Cookie`](https://datatracker.ietf.org/doc/html/draft-cutler-httpbis-partitioned-cookies#section-2.1) attribute. When truthy, the `Partitioned` attribute is set, otherwise it is not. By default, the `Partitioned` attribute is not set.
+
+::note
+This is an attribute that has not yet been fully standardized, and may change in the future.
+This also means many clients may ignore this attribute until they understand it.
+
+More information can be found in the [proposal](https://github.com/privacycg/CHIPS).
::
### `domain`
@@ -114,23 +118,18 @@ More information about the different enforcement levels can be found in [the spe
### `encode`
-Specifies a function that will be used to encode a cookie's value. Since the value of a cookie
-has a limited character set (and must be a simple string), this function can be used to encode
-a value into a string suited for a cookie's value.
+Specifies a function that will be used to encode a cookie's value. Since the value of a cookie has a limited character set (and must be a simple string), this function can be used to encode a value into a string suited for a cookie's value.
The default encoder is the `JSON.stringify` + `encodeURIComponent`.
### `decode`
-Specifies a function that will be used to decode a cookie's value. Since the value of a cookie
-has a limited character set (and must be a simple string), this function can be used to decode
-a previously encoded cookie value into a JavaScript string or other object.
+Specifies a function that will be used to decode a cookie's value. Since the value of a cookie has a limited character set (and must be a simple string), this function can be used to decode a previously encoded cookie value into a JavaScript string or other object.
The default decoder is `decodeURIComponent` + [destr](https://github.com/unjs/destr).
::note
-If an error is thrown from this function, the original, non-decoded cookie value will
-be returned as the cookie's value.
+If an error is thrown from this function, the original, non-decoded cookie value will be returned as the cookie's value.
::
### `default`
diff --git a/docs/3.api/2.composables/use-fetch.md b/docs/3.api/2.composables/use-fetch.md
index e0149ce11..84a73d0fc 100644
--- a/docs/3.api/2.composables/use-fetch.md
+++ b/docs/3.api/2.composables/use-fetch.md
@@ -66,6 +66,10 @@ const { data, pending, error, refresh } = await useFetch('/api/auth/login', {
`useFetch` is a reserved function name transformed by the compiler, so you should not name your own function `useFetch`.
::
+::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=njsGVmcWviY" target="_blank"}
+Watch the video from Alexander Lichter to avoid using `useFetch` the wrong way!
+::
+
:link-example{to="/docs/examples/advanced/use-custom-fetch-composable"}
:read-more{to="/docs/getting-started/data-fetching"}
@@ -83,6 +87,8 @@ const { data, pending, error, refresh } = await useFetch('/api/auth/login', {
- `headers`: Request headers.
- `baseURL`: Base URL for the request.
- `timeout`: Milliseconds to automatically abort request
+ - `cache`: Handles cache control according to [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/fetch#cache)
+ - You can pass boolean to disable the cache or you can pass one of the following values: `default`, `no-store`, `reload`, `no-cache`, `force-cache`, and `only-if-cached`.
::note
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.
diff --git a/docs/3.api/2.composables/use-loading-indicator.md b/docs/3.api/2.composables/use-loading-indicator.md
index 2e4a5bb97..357c260bb 100644
--- a/docs/3.api/2.composables/use-loading-indicator.md
+++ b/docs/3.api/2.composables/use-loading-indicator.md
@@ -26,6 +26,11 @@ It hooks into [`page:loading:start`](/docs/api/advanced/hooks#app-hooks-runtime)
- **type**: `Ref when plugins have thrown an error but we're not yet rendering the error page
+const abortRender = import.meta.server && error.value && !nuxtApp.ssrContext.error
onErrorCaptured((err, target, info) => {
nuxtApp.hooks.callHook('vue:error', err, target, info).catch(hookError => console.error('[nuxt] Error in `vue:error` hook', hookError))
if (import.meta.server || (isNuxtError(err) && (err.fatal || err.unhandled))) {
diff --git a/packages/nuxt/src/app/components/nuxt-teleport-island-component.ts b/packages/nuxt/src/app/components/nuxt-teleport-island-component.ts
index 002a2441a..31b2c0718 100644
--- a/packages/nuxt/src/app/components/nuxt-teleport-island-component.ts
+++ b/packages/nuxt/src/app/components/nuxt-teleport-island-component.ts
@@ -27,14 +27,6 @@ export default defineComponent({
type: Boolean,
default: false,
},
- /**
- * ONLY used in dev mode since we use build:manifest result in production
- * do not pass any value in production
- */
- rootDir: {
- type: String,
- default: null,
- },
},
setup (props, { slots }) {
const nuxtApp = useNuxtApp()
diff --git a/packages/nuxt/src/app/components/test-component-wrapper.ts b/packages/nuxt/src/app/components/test-component-wrapper.ts
index 31520ae0b..8b0da2438 100644
--- a/packages/nuxt/src/app/components/test-component-wrapper.ts
+++ b/packages/nuxt/src/app/components/test-component-wrapper.ts
@@ -1,4 +1,3 @@
-import { parseURL } from 'ufo'
import { defineComponent, h } from 'vue'
import { parseQuery } from 'vue-router'
import { resolve } from 'pathe'
@@ -10,15 +9,15 @@ export default (url: string) => defineComponent({
name: 'NuxtTestComponentWrapper',
async setup (props, { attrs }) {
- const query = parseQuery(parseURL(url).search)
+ const query = parseQuery(new URL(url, 'http://localhost').search)
const urlProps = query.props ? destr>(query.props as string) : {}
const path = resolve(query.path as string)
if (!path.startsWith(devRootDir)) {
throw new Error(`[nuxt] Cannot access path outside of project root directory: \`${path}\`.`)
}
- const comp = await import(/* @vite-ignore */ query.path as string).then(r => r.default)
+ const comp = await import(/* @vite-ignore */ path as string).then(r => r.default)
return () => [
- h('div', 'Component Test Wrapper for ' + query.path),
+ h('div', 'Component Test Wrapper for ' + path),
h('div', { id: 'nuxt-component-root' }, [
h(comp, { ...attrs, ...props, ...urlProps }),
]),
diff --git a/packages/nuxt/src/app/composables/asyncData.ts b/packages/nuxt/src/app/composables/asyncData.ts
index 5426155be..aafb729e1 100644
--- a/packages/nuxt/src/app/composables/asyncData.ts
+++ b/packages/nuxt/src/app/composables/asyncData.ts
@@ -8,7 +8,10 @@ import { createError } from './error'
import { onNuxtReady } from './ready'
// @ts-expect-error virtual file
-import { asyncDataDefaults } from '#build/nuxt.config.mjs'
+import { asyncDataDefaults, resetAsyncDataToUndefined } from '#build/nuxt.config.mjs'
+
+// TODO: temporary module for backwards compatibility
+import type { DefaultAsyncDataErrorValue, DefaultAsyncDataValue } from '#app/defaults'
export type AsyncDataRequestStatus = 'idle' | 'pending' | 'success' | 'error'
@@ -42,7 +45,7 @@ export interface AsyncDataOptions<
ResT,
DataT = ResT,
PickKeys extends KeysOf = KeysOf,
- DefaultT = null,
+ DefaultT = DefaultAsyncDataValue,
> {
/**
* Whether to fetch on the server side.
@@ -117,7 +120,7 @@ export interface _AsyncData {
refresh: (opts?: AsyncDataExecuteOptions) => Promise
execute: (opts?: AsyncDataExecuteOptions) => Promise
clear: () => void
- error: Ref
+ error: Ref
status: Ref
}
@@ -138,11 +141,11 @@ export function useAsyncData<
NuxtErrorDataT = unknown,
DataT = ResT,
PickKeys extends KeysOf = KeysOf,
- DefaultT = null,
+ DefaultT = DefaultAsyncDataValue,
> (
handler: (ctx?: NuxtApp) => Promise,
options?: AsyncDataOptions
-): AsyncData | DefaultT, (NuxtErrorDataT extends Error | NuxtError ? NuxtErrorDataT : NuxtError) | null>
+): AsyncData | DefaultT, (NuxtErrorDataT extends Error | NuxtError ? NuxtErrorDataT : NuxtError) | DefaultAsyncDataErrorValue>
/**
* Provides access to data that resolves asynchronously in an SSR-friendly composable.
* See {@link https://nuxt.com/docs/api/composables/use-async-data}
@@ -158,7 +161,7 @@ export function useAsyncData<
> (
handler: (ctx?: NuxtApp) => Promise,
options?: AsyncDataOptions
-): AsyncData | DefaultT, (NuxtErrorDataT extends Error | NuxtError ? NuxtErrorDataT : NuxtError) | null>
+): AsyncData | DefaultT, (NuxtErrorDataT extends Error | NuxtError ? NuxtErrorDataT : NuxtError) | DefaultAsyncDataErrorValue>
/**
* Provides access to data that resolves asynchronously in an SSR-friendly composable.
* See {@link https://nuxt.com/docs/api/composables/use-async-data}
@@ -171,12 +174,12 @@ export function useAsyncData<
NuxtErrorDataT = unknown,
DataT = ResT,
PickKeys extends KeysOf = KeysOf,
- DefaultT = null,
+ DefaultT = DefaultAsyncDataValue,
> (
key: string,
handler: (ctx?: NuxtApp) => Promise,
options?: AsyncDataOptions
-): AsyncData | DefaultT, (NuxtErrorDataT extends Error | NuxtError ? NuxtErrorDataT : NuxtError) | null>
+): AsyncData | DefaultT, (NuxtErrorDataT extends Error | NuxtError ? NuxtErrorDataT : NuxtError) | DefaultAsyncDataErrorValue>
/**
* Provides access to data that resolves asynchronously in an SSR-friendly composable.
* See {@link https://nuxt.com/docs/api/composables/use-async-data}
@@ -194,14 +197,14 @@ export function useAsyncData<
key: string,
handler: (ctx?: NuxtApp) => Promise,
options?: AsyncDataOptions
-): AsyncData | DefaultT, (NuxtErrorDataT extends Error | NuxtError ? NuxtErrorDataT : NuxtError) | null>
+): AsyncData | DefaultT, (NuxtErrorDataT extends Error | NuxtError ? NuxtErrorDataT : NuxtError) | DefaultAsyncDataErrorValue>
export function useAsyncData<
ResT,
NuxtErrorDataT = unknown,
DataT = ResT,
PickKeys extends KeysOf = KeysOf,
- DefaultT = null,
-> (...args: any[]): AsyncData, (NuxtErrorDataT extends Error | NuxtError ? NuxtErrorDataT : NuxtError) | null> {
+ DefaultT = DefaultAsyncDataValue,
+> (...args: any[]): AsyncData, (NuxtErrorDataT extends Error | NuxtError ? NuxtErrorDataT : NuxtError) | DefaultAsyncDataErrorValue> {
const autoKey = typeof args[args.length - 1] === 'string' ? args.pop() : undefined
if (typeof args[0] !== 'string') { args.unshift(autoKey) }
@@ -226,14 +229,14 @@ export function useAsyncData<
const value = nuxtApp.ssrContext!._sharedPrerenderCache!.get(key)
if (value) { return value as Promise }
- const promise = nuxtApp.runWithContext(_handler)
+ const promise = Promise.resolve().then(() => nuxtApp.runWithContext(_handler))
nuxtApp.ssrContext!._sharedPrerenderCache!.set(key, promise)
return promise
}
// Used to get default values
- const getDefault = () => null
+ const getDefault = () => asyncDataDefaults.value
const getDefaultCachedData = () => nuxtApp.isHydrating ? nuxtApp.payload.data[key] : nuxtApp.static.data[key]
// Apply defaults
@@ -250,11 +253,12 @@ export function useAsyncData<
console.warn('[nuxt] `boolean` values are deprecated for the `dedupe` option of `useAsyncData` and will be removed in the future. Use \'cancel\' or \'defer\' instead.')
}
+ // TODO: make more precise when v4 lands
const hasCachedData = () => options.getCachedData!(key, nuxtApp) != null
// Create or use a shared asyncData entity
if (!nuxtApp._asyncData[key] || !options.immediate) {
- nuxtApp.payload._errors[key] ??= null
+ nuxtApp.payload._errors[key] ??= asyncDataDefaults.errorValue
const _ref = options.deep ? ref : shallowRef
@@ -263,11 +267,15 @@ export function useAsyncData<
pending: ref(!hasCachedData()),
error: toRef(nuxtApp.payload._errors, key),
status: ref('idle'),
+ _default: options.default!,
}
}
// TODO: Else, somehow check for conflicting keys with different defaults or fetcher
- const asyncData = { ...nuxtApp._asyncData[key] } as AsyncData)>
+ const asyncData = { ...nuxtApp._asyncData[key] } as { _default?: unknown } & AsyncData)>
+
+ // Don't expose default function to end user
+ delete asyncData._default
asyncData.refresh = asyncData.execute = (opts = {}) => {
if (nuxtApp._asyncDataPromises[key]) {
@@ -307,7 +315,7 @@ export function useAsyncData<
nuxtApp.payload.data[key] = result
asyncData.data.value = result
- asyncData.error.value = null
+ asyncData.error.value = asyncDataDefaults.errorValue
asyncData.status.value = 'success'
})
.catch((error: any) => {
@@ -378,9 +386,7 @@ export function useAsyncData<
const hasScope = getCurrentScope()
if (options.watch) {
const unsub = watch(options.watch, () => asyncData.refresh())
- if (instance) {
- onUnmounted(unsub)
- } else if (hasScope) {
+ if (hasScope) {
onScopeDispose(unsub)
}
}
@@ -389,9 +395,7 @@ export function useAsyncData<
await asyncData.refresh()
}
})
- if (instance) {
- onUnmounted(off)
- } else if (hasScope) {
+ if (hasScope) {
onScopeDispose(off)
}
}
@@ -408,11 +412,11 @@ export function useLazyAsyncData<
DataE = Error,
DataT = ResT,
PickKeys extends KeysOf = KeysOf,
- DefaultT = null,
+ DefaultT = DefaultAsyncDataValue,
> (
handler: (ctx?: NuxtApp) => Promise,
options?: Omit, 'lazy'>
-): AsyncData | DefaultT, DataE | null>
+): AsyncData | DefaultT, DataE | DefaultAsyncDataValue>
export function useLazyAsyncData<
ResT,
DataE = Error,
@@ -422,18 +426,18 @@ export function useLazyAsyncData<
> (
handler: (ctx?: NuxtApp) => Promise,
options?: Omit, 'lazy'>
-): AsyncData | DefaultT, DataE | null>
+): AsyncData | DefaultT, DataE | DefaultAsyncDataValue>
export function useLazyAsyncData<
ResT,
DataE = Error,
DataT = ResT,
PickKeys extends KeysOf = KeysOf,
- DefaultT = null,
+ DefaultT = DefaultAsyncDataValue,
> (
key: string,
handler: (ctx?: NuxtApp) => Promise,
options?: Omit, 'lazy'>
-): AsyncData | DefaultT, DataE | null>
+): AsyncData | DefaultT, DataE | DefaultAsyncDataValue>
export function useLazyAsyncData<
ResT,
DataE = Error,
@@ -444,15 +448,15 @@ export function useLazyAsyncData<
key: string,
handler: (ctx?: NuxtApp) => Promise,
options?: Omit, 'lazy'>
-): AsyncData | DefaultT, DataE | null>
+): AsyncData | DefaultT, DataE | DefaultAsyncDataValue>
export function useLazyAsyncData<
ResT,
DataE = Error,
DataT = ResT,
PickKeys extends KeysOf = KeysOf,
- DefaultT = null,
-> (...args: any[]): AsyncData | DefaultT, DataE | null> {
+ DefaultT = DefaultAsyncDataValue,
+> (...args: any[]): AsyncData | DefaultT, DataE | DefaultAsyncDataValue> {
const autoKey = typeof args[args.length - 1] === 'string' ? args.pop() : undefined
if (typeof args[0] !== 'string') { args.unshift(autoKey) }
const [key, handler, options = {}] = args as [string, (ctx?: NuxtApp) => Promise, AsyncDataOptions]
@@ -467,12 +471,12 @@ export function useLazyAsyncData<
}
/** @since 3.1.0 */
-export function useNuxtData (key: string): { data: Ref } {
+export function useNuxtData (key: string): { data: Ref } {
const nuxtApp = useNuxtApp()
// Initialize value when key is not already set
if (!(key in nuxtApp.payload.data)) {
- nuxtApp.payload.data[key] = null
+ nuxtApp.payload.data[key] = asyncDataDefaults.value
}
return {
@@ -524,12 +528,12 @@ function clearNuxtDataByKey (nuxtApp: NuxtApp, key: string): void {
}
if (key in nuxtApp.payload._errors) {
- nuxtApp.payload._errors[key] = null
+ nuxtApp.payload._errors[key] = asyncDataDefaults.errorValue
}
if (nuxtApp._asyncData[key]) {
- nuxtApp._asyncData[key]!.data.value = undefined
- nuxtApp._asyncData[key]!.error.value = null
+ nuxtApp._asyncData[key]!.data.value = resetAsyncDataToUndefined ? undefined : nuxtApp._asyncData[key]!._default()
+ nuxtApp._asyncData[key]!.error.value = asyncDataDefaults.errorValue
nuxtApp._asyncData[key]!.pending.value = false
nuxtApp._asyncData[key]!.status.value = 'idle'
}
diff --git a/packages/nuxt/src/app/composables/error.ts b/packages/nuxt/src/app/composables/error.ts
index 2a76c389a..69b56e1c2 100644
--- a/packages/nuxt/src/app/composables/error.ts
+++ b/packages/nuxt/src/app/composables/error.ts
@@ -4,6 +4,9 @@ import { toRef } from 'vue'
import { useNuxtApp } from '../nuxt'
import { useRouter } from './router'
+// @ts-expect-error virtual file
+import { nuxtDefaultErrorValue } from '#build/nuxt.config.mjs'
+
export const NUXT_ERROR_SIGNATURE = '__nuxt_error'
/** @since 3.0.0 */
@@ -47,7 +50,7 @@ export const clearError = async (options: { redirect?: string } = {}) => {
await useRouter().replace(options.redirect)
}
- error.value = null
+ error.value = nuxtDefaultErrorValue
}
/** @since 3.0.0 */
diff --git a/packages/nuxt/src/app/composables/fetch.ts b/packages/nuxt/src/app/composables/fetch.ts
index d7b50ab71..a083c4778 100644
--- a/packages/nuxt/src/app/composables/fetch.ts
+++ b/packages/nuxt/src/app/composables/fetch.ts
@@ -8,6 +8,9 @@ import { useRequestFetch } from './ssr'
import type { AsyncData, AsyncDataOptions, KeysOf, MultiWatchSources, PickFrom } from './asyncData'
import { useAsyncData } from './asyncData'
+// TODO: temporary module for backwards compatibility
+import type { DefaultAsyncDataErrorValue, DefaultAsyncDataValue } from '#app/defaults'
+
// @ts-expect-error virtual file
import { fetchDefaults } from '#build/nuxt.config.mjs'
@@ -30,7 +33,7 @@ export interface UseFetchOptions<
ResT,
DataT = ResT,
PickKeys extends KeysOf = KeysOf,
- DefaultT = null,
+ DefaultT = DefaultAsyncDataValue,
R extends NitroFetchRequest = string & {},
M extends AvailableRouterMethod = AvailableRouterMethod,
> extends Omit, 'watch'>, ComputedFetchOptions {
@@ -54,11 +57,11 @@ export function useFetch<
_ResT = ResT extends void ? FetchResult : ResT,
DataT = _ResT,
PickKeys extends KeysOf = KeysOf,
- DefaultT = null,
+ DefaultT = DefaultAsyncDataValue,
> (
request: Ref | ReqT | (() => ReqT),
opts?: UseFetchOptions<_ResT, DataT, PickKeys, DefaultT, ReqT, Method>
-): AsyncData | DefaultT, ErrorT | null>
+): AsyncData | DefaultT, ErrorT | DefaultAsyncDataErrorValue>
/**
* Fetch data from an API endpoint with an SSR-friendly composable.
* See {@link https://nuxt.com/docs/api/composables/use-fetch}
@@ -77,7 +80,7 @@ export function useFetch<
> (
request: Ref | ReqT | (() => ReqT),
opts?: UseFetchOptions<_ResT, DataT, PickKeys, DefaultT, ReqT, Method>
-): AsyncData | DefaultT, ErrorT | null>
+): AsyncData | DefaultT, ErrorT | DefaultAsyncDataErrorValue>
export function useFetch<
ResT = void,
ErrorT = FetchError,
@@ -86,7 +89,7 @@ export function useFetch<
_ResT = ResT extends void ? FetchResult : ResT,
DataT = _ResT,
PickKeys extends KeysOf = KeysOf,
- DefaultT = null,
+ DefaultT = DefaultAsyncDataValue,
> (
request: Ref | ReqT | (() => ReqT),
arg1?: string | UseFetchOptions<_ResT, DataT, PickKeys, DefaultT, ReqT, Method>,
@@ -161,8 +164,10 @@ export function useFetch<
* @see https://github.com/unjs/ofetch/blob/bb2d72baa5d3f332a2185c20fc04e35d2c3e258d/src/fetch.ts#L152
*/
const timeoutLength = toValue(opts.timeout)
+ let timeoutId: NodeJS.Timeout
if (timeoutLength) {
- setTimeout(() => controller.abort(), timeoutLength)
+ timeoutId = setTimeout(() => controller.abort(), timeoutLength)
+ controller.signal.onabort = () => clearTimeout(timeoutId)
}
let _$fetch = opts.$fetch || globalThis.$fetch
@@ -175,7 +180,7 @@ export function useFetch<
}
}
- return _$fetch(_request.value, { signal: controller.signal, ..._fetchOptions } as any) as Promise<_ResT>
+ return _$fetch(_request.value, { signal: controller.signal, ..._fetchOptions } as any).finally(() => { clearTimeout(timeoutId) }) as Promise<_ResT>
}, _asyncDataOptions)
return asyncData
@@ -190,11 +195,11 @@ export function useLazyFetch<
_ResT = ResT extends void ? FetchResult : ResT,
DataT = _ResT,
PickKeys extends KeysOf = KeysOf,
- DefaultT = null,
+ DefaultT = DefaultAsyncDataValue,
> (
request: Ref | ReqT | (() => ReqT),
opts?: Omit, 'lazy'>
-): AsyncData | DefaultT, ErrorT | null>
+): AsyncData | DefaultT, ErrorT | DefaultAsyncDataErrorValue>
export function useLazyFetch<
ResT = void,
ErrorT = FetchError,
@@ -207,7 +212,7 @@ export function useLazyFetch<
> (
request: Ref | ReqT | (() => ReqT),
opts?: Omit, 'lazy'>
-): AsyncData | DefaultT, ErrorT | null>
+): AsyncData | DefaultT, ErrorT | DefaultAsyncDataErrorValue>
export function useLazyFetch<
ResT = void,
ErrorT = FetchError,
@@ -216,7 +221,7 @@ export function useLazyFetch<
_ResT = ResT extends void ? FetchResult : ResT,
DataT = _ResT,
PickKeys extends KeysOf = KeysOf,
- DefaultT = null,
+ DefaultT = DefaultAsyncDataValue,
> (
request: Ref | ReqT | (() => ReqT),
arg1?: string | Omit, 'lazy'>,
diff --git a/packages/nuxt/src/app/composables/index.ts b/packages/nuxt/src/app/composables/index.ts
index d5058ecb9..dbb5e9607 100644
--- a/packages/nuxt/src/app/composables/index.ts
+++ b/packages/nuxt/src/app/composables/index.ts
@@ -24,7 +24,7 @@ export { useFetch, useLazyFetch } from './fetch'
export type { FetchResult, UseFetchOptions } from './fetch'
export { useCookie, refreshCookie } from './cookie'
export type { CookieOptions, CookieRef } from './cookie'
-export { prerenderRoutes, useRequestHeaders, useRequestEvent, useRequestFetch, setResponseStatus } from './ssr'
+export { onPrehydrate, prerenderRoutes, useRequestHeaders, useRequestEvent, useRequestFetch, setResponseStatus } from './ssr'
export { onNuxtReady } from './ready'
export { abortNavigation, addRouteMiddleware, defineNuxtRouteMiddleware, onBeforeRouteLeave, onBeforeRouteUpdate, setPageLayout, navigateTo, useRoute, useRouter } from './router'
export type { AddRouteMiddlewareOptions, RouteMiddleware } from './router'
diff --git a/packages/nuxt/src/app/composables/loading-indicator.ts b/packages/nuxt/src/app/composables/loading-indicator.ts
index 5bae3c98b..b3c0a8645 100644
--- a/packages/nuxt/src/app/composables/loading-indicator.ts
+++ b/packages/nuxt/src/app/composables/loading-indicator.ts
@@ -23,9 +23,10 @@ export type LoadingIndicator = {
_cleanup: () => void
progress: Ref
isLoading: Ref
+ error: Ref
start: () => void
set: (value: number) => void
- finish: (opts?: { force?: boolean }) => void
+ finish: (opts?: { force?: boolean, error?: boolean }) => void
clear: () => void
}
@@ -40,6 +41,7 @@ function createLoadingIndicator (opts: Partial = {}) {
const nuxtApp = useNuxtApp()
const progress = ref(0)
const isLoading = ref(false)
+ const error = ref(false)
let done = false
let rafId: number
@@ -47,7 +49,10 @@ function createLoadingIndicator (opts: Partial = {}) {
let hideTimeout: number | NodeJS.Timeout
let resetTimeout: number | NodeJS.Timeout
- const start = () => set(0)
+ const start = () => {
+ error.value = false
+ set(0)
+ }
function set (at = 0) {
if (nuxtApp.isHydrating) {
@@ -76,11 +81,14 @@ function createLoadingIndicator (opts: Partial = {}) {
}
}
- function finish (opts: { force?: boolean } = {}) {
+ function finish (opts: { force?: boolean, error?: boolean } = {}) {
progress.value = 100
done = true
clear()
_clearTimeouts()
+ if (opts.error) {
+ error.value = true
+ }
if (opts.force) {
progress.value = 0
isLoading.value = false
@@ -145,6 +153,7 @@ function createLoadingIndicator (opts: Partial = {}) {
_cleanup,
progress: computed(() => progress.value),
isLoading: computed(() => isLoading.value),
+ error: computed(() => error.value),
start,
set,
finish,
diff --git a/packages/nuxt/src/app/composables/manifest.ts b/packages/nuxt/src/app/composables/manifest.ts
index 13a60e8d8..58b53745c 100644
--- a/packages/nuxt/src/app/composables/manifest.ts
+++ b/packages/nuxt/src/app/composables/manifest.ts
@@ -1,7 +1,6 @@
import type { MatcherExport, RouteMatcher } from 'radix3'
import { createMatcherFromExport, createRouter as createRadixRouter, toRouteMatcher } from 'radix3'
import { defu } from 'defu'
-import { useAppConfig } from '../config'
import { useRuntimeConfig } from '../nuxt'
// @ts-expect-error virtual file
import { appManifest as isAppManifestEnabled } from '#build/nuxt.config.mjs'
@@ -25,9 +24,7 @@ function fetchManifest () {
if (!isAppManifestEnabled) {
throw new Error('[nuxt] app manifest should be enabled with `experimental.appManifest`')
}
- // @ts-expect-error private property
- const buildId = useAppConfig().nuxt?.buildId
- manifest = $fetch(buildAssetsURL(`builds/meta/${buildId}.json`))
+ manifest = $fetch(buildAssetsURL(`builds/meta/${useRuntimeConfig().app.buildId}.json`))
manifest.then((m) => {
matcher = createMatcherFromExport(m.matcher)
})
diff --git a/packages/nuxt/src/app/composables/payload.ts b/packages/nuxt/src/app/composables/payload.ts
index 4e8cd677d..7a7d8fd2e 100644
--- a/packages/nuxt/src/app/composables/payload.ts
+++ b/packages/nuxt/src/app/composables/payload.ts
@@ -1,9 +1,8 @@
import { hasProtocol, joinURL, withoutTrailingSlash } from 'ufo'
import { parse } from 'devalue'
import { useHead } from '@unhead/vue'
-import { getCurrentInstance } from 'vue'
+import { getCurrentInstance, onServerPrefetch } from 'vue'
import { useNuxtApp, useRuntimeConfig } from '../nuxt'
-import { useAppConfig } from '../config'
import { useRoute } from './router'
import { getAppManifest, getRouteRules } from './manifest'
@@ -17,9 +16,9 @@ interface LoadPayloadOptions {
}
/** @since 3.0.0 */
-export function loadPayload (url: string, opts: LoadPayloadOptions = {}): Record | Promise> | null {
+export async function loadPayload (url: string, opts: LoadPayloadOptions = {}): Promise | null> {
if (import.meta.server || !payloadExtraction) { return null }
- const payloadURL = _getPayloadURL(url, opts)
+ const payloadURL = await _getPayloadURL(url, opts)
const nuxtApp = useNuxtApp()
const cache = nuxtApp._payloadCache = nuxtApp._payloadCache || {}
if (payloadURL in cache) {
@@ -40,25 +39,34 @@ export function loadPayload (url: string, opts: LoadPayloadOptions = {}): Record
return cache[payloadURL]
}
/** @since 3.0.0 */
-export function preloadPayload (url: string, opts: LoadPayloadOptions = {}) {
- const payloadURL = _getPayloadURL(url, opts)
- useHead({
- link: [
- { rel: 'modulepreload', href: payloadURL },
- ],
+export function preloadPayload (url: string, opts: LoadPayloadOptions = {}): Promise {
+ const nuxtApp = useNuxtApp()
+ const promise = _getPayloadURL(url, opts).then((payloadURL) => {
+ nuxtApp.runWithContext(() => useHead({
+ link: [
+ { rel: 'modulepreload', href: payloadURL },
+ ],
+ }))
})
+ if (import.meta.server) {
+ onServerPrefetch(() => promise)
+ }
+ return promise
}
// --- Internal ---
const filename = renderJsonPayloads ? '_payload.json' : '_payload.js'
-function _getPayloadURL (url: string, opts: LoadPayloadOptions = {}) {
+async function _getPayloadURL (url: string, opts: LoadPayloadOptions = {}) {
const u = new URL(url, 'http://localhost')
if (u.host !== 'localhost' || hasProtocol(u.pathname, { acceptRelative: true })) {
throw new Error('Payload URL must not include hostname: ' + url)
}
- const hash = opts.hash || (opts.fresh ? Date.now() : (useAppConfig().nuxt as any)?.buildId)
- return joinURL(useRuntimeConfig().app.baseURL, u.pathname, filename + (hash ? `?${hash}` : ''))
+ const config = useRuntimeConfig()
+ const hash = opts.hash || (opts.fresh ? Date.now() : config.app.buildId)
+ const cdnURL = config.app.cdnURL
+ const baseOrCdnURL = cdnURL && await isPrerendered(url) ? cdnURL : config.app.baseURL
+ return joinURL(baseOrCdnURL, u.pathname, filename + (hash ? `?${hash}` : ''))
}
async function _importPayload (payloadURL: string) {
diff --git a/packages/nuxt/src/app/composables/router.ts b/packages/nuxt/src/app/composables/router.ts
index 072ff7615..d6395e583 100644
--- a/packages/nuxt/src/app/composables/router.ts
+++ b/packages/nuxt/src/app/composables/router.ts
@@ -2,7 +2,7 @@ import { getCurrentInstance, hasInjectionContext, inject, onScopeDispose } from
import type { Ref } from 'vue'
import type { NavigationFailure, NavigationGuard, RouteLocationNormalized, RouteLocationPathRaw, RouteLocationRaw, Router, useRoute as _useRoute, useRouter as _useRouter } from '#vue-router'
import { sanitizeStatusCode } from 'h3'
-import { hasProtocol, isScriptProtocol, joinURL, parseURL, withQuery } from 'ufo'
+import { hasProtocol, isScriptProtocol, joinURL, withQuery } from 'ufo'
import type { PageMeta } from '../../pages/runtime/composables'
@@ -140,7 +140,7 @@ export const navigateTo = (to: RouteLocationRaw | undefined | null, options?: Na
if (!options?.external) {
throw new Error('Navigating to an external URL is not allowed by default. Use `navigateTo(url, { external: true })`.')
}
- const protocol = parseURL(toPath).protocol
+ const { protocol } = new URL(toPath, import.meta.client ? window.location.href : 'http://localhost')
if (protocol && isScriptProtocol(protocol)) {
throw new Error(`Cannot navigate to a URL with '${protocol}' protocol.`)
}
@@ -169,8 +169,7 @@ export const navigateTo = (to: RouteLocationRaw | undefined | null, options?: Na
nuxtApp.ssrContext!._renderResponse = {
statusCode: sanitizeStatusCode(options?.redirectCode || 302, 302),
body: ``,
- // do not encode as this would break some modules and some environments
- headers: { location },
+ headers: { location: encodeURI(location) },
}
return response
}
diff --git a/packages/nuxt/src/app/composables/script-stubs.ts b/packages/nuxt/src/app/composables/script-stubs.ts
new file mode 100644
index 000000000..6fcaf114b
--- /dev/null
+++ b/packages/nuxt/src/app/composables/script-stubs.ts
@@ -0,0 +1,102 @@
+import type { UseScriptInput } from '@unhead/vue'
+import { createError } from './error'
+
+function renderStubMessage (name: string) {
+ const message = `\`${name}\` is provided by @nuxt/scripts. Check your console to install it or run 'npx nuxi@latest module add @nuxt/scripts' to install it.`
+ if (import.meta.client) {
+ throw createError({
+ fatal: true,
+ statusCode: 500,
+ statusMessage: message,
+ })
+ }
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function useScript> (input: UseScriptInput, options?: Record) {
+ renderStubMessage('useScript')
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function useElementScriptTrigger (...args: unknown[]) {
+ renderStubMessage('useElementScriptTrigger')
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function useConsentScriptTrigger (...args: unknown[]) {
+ renderStubMessage('useConsentScriptTrigger')
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function useAnalyticsPageEvent (...args: unknown[]) {
+ renderStubMessage('useAnalyticsPageEvent')
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function useScriptGoogleAnalytics (...args: unknown[]) {
+ renderStubMessage('useScriptGoogleAnalytics')
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function useScriptPlausibleAnalytics (...args: unknown[]) {
+ renderStubMessage('useScriptPlausibleAnalytics')
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function useScriptCloudflareWebAnalytics (...args: unknown[]) {
+ renderStubMessage('useScriptCloudflareWebAnalytics')
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function useScriptFathomAnalytics (...args: unknown[]) {
+ renderStubMessage('useScriptFathomAnalytics')
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function useScriptMatomoAnalytics (...args: unknown[]) {
+ renderStubMessage('useScriptMatomoAnalytics')
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function useScriptGoogleTagManager (...args: unknown[]) {
+ renderStubMessage('useScriptGoogleTagManager')
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function useScriptSegment (...args: unknown[]) {
+ renderStubMessage('useScriptSegment')
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function useScriptFacebookPixel (...args: unknown[]) {
+ renderStubMessage('useScriptFacebookPixel')
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function useScriptXPixel (...args: unknown[]) {
+ renderStubMessage('useScriptXPixel')
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function useScriptIntercom (...args: unknown[]) {
+ renderStubMessage('useScriptIntercom')
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function useScriptHotjar (...args: unknown[]) {
+ renderStubMessage('useScriptHotjar')
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function useScriptStripe (...args: unknown[]) {
+ renderStubMessage('useScriptStripe')
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function useScriptLemonSqueezy (...args: unknown[]) {
+ renderStubMessage('useScriptLemonSqueezy')
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function useScriptVimeoPlayer (...args: unknown[]) {
+ renderStubMessage('useScriptVimeoPlayer')
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function useScriptYouTubeIframe (...args: unknown[]) {
+ renderStubMessage('useScriptYouTubeIframe')
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function useScriptGoogleMaps (...args: unknown[]) {
+ renderStubMessage('useScriptGoogleMaps')
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function useScriptNpm (...args: unknown[]) {
+ renderStubMessage('useScriptNpm')
+}
diff --git a/packages/nuxt/src/app/composables/ssr.ts b/packages/nuxt/src/app/composables/ssr.ts
index 8509e968b..56f338310 100644
--- a/packages/nuxt/src/app/composables/ssr.ts
+++ b/packages/nuxt/src/app/composables/ssr.ts
@@ -1,5 +1,8 @@
import type { H3Event } from 'h3'
import { setResponseStatus as _setResponseStatus, appendHeader, getRequestHeader, getRequestHeaders } from 'h3'
+import { getCurrentInstance } from 'vue'
+import { useServerHead } from '@unhead/vue'
+
import type { NuxtApp } from '../nuxt'
import { useNuxtApp } from '../nuxt'
import { toArray } from '../utils'
@@ -65,3 +68,47 @@ export function prerenderRoutes (path: string | string[]) {
const paths = toArray(path)
appendHeader(useRequestEvent()!, 'x-nitro-prerender', paths.map(p => encodeURIComponent(p)).join(', '))
}
+
+const PREHYDRATE_ATTR_KEY = 'data-prehydrate-id'
+
+/**
+ * `onPrehydrate` is a composable lifecycle hook that allows you to run a callback on the client immediately before
+ * Nuxt hydrates the page. This is an advanced feature.
+ *
+ * The callback will be stringified and inlined in the HTML so it should not have any external
+ * dependencies (such as auto-imports) or refer to variables defined outside the callback.
+ *
+ * The callback will run before Nuxt runtime initializes so it should not rely on the Nuxt or Vue context.
+ * @since 3.12.0
+ */
+export function onPrehydrate (callback: (el: HTMLElement) => void): void
+export function onPrehydrate (callback: string | ((el: HTMLElement) => void), key?: string): undefined | string {
+ if (import.meta.client) { return }
+
+ if (typeof callback !== 'string') {
+ throw new TypeError('[nuxt] To transform a callback into a string, `onPrehydrate` must be processed by the Nuxt build pipeline. If it is called in a third-party library, make sure to add the library to `build.transpile`.')
+ }
+
+ const vm = getCurrentInstance()
+ if (vm && key) {
+ vm.attrs[PREHYDRATE_ATTR_KEY] ||= ''
+ key = ':' + key + ':'
+ if (!(vm.attrs[PREHYDRATE_ATTR_KEY] as string).includes(key)) {
+ vm.attrs[PREHYDRATE_ATTR_KEY] += key
+ }
+ }
+ const code = vm && key
+ ? `document.querySelectorAll('[${PREHYDRATE_ATTR_KEY}*=${JSON.stringify(key)}]').forEach` + callback
+ : (callback + '()')
+
+ useServerHead({
+ script: [{
+ key: vm && key ? key : code,
+ tagPosition: 'bodyClose',
+ tagPriority: 'critical',
+ innerHTML: code,
+ }],
+ })
+
+ return vm && key ? vm.attrs[PREHYDRATE_ATTR_KEY] as string : undefined
+}
diff --git a/packages/nuxt/src/app/defaults.ts b/packages/nuxt/src/app/defaults.ts
new file mode 100644
index 000000000..c83129cca
--- /dev/null
+++ b/packages/nuxt/src/app/defaults.ts
@@ -0,0 +1,7 @@
+// TODO: temporary module for backwards compatibility
+
+export type DefaultAsyncDataErrorValue = null
+export type DefaultAsyncDataValue = null
+export type DefaultErrorValue = null
+
+export {}
diff --git a/packages/nuxt/src/app/nuxt.ts b/packages/nuxt/src/app/nuxt.ts
index a89224dec..822252751 100644
--- a/packages/nuxt/src/app/nuxt.ts
+++ b/packages/nuxt/src/app/nuxt.ts
@@ -1,4 +1,4 @@
-import { effectScope, getCurrentInstance, hasInjectionContext, reactive } from 'vue'
+import { effectScope, getCurrentInstance, getCurrentScope, hasInjectionContext, reactive, shallowReactive } from 'vue'
import type { App, EffectScope, Ref, VNode, onErrorCaptured } from 'vue'
import type { RouteLocationNormalizedLoaded } from '#vue-router'
import type { HookCallback, Hookable } from 'hookable'
@@ -20,11 +20,18 @@ import type { LoadingIndicator } from '../app/composables/loading-indicator'
import type { RouteAnnouncer } from '../app/composables/route-announcer'
import type { ViewTransition } from './plugins/view-transitions.client'
+// @ts-expect-error virtual file
+import { appId } from '#build/nuxt.config.mjs'
+
+// TODO: temporary module for backwards compatibility
+import type { DefaultAsyncDataErrorValue, DefaultErrorValue } from '#app/defaults'
import type { NuxtAppLiterals } from '#app'
-const nuxtAppCtx = /* @__PURE__ */ getContext('nuxt-app', {
- asyncContext: !!__NUXT_ASYNC_CONTEXT__ && import.meta.server,
-})
+function getNuxtAppCtx (appName = appId || 'nuxt-app') {
+ return getContext(appName, {
+ asyncContext: !!__NUXT_ASYNC_CONTEXT__ && import.meta.server,
+ })
+}
type HookResult = Promise | void
@@ -87,12 +94,14 @@ export interface NuxtPayload {
state: Record
once: Set
config?: Pick
- error?: NuxtError | null
- _errors: Record
+ error?: NuxtError | DefaultErrorValue
+ _errors: Record
[key: string]: unknown
}
interface _NuxtApp {
+ /** @internal */
+ _name: string
vueApp: App
globalName: string
versions: Record
@@ -113,10 +122,12 @@ interface _NuxtApp {
_asyncDataPromises: Record | undefined>
/** @internal */
_asyncData: Record
+ data: Ref
pending: Ref
- error: Ref
+ error: Ref
status: Ref
+ /** @internal */
+ _default: () => unknown
} | undefined>
/** @internal */
@@ -237,6 +248,7 @@ export interface CreateOptions {
export function createNuxtApp (options: CreateOptions) {
let hydratingCount = 0
const nuxtApp: NuxtApp = {
+ _name: appId || 'nuxt-app',
_scope: effectScope(),
provide: undefined,
globalName: 'nuxt',
@@ -244,18 +256,17 @@ export function createNuxtApp (options: CreateOptions) {
get nuxt () { return __NUXT_VERSION__ },
get vue () { return nuxtApp.vueApp.version },
},
- payload: reactive({
- data: {},
- state: {},
+ payload: shallowReactive({
+ data: shallowReactive({}),
+ state: reactive({}),
once: new Set(),
- _errors: {},
- ...(import.meta.client ? window.__NUXT__ ?? {} : { serverRendered: true }),
+ _errors: shallowReactive({}),
}),
static: {
data: {},
},
runWithContext (fn: any) {
- if (nuxtApp._scope.active) {
+ if (nuxtApp._scope.active && !getCurrentScope()) {
return nuxtApp._scope.run(() => callWithNuxt(nuxtApp, fn))
}
return callWithNuxt(nuxtApp, fn)
@@ -280,11 +291,32 @@ export function createNuxtApp (options: CreateOptions) {
}
},
_asyncDataPromises: {},
- _asyncData: {},
+ _asyncData: shallowReactive({}),
_payloadRevivers: {},
...options,
} as any as NuxtApp
+ if (import.meta.server) {
+ nuxtApp.payload.serverRendered = true
+ }
+
+ // TODO: remove/refactor in https://github.com/nuxt/nuxt/issues/25336
+ if (import.meta.client && window.__NUXT__) {
+ for (const key in window.__NUXT__) {
+ switch (key) {
+ case 'data':
+ case 'state':
+ case '_errors':
+ // Preserve reactivity for non-rich payload support
+ Object.assign(nuxtApp.payload[key], window.__NUXT__[key])
+ break
+
+ default:
+ nuxtApp.payload[key] = window.__NUXT__[key]
+ }
+ }
+ }
+
nuxtApp.hooks = createHooks()
nuxtApp.hook = nuxtApp.hooks.hook
@@ -447,6 +479,7 @@ export function isNuxtPlugin (plugin: unknown) {
*/
export function callWithNuxt any> (nuxt: NuxtApp | _NuxtApp, setup: T, args?: Parameters) {
const fn: () => ReturnType = () => args ? setup(...args as Parameters) : setup()
+ const nuxtAppCtx = getNuxtAppCtx(nuxt._name)
if (import.meta.server) {
return nuxt.vueApp.runWithContext(() => nuxtAppCtx.callAsync(nuxt as NuxtApp, fn))
} else {
@@ -463,13 +496,14 @@ export function callWithNuxt any> (nuxt: NuxtApp |
* Returns `null` if Nuxt instance is unavailable.
* @since 3.10.0
*/
-export function tryUseNuxtApp (): NuxtApp | null {
+export function tryUseNuxtApp (): NuxtApp | null
+export function tryUseNuxtApp (appName?: string): NuxtApp | null {
let nuxtAppInstance
if (hasInjectionContext()) {
nuxtAppInstance = getCurrentInstance()?.appContext.app.$nuxt
}
- nuxtAppInstance = nuxtAppInstance || nuxtAppCtx.tryUse()
+ nuxtAppInstance = nuxtAppInstance || getNuxtAppCtx(appName).tryUse()
return nuxtAppInstance || null
}
@@ -481,8 +515,10 @@ export function tryUseNuxtApp (): NuxtApp | null {
* Throws an error if Nuxt instance is unavailable.
* @since 3.0.0
*/
-export function useNuxtApp (): NuxtApp {
- const nuxtAppInstance = tryUseNuxtApp()
+export function useNuxtApp (): NuxtApp
+export function useNuxtApp (appName?: string): NuxtApp {
+ // @ts-expect-error internal usage of appName
+ const nuxtAppInstance = tryUseNuxtApp(appName)
if (!nuxtAppInstance) {
if (import.meta.dev) {
diff --git a/packages/nuxt/src/app/plugins/cross-origin-prefetch.client.ts b/packages/nuxt/src/app/plugins/cross-origin-prefetch.client.ts
index 3ae277ab4..66788be26 100644
--- a/packages/nuxt/src/app/plugins/cross-origin-prefetch.client.ts
+++ b/packages/nuxt/src/app/plugins/cross-origin-prefetch.client.ts
@@ -1,8 +1,9 @@
import { ref } from 'vue'
-import { parseURL } from 'ufo'
import { useHead } from '@unhead/vue'
import { defineNuxtPlugin } from '../nuxt'
+const SUPPORTED_PROTOCOLS = ['http:', 'https:']
+
export default defineNuxtPlugin({
name: 'nuxt:cross-origin-prefetch',
setup (nuxtApp) {
@@ -26,8 +27,7 @@ export default defineNuxtPlugin({
script: [generateRules()],
})
nuxtApp.hook('link:prefetch', (url) => {
- const { protocol } = parseURL(url)
- if (protocol && ['http:', 'https:'].includes(protocol)) {
+ if (SUPPORTED_PROTOCOLS.some(p => url.startsWith(p)) && SUPPORTED_PROTOCOLS.includes(new URL(url).protocol)) {
externalURLs.value.add(url)
head?.patch({
script: [generateRules()],
diff --git a/packages/nuxt/src/app/plugins/dev-server-logs.ts b/packages/nuxt/src/app/plugins/dev-server-logs.ts
index cccb10579..eeae8d756 100644
--- a/packages/nuxt/src/app/plugins/dev-server-logs.ts
+++ b/packages/nuxt/src/app/plugins/dev-server-logs.ts
@@ -1,13 +1,21 @@
-import { consola, createConsola } from 'consola'
+import { createConsola } from 'consola'
import type { LogObject } from 'consola'
import { parse } from 'devalue'
+import { h } from 'vue'
import { defineNuxtPlugin } from '../nuxt'
// @ts-expect-error virtual file
import { devLogs, devRootDir } from '#build/nuxt.config.mjs'
-export default defineNuxtPlugin((nuxtApp) => {
+const devRevivers: Record any> = import.meta.server
+ ? {}
+ : {
+ VNode: data => h(data.type, data.props),
+ URL: data => new URL(data),
+ }
+
+export default defineNuxtPlugin(async (nuxtApp) => {
if (import.meta.test) { return }
if (import.meta.server) {
@@ -23,42 +31,18 @@ export default defineNuxtPlugin((nuxtApp) => {
date: true,
},
})
- const hydrationLogs = new Set()
- consola.wrapConsole()
- consola.addReporter({
- log (logObj) {
- try {
- hydrationLogs.add(JSON.stringify(logObj.args))
- } catch {
- // silently ignore - the worst case is a user gets log twice
- }
- },
- })
nuxtApp.hook('dev:ssr-logs', (logs) => {
for (const log of logs) {
- // deduplicate so we don't print out things that are logged on client
- try {
- if (!hydrationLogs.size || !hydrationLogs.has(JSON.stringify(log.args))) {
- logger.log(normalizeServerLog({ ...log }))
- }
- } catch {
- logger.log(normalizeServerLog({ ...log }))
- }
+ logger.log(normalizeServerLog({ ...log }))
}
})
-
- nuxtApp.hooks.hook('app:suspense:resolve', () => consola.restoreAll())
- nuxtApp.hooks.hookOnce('dev:ssr-logs', () => hydrationLogs.clear())
}
- // pass SSR logs after hydration
- nuxtApp.hooks.hook('app:suspense:resolve', async () => {
- if (typeof window !== 'undefined') {
- const content = document.getElementById('__NUXT_LOGS__')?.textContent
- const logs = content ? parse(content, nuxtApp._payloadRevivers) as LogObject[] : []
- await nuxtApp.hooks.callHook('dev:ssr-logs', logs)
- }
- })
+ if (typeof window !== 'undefined') {
+ const content = document.getElementById('__NUXT_LOGS__')?.textContent
+ const logs = content ? parse(content, { ...devRevivers, ...nuxtApp._payloadRevivers }) as LogObject[] : []
+ await nuxtApp.hooks.callHook('dev:ssr-logs', logs)
+ }
})
function normalizeFilenames (stack?: string) {
diff --git a/packages/nuxt/src/app/plugins/payload.client.ts b/packages/nuxt/src/app/plugins/payload.client.ts
index c50b3bd45..48486c1a3 100644
--- a/packages/nuxt/src/app/plugins/payload.client.ts
+++ b/packages/nuxt/src/app/plugins/payload.client.ts
@@ -1,4 +1,3 @@
-import { parseURL } from 'ufo'
import { defineNuxtPlugin } from '../nuxt'
import { loadPayload } from '../composables/payload'
import { onNuxtReady } from '../composables/ready'
@@ -24,7 +23,8 @@ export default defineNuxtPlugin({
onNuxtReady(() => {
// Load payload into cache
nuxtApp.hooks.hook('link:prefetch', async (url) => {
- if (!parseURL(url).protocol) {
+ const { hostname } = new URL(url, window.location.href)
+ if (hostname === window.location.hostname) {
await loadPayload(url)
}
})
diff --git a/packages/nuxt/src/app/plugins/router.ts b/packages/nuxt/src/app/plugins/router.ts
index 38c93085d..8fc32754b 100644
--- a/packages/nuxt/src/app/plugins/router.ts
+++ b/packages/nuxt/src/app/plugins/router.ts
@@ -1,6 +1,6 @@
import type { Ref } from 'vue'
import { computed, defineComponent, h, isReadonly, reactive } from 'vue'
-import { isEqual, joinURL, parseQuery, parseURL, stringifyParsedURL, stringifyQuery, withoutBase } from 'ufo'
+import { isEqual, joinURL, parseQuery, stringifyParsedURL, stringifyQuery, withoutBase } from 'ufo'
import { createError } from 'h3'
import { defineNuxtPlugin, useRuntimeConfig } from '../nuxt'
import { getRouteRules } from '../composables/manifest'
@@ -45,7 +45,7 @@ function getRouteFromPath (fullPath: string | Partial) {
})
}
- const url = parseURL(fullPath.toString())
+ const url = new URL(fullPath.toString(), import.meta.client ? window.location.href : 'http://localhost')
return {
path: url.pathname,
fullPath,
diff --git a/packages/nuxt/src/app/types/augments.d.ts b/packages/nuxt/src/app/types/augments.d.ts
index e9ea30b92..7779ba242 100644
--- a/packages/nuxt/src/app/types/augments.d.ts
+++ b/packages/nuxt/src/app/types/augments.d.ts
@@ -1,20 +1,29 @@
import type { UseHeadInput } from '@unhead/vue'
import type { NuxtApp, useNuxtApp } from '../nuxt'
-interface NuxtStaticBuildFlags {
- browser: boolean
- client: boolean
- dev: boolean
- server: boolean
- test: boolean
-}
-
declare global {
namespace NodeJS {
- interface Process extends NuxtStaticBuildFlags {}
+ interface Process {
+ /** @deprecated Use `import.meta.browser` instead. This may be removed in Nuxt v5 or a future major version. */
+ browser: boolean
+ /** @deprecated Use `import.meta.client` instead. This may be removed in Nuxt v5 or a future major version. */
+ client: boolean
+ /** @deprecated Use `import.meta.dev` instead. This may be removed in Nuxt v5 or a future major version. */
+ dev: boolean
+ /** @deprecated Use `import.meta.server` instead. This may be removed in Nuxt v5 or a future major version. */
+ server: boolean
+ /** @deprecated Use `import.meta.test` instead. This may be removed in Nuxt v5 or a future major version. */
+ test: boolean
+ }
}
- interface ImportMeta extends NuxtStaticBuildFlags {}
+ interface ImportMeta extends NuxtStaticBuildFlags {
+ browser: boolean
+ client: boolean
+ dev: boolean
+ server: boolean
+ test: boolean
+ }
interface Window {
__NUXT__?: Record
diff --git a/packages/nuxt/src/components/client-fallback-auto-id.ts b/packages/nuxt/src/components/client-fallback-auto-id.ts
index 19b5a3998..7aa42f1d0 100644
--- a/packages/nuxt/src/components/client-fallback-auto-id.ts
+++ b/packages/nuxt/src/components/client-fallback-auto-id.ts
@@ -10,7 +10,7 @@ interface LoaderOptions {
transform?: ComponentsOptions['transform']
rootDir: string
}
-const CLIENT_FALLBACK_RE = /<(NuxtClientFallback|nuxt-client-fallback)( [^>]*)?>/
+const CLIENT_FALLBACK_RE = /<(?:NuxtClientFallback|nuxt-client-fallback)(?: [^>]*)?>/
const CLIENT_FALLBACK_GLOBAL_RE = /<(NuxtClientFallback|nuxt-client-fallback)( [^>]*)?>/g
export const clientFallbackAutoIdPlugin = createUnplugin((options: LoaderOptions) => {
const exclude = options.transform?.exclude || []
@@ -37,7 +37,7 @@ export const clientFallbackAutoIdPlugin = createUnplugin((options: LoaderOptions
s.replace(CLIENT_FALLBACK_GLOBAL_RE, (full, name, attrs) => {
count++
- if (/ :?uid=/g.test(attrs)) { return full }
+ if (/ :?uid=/.test(attrs)) { return full }
return `<${name} :uid="'${hash(relativeID)}' + JSON.stringify($props) + '${count}'" ${attrs ?? ''}>`
})
diff --git a/packages/nuxt/src/components/islandsTransform.ts b/packages/nuxt/src/components/islandsTransform.ts
index 46a9f31d3..ac5a95493 100644
--- a/packages/nuxt/src/components/islandsTransform.ts
+++ b/packages/nuxt/src/components/islandsTransform.ts
@@ -13,12 +13,6 @@ import { isVue } from '../core/utils'
interface ServerOnlyComponentTransformPluginOptions {
getComponents: () => Component[]
- /**
- * passed down to `NuxtTeleportIslandComponent`
- * should be done only in dev mode as we use build:manifest result in production
- */
- rootDir?: string
- isDev?: boolean
/**
* allow using `nuxt-client` attribute on components
*/
@@ -31,7 +25,7 @@ interface ComponentChunkOptions {
}
const SCRIPT_RE = /]*>/g
-const HAS_SLOT_OR_CLIENT_RE = /(]*>)|(nuxt-client)/
+const HAS_SLOT_OR_CLIENT_RE = /]*>|nuxt-client/
const TEMPLATE_RE = /([\s\S]*)<\/template>/
const NUXTCLIENT_ATTR_RE = /\s:?nuxt-client(="[^"]*")?/g
const IMPORT_CODE = '\nimport { vforToArray as __vforToArray } from \'#app/components/utils\'' + '\nimport NuxtTeleportIslandComponent from \'#app/components/nuxt-teleport-island-component\'' + '\nimport NuxtTeleportSsrSlot from \'#app/components/nuxt-teleport-island-slot\''
@@ -43,7 +37,6 @@ function wrapWithVForDiv (code: string, vfor: string): string {
export const islandsTransform = createUnplugin((options: ServerOnlyComponentTransformPluginOptions, meta) => {
const isVite = meta.framework === 'vite'
- const { isDev, rootDir } = options
return {
name: 'server-only-component-transform',
enforce: 'pre',
@@ -115,7 +108,7 @@ export const islandsTransform = createUnplugin((options: ServerOnlyComponentTran
startTag = startTag.replaceAll(EXTRACTED_ATTRS_RE, '')
}
- s.appendLeft(startingIndex + loc[0].start, ``)
+ s.appendLeft(startingIndex + loc[0].start, ``)
s.overwrite(startingIndex + loc[0].start, startingIndex + loc[0].end, startTag)
s.appendRight(startingIndex + loc[1].end, '')
}
diff --git a/packages/nuxt/src/components/loader.ts b/packages/nuxt/src/components/loader.ts
index 46aba7711..913415138 100644
--- a/packages/nuxt/src/components/loader.ts
+++ b/packages/nuxt/src/components/loader.ts
@@ -43,7 +43,7 @@ export const loaderPlugin = createUnplugin((options: LoaderOptions) => {
const s = new MagicString(code)
// replace `_resolveComponent("...")` to direct import
- s.replace(/(?<=[ (])_?resolveComponent\(\s*["'](lazy-|Lazy)?([^'"]*?)["'][\s,]*[^)]*\)/g, (full: string, lazy: string, name: string) => {
+ s.replace(/(?<=[ (])_?resolveComponent\(\s*["'](lazy-|Lazy)?([^'"]*)["'][^)]*\)/g, (full: string, lazy: string, name: string) => {
const component = findComponent(components, name, options.mode)
if (component) {
// @ts-expect-error TODO: refactor to nuxi
diff --git a/packages/nuxt/src/components/module.ts b/packages/nuxt/src/components/module.ts
index 1a2b52439..24fe7f3fb 100644
--- a/packages/nuxt/src/components/module.ts
+++ b/packages/nuxt/src/components/module.ts
@@ -18,7 +18,7 @@ function compareDirByPathLength ({ path: pathA }: { path: string }, { path: path
return pathB.split(/[\\/]/).filter(Boolean).length - pathA.split(/[\\/]/).filter(Boolean).length
}
-const DEFAULT_COMPONENTS_DIRS_RE = /\/components(\/global|\/islands)?$/
+const DEFAULT_COMPONENTS_DIRS_RE = /\/components(?:\/(?:global|islands))?$/
export type getComponentsT = (mode?: 'client' | 'server' | 'all') => Component[]
@@ -260,8 +260,6 @@ export default defineNuxtModule({
if (isServer) {
config.plugins.push(islandsTransform.vite({
getComponents,
- rootDir: nuxt.options.rootDir,
- isDev: nuxt.options.dev,
selectiveClient,
}))
}
diff --git a/packages/nuxt/src/components/scan.ts b/packages/nuxt/src/components/scan.ts
index dc3eb4f2a..a09413991 100644
--- a/packages/nuxt/src/components/scan.ts
+++ b/packages/nuxt/src/components/scan.ts
@@ -83,8 +83,8 @@ export async function scanComponents (dirs: ComponentsDir[], srcDir: string): Pr
*/
let fileName = basename(filePath, extname(filePath))
- const island = /\.(island)(\.global)?$/.test(fileName) || dir.island
- const global = /\.(global)(\.island)?$/.test(fileName) || dir.global
+ const island = /\.island(?:\.global)?$/.test(fileName) || dir.island
+ const global = /\.global(?:\.island)?$/.test(fileName) || dir.global
const mode = island ? 'server' : (fileName.match(/(?<=\.)(client|server)(\.global|\.island)*$/)?.[1] || 'all') as 'client' | 'server' | 'all'
fileName = fileName.replace(/(\.(client|server))?(\.global|\.island)*$/, '')
diff --git a/packages/nuxt/src/components/templates.ts b/packages/nuxt/src/components/templates.ts
index f574d8514..ff55e3c7f 100644
--- a/packages/nuxt/src/components/templates.ts
+++ b/packages/nuxt/src/components/templates.ts
@@ -102,14 +102,20 @@ export const componentsTypeTemplate = {
filename: 'components.d.ts' as const,
getContents: ({ app, nuxt }) => {
const buildDir = nuxt.options.buildDir
- const componentTypes = app.components.filter(c => !c.island).map(c => [
- c.pascalName,
- `typeof ${genDynamicImport(isAbsolute(c.filePath)
- ? relative(buildDir, c.filePath).replace(/(?<=\w)\.(?!vue)\w+$/g, '')
- : c.filePath.replace(/(?<=\w)\.(?!vue)\w+$/g, ''), { wrapper: false })}['${c.export}']`,
- ])
+ const componentTypes = app.components.filter(c => !c.island).map((c) => {
+ const type = `typeof ${genDynamicImport(isAbsolute(c.filePath)
+ ? relative(buildDir, c.filePath).replace(/\b\.(?!vue)\w+$/g, '')
+ : c.filePath.replace(/\b\.(?!vue)\w+$/g, ''), { wrapper: false })}['${c.export}']`
+ return [
+ c.pascalName,
+ c.island || c.mode === 'server' ? `IslandComponent<${type}>` : type,
+ ]
+ })
+ const islandType = 'type IslandComponent = T & DefineComponent<{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, SlotsType<{ fallback: { error: unknown } }>>'
return `
+import type { DefineComponent, SlotsType } from 'vue'
+${nuxt.options.experimental.componentIslands ? islandType : ''}
interface _GlobalComponents {
${componentTypes.map(([pascalName, type]) => ` '${pascalName}': ${type}`).join('\n')}
${componentTypes.map(([pascalName, type]) => ` 'Lazy${pascalName}': ${type}`).join('\n')}
diff --git a/packages/nuxt/src/components/tree-shake.ts b/packages/nuxt/src/components/tree-shake.ts
index f6034d023..56ea65cd3 100644
--- a/packages/nuxt/src/components/tree-shake.ts
+++ b/packages/nuxt/src/components/tree-shake.ts
@@ -16,7 +16,7 @@ interface TreeShakeTemplatePluginOptions {
type AcornNode = N & { start: number, end: number }
const SSR_RENDER_RE = /ssrRenderComponent/
-const PLACEHOLDER_EXACT_RE = /^(fallback|placeholder)$/
+const PLACEHOLDER_EXACT_RE = /^(?:fallback|placeholder)$/
const CLIENT_ONLY_NAME_RE = /^(?:_unref\()?(?:_component_)?(?:Lazy|lazy_)?(?:client_only|ClientOnly\)?)$/
const PARSER_OPTIONS = { sourceType: 'module', ecmaVersion: 'latest' }
diff --git a/packages/nuxt/src/core/app.ts b/packages/nuxt/src/core/app.ts
index 8f694f035..4bc7da1e9 100644
--- a/packages/nuxt/src/core/app.ts
+++ b/packages/nuxt/src/core/app.ts
@@ -85,8 +85,8 @@ export async function generateApp (nuxt: Nuxt, app: NuxtApp, options: { filter?:
changedTemplates.push(template)
}
- const perf = performance.measure(fullPath, mark?.name) // TODO: remove when Node 14 reaches EOL
- const setupTime = perf ? Math.round((perf.duration * 100)) / 100 : 0 // TODO: remove when Node 14 reaches EOL
+ const perf = performance.measure(fullPath, mark.name)
+ const setupTime = Math.round((perf.duration * 100)) / 100
if (nuxt.options.debug || setupTime > 500) {
logger.info(`Compiled \`${template.filename}\` in ${setupTime}ms`)
@@ -179,7 +179,12 @@ export async function resolveApp (nuxt: Nuxt, app: NuxtApp) {
app.middleware = []
for (const config of reversedConfigs) {
const middlewareDir = (config.rootDir === nuxt.options.rootDir ? nuxt.options : config).dir?.middleware || 'middleware'
- const middlewareFiles = await resolveFiles(config.srcDir, `${middlewareDir}/*{${nuxt.options.extensions.join(',')}}`)
+ const middlewareFiles = await resolveFiles(config.srcDir, [
+ `${middlewareDir}/*{${nuxt.options.extensions.join(',')}}`,
+ ...nuxt.options.future.compatibilityVersion === 4
+ ? [`${middlewareDir}/*/index{${nuxt.options.extensions.join(',')}}`]
+ : [],
+ ])
for (const file of middlewareFiles) {
const name = getNameFromPath(file)
if (!name) {
@@ -200,7 +205,7 @@ export async function resolveApp (nuxt: Nuxt, app: NuxtApp) {
...config.srcDir
? await resolveFiles(config.srcDir, [
`${pluginDir}/*{${nuxt.options.extensions.join(',')}}`,
- `${pluginDir}/*/index{${nuxt.options.extensions.join(',')}}`, // TODO: remove, only scan top-level plugins #18418
+ `${pluginDir}/*/index{${nuxt.options.extensions.join(',')}}`,
])
: [],
].map(plugin => normalizePlugin(plugin as NuxtPlugin)))
diff --git a/packages/nuxt/src/core/builder.ts b/packages/nuxt/src/core/builder.ts
index 5f6d726fe..c66e33c19 100644
--- a/packages/nuxt/src/core/builder.ts
+++ b/packages/nuxt/src/core/builder.ts
@@ -24,7 +24,7 @@ export async function build (nuxt: Nuxt) {
if (event === 'change') { return }
const path = resolve(nuxt.options.srcDir, relativePath)
const relativePaths = nuxt.options._layers.map(l => relative(l.config.srcDir || l.cwd, path))
- const restartPath = relativePaths.find(relativePath => /^(app\.|error\.|plugins\/|middleware\/|layouts\/)/i.test(relativePath))
+ const restartPath = relativePaths.find(relativePath => /^(?:app\.|error\.|plugins\/|middleware\/|layouts\/)/i.test(relativePath))
if (restartPath) {
if (restartPath.startsWith('app')) {
app.mainComponent = undefined
diff --git a/packages/nuxt/src/core/nitro.ts b/packages/nuxt/src/core/nitro.ts
index 01ffd58ad..ce25bdb7d 100644
--- a/packages/nuxt/src/core/nitro.ts
+++ b/packages/nuxt/src/core/nitro.ts
@@ -3,7 +3,6 @@ import { existsSync, promises as fsp, readFileSync } from 'node:fs'
import { cpus } from 'node:os'
import { join, relative, resolve } from 'pathe'
import { createRouter as createRadixRouter, exportMatcher, toRouteMatcher } from 'radix3'
-import { randomUUID } from 'uncrypto'
import { joinURL, withTrailingSlash } from 'ufo'
import { build, copyPublicAssets, createDevServer, createNitro, prepare, prerender, scanHandlers, writeTypes } from 'nitropack'
import type { Nitro, NitroConfig, NitroOptions } from 'nitropack'
@@ -13,7 +12,7 @@ import { defu } from 'defu'
import fsExtra from 'fs-extra'
import { dynamicEventHandler } from 'h3'
import { isWindows } from 'std-env'
-import type { Nuxt, NuxtOptions, RuntimeConfig } from 'nuxt/schema'
+import type { Nuxt, NuxtOptions } from 'nuxt/schema'
import { version as nuxtVersion } from '../../package.json'
import { distDir } from '../dirs'
import { toArray } from '../utils'
@@ -28,8 +27,6 @@ const logLevelMapReverse = {
export async function initNitro (nuxt: Nuxt & { _nitro?: Nitro }) {
// Resolve config
- const _nitroConfig = ((nuxt.options as any).nitro || {}) as NitroConfig
-
const excludePaths = nuxt.options._layers
.flatMap(l => [
l.cwd.match(/(?<=\/)node_modules\/(.+)$/)?.[1],
@@ -49,7 +46,7 @@ export async function initNitro (nuxt: Nuxt & { _nitro?: Nitro }) {
.map(m => m.entryPath),
)
- const nitroConfig: NitroConfig = defu(_nitroConfig, {
+ const nitroConfig: NitroConfig = defu(nuxt.options.nitro, {
debug: nuxt.options.debug,
rootDir: nuxt.options.rootDir,
workspaceDir: nuxt.options.workspaceDir,
@@ -58,7 +55,7 @@ export async function initNitro (nuxt: Nuxt & { _nitro?: Nitro }) {
buildDir: nuxt.options.buildDir,
experimental: {
asyncContext: nuxt.options.experimental.asyncContext,
- typescriptBundlerResolution: nuxt.options.future.typescriptBundlerResolution || nuxt.options.typescript?.tsConfig?.compilerOptions?.moduleResolution?.toLowerCase() === 'bundler' || _nitroConfig.typescript?.tsConfig?.compilerOptions?.moduleResolution?.toLowerCase() === 'bundler',
+ typescriptBundlerResolution: nuxt.options.future.typescriptBundlerResolution || nuxt.options.typescript?.tsConfig?.compilerOptions?.moduleResolution?.toLowerCase() === 'bundler' || nuxt.options.nitro.typescript?.tsConfig?.compilerOptions?.moduleResolution?.toLowerCase() === 'bundler',
},
framework: {
name: 'nuxt',
@@ -111,20 +108,6 @@ export async function initNitro (nuxt: Nuxt & { _nitro?: Nitro }) {
routeRules: {
'/__nuxt_error': { cache: false },
},
- runtimeConfig: {
- ...nuxt.options.runtimeConfig,
- app: {
- ...nuxt.options.runtimeConfig.app,
- baseURL: nuxt.options.runtimeConfig.app.baseURL.startsWith('./')
- ? nuxt.options.runtimeConfig.app.baseURL.slice(1)
- : nuxt.options.runtimeConfig.app.baseURL,
- },
- nitro: {
- envPrefix: 'NUXT_',
- // TODO: address upstream issue with defu types...?
- ...nuxt.options.runtimeConfig.nitro satisfies RuntimeConfig['nitro'] as any,
- },
- },
appConfig: nuxt.options.appConfig,
appConfigFiles: nuxt.options._layers.map(
layer => resolve(layer.config.srcDir, 'app.config'),
@@ -178,6 +161,8 @@ export async function initNitro (nuxt: Nuxt & { _nitro?: Nitro }) {
'nuxt3/dist',
'nuxt-nightly/dist',
distDir,
+ // Ensure app config files have auto-imports injected even if they are pure .js files
+ ...nuxt.options._layers.map(layer => resolve(layer.config.srcDir, 'app.config')),
],
traceInclude: [
// force include files used in generated code from the runtime-compiler
@@ -235,9 +220,7 @@ export async function initNitro (nuxt: Nuxt & { _nitro?: Nitro }) {
// Add app manifest handler and prerender configuration
if (nuxt.options.experimental.appManifest) {
- // @ts-expect-error untyped nuxt property
- const buildId = nuxt.options.appConfig.nuxt!.buildId ||=
- (nuxt.options.dev ? 'dev' : nuxt.options.test ? 'test' : randomUUID())
+ const buildId = nuxt.options.runtimeConfig.app.buildId ||= nuxt.options.buildId
const buildTimestamp = Date.now()
const manifestPrefix = joinURL(nuxt.options.app.buildAssetsDir, 'builds')
@@ -400,7 +383,7 @@ export async function initNitro (nuxt: Nuxt & { _nitro?: Nitro }) {
tsConfig.compilerOptions.paths[alias] = [absolutePath]
tsConfig.compilerOptions.paths[`${alias}/*`] = [`${absolutePath}/*`]
} else {
- tsConfig.compilerOptions.paths[alias] = [absolutePath.replace(/(?<=\w)\.\w+$/g, '')] /* remove extension */
+ tsConfig.compilerOptions.paths[alias] = [absolutePath.replace(/\b\.\w+$/g, '')] /* remove extension */
}
}
@@ -589,7 +572,7 @@ async function spaLoadingTemplate (nuxt: Nuxt) {
}
if (nuxt.options.spaLoadingTemplate === true) {
- return defaultSpaLoadingTemplate({})
+ return defaultSpaLoadingTemplate()
}
if (nuxt.options.spaLoadingTemplate) {
diff --git a/packages/nuxt/src/core/nuxt.ts b/packages/nuxt/src/core/nuxt.ts
index 39e47a4e0..5d57d55f4 100644
--- a/packages/nuxt/src/core/nuxt.ts
+++ b/packages/nuxt/src/core/nuxt.ts
@@ -4,15 +4,16 @@ import ignore from 'ignore'
import type { LoadNuxtOptions } from '@nuxt/kit'
import { addBuildPlugin, addComponent, addPlugin, addRouteMiddleware, addServerPlugin, addVitePlugin, addWebpackPlugin, installModule, loadNuxtConfig, logger, nuxtCtx, resolveAlias, resolveFiles, resolveIgnorePatterns, resolvePath, tryResolveModule, useNitro } from '@nuxt/kit'
import { resolvePath as _resolvePath } from 'mlly'
-import type { Nuxt, NuxtHooks, NuxtOptions } from 'nuxt/schema'
+import type { Nuxt, NuxtHooks, NuxtOptions, RuntimeConfig } from 'nuxt/schema'
import type { PackageJson } from 'pkg-types'
import { readPackageJSON, resolvePackageJSON } from 'pkg-types'
import escapeRE from 'escape-string-regexp'
import fse from 'fs-extra'
-import { withoutLeadingSlash } from 'ufo'
+import { withTrailingSlash, withoutLeadingSlash } from 'ufo'
import defu from 'defu'
+import { gt, satisfies } from 'semver'
import pagesModule from '../pages/module'
import metaModule from '../head/module'
import componentsModule from '../components/module'
@@ -20,6 +21,7 @@ import importsModule from '../imports/module'
import { distDir, pkgDir } from '../dirs'
import { version } from '../../package.json'
+import { scriptsStubsPreset } from '../imports/presets'
import { ImportProtectionPlugin, nuxtImportProtections } from './plugins/import-protection'
import type { UnctxTransformPluginOptions } from './plugins/unctx'
import { UnctxTransformPlugin } from './plugins/unctx'
@@ -33,6 +35,7 @@ import schemaModule from './schema'
import { RemovePluginMetadataPlugin } from './plugins/plugin-metadata'
import { AsyncContextInjectionPlugin } from './plugins/async-context'
import { resolveDeepImportsPlugin } from './plugins/resolve-deep-imports'
+import { prehydrateTransformPlugin } from './plugins/prehydrate'
export function createNuxt (options: NuxtOptions): Nuxt {
const hooks = createHooks()
@@ -61,6 +64,11 @@ const nightlies = {
'@nuxt/kit': '@nuxt/kit-nightly',
}
+const keyDependencies = [
+ '@nuxt/kit',
+ '@nuxt/schema',
+]
+
async function initNuxt (nuxt: Nuxt) {
// Register user hooks
for (const config of nuxt.options._layers.map(layer => layer.config).reverse()) {
@@ -69,6 +77,17 @@ async function initNuxt (nuxt: Nuxt) {
}
}
+ // Restart Nuxt when layer directories are added or removed
+ const layersDir = withTrailingSlash(resolve(nuxt.options.rootDir, 'layers'))
+ nuxt.hook('builder:watch', (event, relativePath) => {
+ const path = resolve(nuxt.options.srcDir, relativePath)
+ if (event === 'addDir' || event === 'unlinkDir') {
+ if (path.startsWith(layersDir)) {
+ return nuxt.callHook('restart', { hard: true })
+ }
+ }
+ })
+
// Set nuxt instance for useNuxt
nuxtCtx.set(nuxt)
nuxt.hook('close', () => nuxtCtx.unset())
@@ -110,6 +129,8 @@ async function initNuxt (nuxt: Nuxt) {
if (nuxt.options.typescript.shim) {
opts.references.push({ path: resolve(nuxt.options.buildDir, 'types/vue-shim.d.ts') })
}
+ // Add shims for `#build/*` imports that do not already have matching types
+ opts.references.push({ path: resolve(nuxt.options.buildDir, 'types/build.d.ts') })
// Add module augmentations directly to NuxtConfig
opts.references.push({ path: resolve(nuxt.options.buildDir, 'types/schema.d.ts') })
opts.references.push({ path: resolve(nuxt.options.buildDir, 'types/app.config.d.ts') })
@@ -125,6 +146,14 @@ async function initNuxt (nuxt: Nuxt) {
}
})
+ // Prompt to install `@nuxt/scripts` if user has configured it
+ // @ts-expect-error scripts types are not present as the module is not installed
+ if (nuxt.options.scripts) {
+ if (!nuxt.options._modules.some(m => m === '@nuxt/scripts' || m === '@nuxt/scripts-nightly')) {
+ await import('../core/features').then(({ installNuxtModule }) => installNuxtModule('@nuxt/scripts'))
+ }
+ }
+
// Add plugin normalization plugin
addBuildPlugin(RemovePluginMetadataPlugin(nuxt))
@@ -141,6 +170,9 @@ async function initNuxt (nuxt: Nuxt) {
// add resolver for modules used in virtual files
addVitePlugin(() => resolveDeepImportsPlugin(nuxt))
+ // Add transform for `onPrehydrate` lifecycle hook
+ addBuildPlugin(prehydrateTransformPlugin(nuxt))
+
if (nuxt.options.experimental.localLayerAliases) {
// Add layer aliasing support for ~, ~~, @ and @@ aliases
addVitePlugin(() => LayerAliasingPlugin.vite({
@@ -240,6 +272,9 @@ async function initNuxt (nuxt: Nuxt) {
...nuxt.options._layers.filter(i => i.cwd.includes('node_modules')).map(i => i.cwd as string),
)
+ // Ensure we can resolve dependencies within layers
+ nuxt.options.modulesDir.push(...nuxt.options._layers.map(l => resolve(l.cwd, 'node_modules')))
+
// Init user modules
await nuxt.callHook('modules:before')
const modulesToInstall = []
@@ -527,6 +562,12 @@ async function initNuxt (nuxt: Nuxt) {
addPlugin(resolve(nuxt.options.appDir, 'plugins/payload.client'))
}
+ // Show compatibility version banner when Nuxt is running with a compatibility version
+ // that is different from the current major version
+ if (!(satisfies(nuxt._version, nuxt.options.future.compatibilityVersion + '.x'))) {
+ console.info(`Running with compatibility version \`${nuxt.options.future.compatibilityVersion}\``)
+ }
+
await nuxt.callHook('ready', nuxt)
}
@@ -550,6 +591,12 @@ export async function loadNuxt (opts: LoadNuxtOptions): Promise {
}
}
+ if (!options._modules.some(m => m === '@nuxt/scripts' || m === '@nuxt/scripts-nightly')) {
+ options.imports = defu(options.imports, {
+ presets: [scriptsStubsPreset],
+ })
+ }
+
// Nuxt Webpack Builder is currently opt-in
if (options.builder === '@nuxt/webpack-builder') {
if (!await import('./features').then(r => r.ensurePackageInstalled('@nuxt/webpack-builder', {
@@ -581,8 +628,13 @@ export async function loadNuxt (opts: LoadNuxtOptions): Promise {
options._modules.push('@nuxt/telemetry')
}
+ // Ensure we share runtime config between Nuxt and Nitro
+ options.runtimeConfig = options.nitro.runtimeConfig as RuntimeConfig
+
const nuxt = createNuxt(options)
+ await Promise.all(keyDependencies.map(dependency => checkDependencyVersion(dependency, nuxt._version)))
+
// We register hooks layer-by-layer so any overrides need to be registered separately
if (opts.overrides?.hooks) {
nuxt.hooks.addHooks(opts.overrides.hooks)
@@ -599,4 +651,15 @@ export async function loadNuxt (opts: LoadNuxtOptions): Promise {
return nuxt
}
-const RESTART_RE = /^(app|error|app\.config)\.(js|ts|mjs|jsx|tsx|vue)$/i
+async function checkDependencyVersion (name: string, nuxtVersion: string): Promise {
+ const path = await resolvePath(name).catch(() => null)
+
+ if (!path) { return }
+ const { version } = await readPackageJSON(path)
+
+ if (version && gt(nuxtVersion, version)) {
+ console.warn(`[nuxt] Expected \`${name}\` to be at least \`${nuxtVersion}\` but got \`${version}\`. This might lead to unexpected behavior. Check your package.json or refresh your lockfile.`)
+ }
+}
+
+const RESTART_RE = /^(?:app|error|app\.config)\.(?:js|ts|mjs|jsx|tsx|vue)$/i
diff --git a/packages/nuxt/src/core/plugins/import-protection.ts b/packages/nuxt/src/core/plugins/import-protection.ts
index cd740d982..56f0a579f 100644
--- a/packages/nuxt/src/core/plugins/import-protection.ts
+++ b/packages/nuxt/src/core/plugins/import-protection.ts
@@ -22,7 +22,7 @@ export const nuxtImportProtections = (nuxt: { options: NuxtOptions }, options: {
])
patterns.push([
- /^((|~|~~|@|@@)\/)?nuxt\.config(\.|$)/,
+ /^((~|~~|@|@@)?\/)?nuxt\.config(\.|$)/,
'Importing directly from a `nuxt.config` file is not allowed. Instead, use runtime config or a module.',
])
diff --git a/packages/nuxt/src/core/plugins/prehydrate.ts b/packages/nuxt/src/core/plugins/prehydrate.ts
new file mode 100644
index 000000000..e47fa3883
--- /dev/null
+++ b/packages/nuxt/src/core/plugins/prehydrate.ts
@@ -0,0 +1,67 @@
+import { transform } from 'esbuild'
+import { parse } from 'acorn'
+import { walk } from 'estree-walker'
+import type { Node } from 'estree-walker'
+import type { Nuxt } from '@nuxt/schema'
+import { createUnplugin } from 'unplugin'
+import type { SimpleCallExpression } from 'estree'
+import MagicString from 'magic-string'
+
+import { hash } from 'ohash'
+import { isJS, isVue } from '../utils'
+
+export function prehydrateTransformPlugin (nuxt: Nuxt) {
+ return createUnplugin(() => ({
+ name: 'nuxt:prehydrate-transform',
+ transformInclude (id) {
+ return isJS(id) || isVue(id, { type: ['script'] })
+ },
+ async transform (code, id) {
+ if (!code.includes('onPrehydrate(')) { return }
+
+ const s = new MagicString(code)
+ const promises: Array> = []
+
+ walk(parse(code, {
+ sourceType: 'module',
+ ecmaVersion: 'latest',
+ ranges: true,
+ }) as Node, {
+ enter (_node) {
+ if (_node.type !== 'CallExpression' || _node.callee.type !== 'Identifier') { return }
+ const node = _node as SimpleCallExpression & { start: number, end: number }
+ const name = 'name' in node.callee && node.callee.name
+ if (name === 'onPrehydrate') {
+ if (node.arguments[0].type !== 'ArrowFunctionExpression' && node.arguments[0].type !== 'FunctionExpression') { return }
+
+ const needsAttr = node.arguments[0].params.length > 0
+ const { start, end } = node.arguments[0] as Node & { start: number, end: number }
+
+ const p = transform(`forEach(${code.slice(start, end)})`, { loader: 'ts', minify: true })
+ promises.push(p.then(({ code: result }) => {
+ const cleaned = result.slice('forEach'.length).replace(/;\s+$/, '')
+ const args = [JSON.stringify(cleaned)]
+ if (needsAttr) {
+ args.push(JSON.stringify(hash(result)))
+ }
+ s.overwrite(start, end, args.join(', '))
+ }))
+ }
+ },
+ })
+
+ await Promise.all(promises).catch((e) => {
+ console.error(`[nuxt] Could not transform onPrehydrate in \`${id}\`:`, e)
+ })
+
+ if (s.hasChanged()) {
+ return {
+ code: s.toString(),
+ map: nuxt.options.sourcemap.server || nuxt.options.sourcemap.client
+ ? s.generateMap({ hires: true })
+ : undefined,
+ }
+ }
+ },
+ }))
+}
diff --git a/packages/nuxt/src/core/runtime/nitro/dev-server-logs.ts b/packages/nuxt/src/core/runtime/nitro/dev-server-logs.ts
index 194ca2dc3..3ff3f1667 100644
--- a/packages/nuxt/src/core/runtime/nitro/dev-server-logs.ts
+++ b/packages/nuxt/src/core/runtime/nitro/dev-server-logs.ts
@@ -6,11 +6,17 @@ import type { H3Event } from 'h3'
import { withTrailingSlash } from 'ufo'
import { getContext } from 'unctx'
+import { isVNode } from 'vue'
import type { NitroApp } from '#internal/nitro/app'
// @ts-expect-error virtual file
import { rootDir } from '#internal/dev-server-logs-options'
+const devReducers: Record any> = {
+ VNode: data => isVNode(data) ? { type: data.type, props: data.props } : undefined,
+ URL: data => data instanceof URL ? data.toString() : undefined,
+}
+
interface NuxtDevAsyncContext {
logs: LogObject[]
event: H3Event
@@ -54,9 +60,10 @@ export default (nitroApp: NitroApp) => {
const ctx = asyncContext.tryUse()
if (!ctx) { return }
try {
- htmlContext.bodyAppend.unshift(``)
+ htmlContext.bodyAppend.unshift(``)
} catch (e) {
- console.warn('[nuxt] Failed to stringify dev server logs. You can define your own reducer/reviver for rich types following the instructions in https://nuxt.com/docs/api/composables/use-nuxt-app#payload.', e)
+ const shortError = e instanceof Error && 'toString' in e ? ` Received \`${e.toString()}\`.` : ''
+ console.warn(`[nuxt] Failed to stringify dev server logs.${shortError} You can define your own reducer/reviver for rich types following the instructions in https://nuxt.com/docs/api/composables/use-nuxt-app#payload.`)
}
})
}
@@ -70,8 +77,8 @@ function getStack () {
return stack.stack?.replace(EXCLUDE_TRACE_RE, '').replace(/^Error.*\n/, '') || ''
}
-const FILENAME_RE = /at.*\(([^:)]+)[):]/
-const FILENAME_RE_GLOBAL = /at.*\(([^)]+)\)/g
+const FILENAME_RE = /at[^(]*\(([^:)]+)[):]/
+const FILENAME_RE_GLOBAL = /at[^(]*\(([^)]+)\)/g
function extractFilenameFromStack (stacktrace: string) {
return stacktrace.match(FILENAME_RE)?.[1].replace(withTrailingSlash(rootDir), '')
}
diff --git a/packages/nuxt/src/core/runtime/nitro/error-500.d.ts b/packages/nuxt/src/core/runtime/nitro/error-500.d.ts
deleted file mode 120000
index 6cd90afd1..000000000
--- a/packages/nuxt/src/core/runtime/nitro/error-500.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-../../../../../ui-templates/dist/templates/error-500.d.ts
\ No newline at end of file
diff --git a/packages/nuxt/src/core/runtime/nitro/error-500.js b/packages/nuxt/src/core/runtime/nitro/error-500.js
deleted file mode 120000
index 5e590c862..000000000
--- a/packages/nuxt/src/core/runtime/nitro/error-500.js
+++ /dev/null
@@ -1 +0,0 @@
-../../../../../ui-templates/dist/templates/error-500.js
\ No newline at end of file
diff --git a/packages/nuxt/src/core/runtime/nitro/error-500.ts b/packages/nuxt/src/core/runtime/nitro/error-500.ts
new file mode 120000
index 000000000..7c4f86d19
--- /dev/null
+++ b/packages/nuxt/src/core/runtime/nitro/error-500.ts
@@ -0,0 +1 @@
+../../../../../ui-templates/dist/templates/error-500.ts
\ No newline at end of file
diff --git a/packages/nuxt/src/core/runtime/nitro/error-dev.d.ts b/packages/nuxt/src/core/runtime/nitro/error-dev.d.ts
deleted file mode 120000
index a23485f79..000000000
--- a/packages/nuxt/src/core/runtime/nitro/error-dev.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-../../../../../ui-templates/dist/templates/error-dev.d.ts
\ No newline at end of file
diff --git a/packages/nuxt/src/core/runtime/nitro/error-dev.js b/packages/nuxt/src/core/runtime/nitro/error-dev.js
deleted file mode 120000
index e507d64bd..000000000
--- a/packages/nuxt/src/core/runtime/nitro/error-dev.js
+++ /dev/null
@@ -1 +0,0 @@
-../../../../../ui-templates/dist/templates/error-dev.js
\ No newline at end of file
diff --git a/packages/nuxt/src/core/runtime/nitro/error-dev.ts b/packages/nuxt/src/core/runtime/nitro/error-dev.ts
new file mode 120000
index 000000000..b14fdaa62
--- /dev/null
+++ b/packages/nuxt/src/core/runtime/nitro/error-dev.ts
@@ -0,0 +1 @@
+../../../../../ui-templates/dist/templates/error-dev.ts
\ No newline at end of file
diff --git a/packages/nuxt/src/core/runtime/nitro/renderer.ts b/packages/nuxt/src/core/runtime/nitro/renderer.ts
index e78d38fd0..ebd84414a 100644
--- a/packages/nuxt/src/core/runtime/nitro/renderer.ts
+++ b/packages/nuxt/src/core/runtime/nitro/renderer.ts
@@ -21,11 +21,13 @@ import type { HeadEntryOptions } from '@unhead/schema'
import type { Link, Script, Style } from '@unhead/vue'
import { createServerHead } from '@unhead/vue'
-import { defineRenderHandler, getRouteRules, useAppConfig, useRuntimeConfig, useStorage } from '#internal/nitro'
+import { defineRenderHandler, getRouteRules, useRuntimeConfig, useStorage } from '#internal/nitro'
import { useNitroApp } from '#internal/nitro/app'
// @ts-expect-error virtual file
import unheadPlugins from '#internal/unhead-plugins.mjs'
+// @ts-expect-error virtual file
+import { renderSSRHeadOptions } from '#internal/unhead.config.mjs'
import type { NuxtPayload, NuxtSSRContext } from '#app'
// @ts-expect-error virtual file
@@ -325,7 +327,7 @@ export default defineRenderHandler(async (event): Promise window?.__NUXT__?.config || {}
export const appConfigDeclarationTemplate: NuxtTemplate = {
filename: 'types/app.config.d.ts',
getContents ({ app, nuxt }) {
+ const typesDir = join(nuxt.options.buildDir, 'types')
+ const configPaths = app.configs.map(path => relative(typesDir, path).replace(/\b\.\w+$/g, ''))
+
return `
import type { CustomAppConfig } from 'nuxt/schema'
import type { Defu } from 'defu'
-${app.configs.map((id: string, index: number) => `import ${`cfg${index}`} from ${JSON.stringify(id.replace(/(?<=\w)\.\w+$/g, ''))}`).join('\n')}
+${configPaths.map((id: string, index: number) => `import ${`cfg${index}`} from ${JSON.stringify(id)}`).join('\n')}
declare const inlineConfig = ${JSON.stringify(nuxt.options.appConfig, null, 2)}
type ResolvedAppConfig = Defu `typeof cfg${index}`).join(', ')}]>
@@ -393,10 +402,43 @@ export const nuxtConfigTemplate: NuxtTemplate = {
`export const devRootDir = ${ctx.nuxt.options.dev ? JSON.stringify(ctx.nuxt.options.rootDir) : 'null'}`,
`export const devLogs = ${JSON.stringify(ctx.nuxt.options.features.devLogs)}`,
`export const nuxtLinkDefaults = ${JSON.stringify(ctx.nuxt.options.experimental.defaults.nuxtLink)}`,
- `export const asyncDataDefaults = ${JSON.stringify(ctx.nuxt.options.experimental.defaults.useAsyncData)}`,
+ `export const asyncDataDefaults = ${JSON.stringify({
+ ...ctx.nuxt.options.experimental.defaults.useAsyncData,
+ value: ctx.nuxt.options.experimental.defaults.useAsyncData.value === 'null' ? null : undefined,
+ errorValue: ctx.nuxt.options.experimental.defaults.useAsyncData.errorValue === 'null' ? null : undefined,
+ })}`,
+ `export const resetAsyncDataToUndefined = ${ctx.nuxt.options.experimental.resetAsyncDataToUndefined}`,
+ `export const nuxtDefaultErrorValue = ${ctx.nuxt.options.future.compatibilityVersion === 4 ? 'undefined' : 'null'}`,
`export const fetchDefaults = ${JSON.stringify(fetchDefaults)}`,
`export const vueAppRootContainer = ${ctx.nuxt.options.app.rootId ? `'#${ctx.nuxt.options.app.rootId}'` : `'body > ${ctx.nuxt.options.app.rootTag}'`}`,
`export const viewTransition = ${ctx.nuxt.options.experimental.viewTransition}`,
+ `export const appId = ${JSON.stringify(ctx.nuxt.options.appId)}`,
].join('\n\n')
},
}
+
+const TYPE_FILENAME_RE = /\.([cm])?[jt]s$/
+const DECLARATION_RE = /\.d\.[cm]?ts$/
+export const buildTypeTemplate: NuxtTemplate = {
+ filename: 'types/build.d.ts',
+ getContents ({ app }) {
+ let declarations = ''
+
+ for (const file of app.templates) {
+ if (file.write || !file.filename || DECLARATION_RE.test(file.filename)) {
+ continue
+ }
+
+ if (TYPE_FILENAME_RE.test(file.filename)) {
+ const typeFilenames = new Set([file.filename.replace(TYPE_FILENAME_RE, '.d.$1ts'), file.filename.replace(TYPE_FILENAME_RE, '.d.ts')])
+ if (app.templates.some(f => f.filename && typeFilenames.has(f.filename))) {
+ continue
+ }
+ }
+
+ declarations += 'declare module ' + JSON.stringify(join('#build', file.filename)) + ';\n'
+ }
+
+ return declarations
+ },
+}
diff --git a/packages/nuxt/src/core/utils/plugins.ts b/packages/nuxt/src/core/utils/plugins.ts
index 54f214b8a..b8edfe9bd 100644
--- a/packages/nuxt/src/core/utils/plugins.ts
+++ b/packages/nuxt/src/core/utils/plugins.ts
@@ -34,7 +34,7 @@ export function isVue (id: string, opts: { type?: Array<'template' | 'script' |
return true
}
-const JS_RE = /\.((c|m)?j|t)sx?$/
+const JS_RE = /\.(?:[cm]?j|t)sx?$/
export function isJS (id: string) {
// JavaScript files
diff --git a/packages/nuxt/src/head/module.ts b/packages/nuxt/src/head/module.ts
index c254d0103..be319183c 100644
--- a/packages/nuxt/src/head/module.ts
+++ b/packages/nuxt/src/head/module.ts
@@ -1,10 +1,11 @@
import { resolve } from 'pathe'
import { addComponent, addImportsSources, addPlugin, addTemplate, defineNuxtModule, tryResolveModule } from '@nuxt/kit'
+import type { NuxtOptions } from '@nuxt/schema'
import { distDir } from '../dirs'
const components = ['NoScript', 'Link', 'Base', 'Title', 'Meta', 'Style', 'Head', 'Html', 'Body']
-export default defineNuxtModule({
+export default defineNuxtModule({
meta: {
name: 'meta',
},
@@ -68,9 +69,19 @@ export default import.meta.server ? [CapoPlugin({ track: true })] : [];`
},
})
+ addTemplate({
+ filename: 'unhead.config.mjs',
+ getContents () {
+ return [
+ `export const renderSSRHeadOptions = ${JSON.stringify(options.renderSSRHeadOptions || {})}`,
+ ].join('\n')
+ },
+ })
+
// template is only exposed in nuxt context, expose in nitro context as well
nuxt.hooks.hook('nitro:config', (config) => {
config.virtual!['#internal/unhead-plugins.mjs'] = () => nuxt.vfs['#build/unhead-plugins']
+ config.virtual!['#internal/unhead.config.mjs'] = () => nuxt.vfs['#build/unhead.config']
})
// Add library-specific plugin
diff --git a/packages/nuxt/src/imports/presets.ts b/packages/nuxt/src/imports/presets.ts
index 7949ed614..ba5a513d3 100644
--- a/packages/nuxt/src/imports/presets.ts
+++ b/packages/nuxt/src/imports/presets.ts
@@ -66,7 +66,7 @@ const granularAppPresets: InlinePreset[] = [
from: '#app/composables/cookie',
},
{
- imports: ['prerenderRoutes', 'useRequestHeader', 'useRequestHeaders', 'useRequestEvent', 'useRequestFetch', 'setResponseStatus'],
+ imports: ['onPrehydrate', 'prerenderRoutes', 'useRequestHeader', 'useRequestHeaders', 'useRequestEvent', 'useRequestFetch', 'setResponseStatus'],
from: '#app/composables/ssr',
},
{
@@ -111,6 +111,34 @@ const granularAppPresets: InlinePreset[] = [
},
]
+export const scriptsStubsPreset = {
+ imports: [
+ 'useConsentScriptTrigger',
+ 'useAnalyticsPageEvent',
+ 'useElementScriptTrigger',
+ 'useScript',
+ 'useScriptGoogleAnalytics',
+ 'useScriptPlausibleAnalytics',
+ 'useScriptCloudflareWebAnalytics',
+ 'useScriptFathomAnalytics',
+ 'useScriptMatomoAnalytics',
+ 'useScriptGoogleTagManager',
+ 'useScriptSegment',
+ 'useScriptFacebookPixel',
+ 'useScriptXPixel',
+ 'useScriptIntercom',
+ 'useScriptHotjar',
+ 'useScriptStripe',
+ 'useScriptLemonSqueezy',
+ 'useScriptVimeoPlayer',
+ 'useScriptYouTubeIframe',
+ 'useScriptGoogleMaps',
+ 'useScriptNpm',
+ ],
+ priority: -1,
+ from: '#app/composables/script-stubs',
+} satisfies InlinePreset
+
// This is a separate preset as we'll swap these out for import from `vue-router` itself in `pages` module
const routerPreset = defineUnimportPreset({
imports: ['onBeforeRouteLeave', 'onBeforeRouteUpdate'],
diff --git a/packages/nuxt/src/imports/transform.ts b/packages/nuxt/src/imports/transform.ts
index 19f7d8865..0edeb96e1 100644
--- a/packages/nuxt/src/imports/transform.ts
+++ b/packages/nuxt/src/imports/transform.ts
@@ -1,6 +1,7 @@
import { createUnplugin } from 'unplugin'
import type { Unimport } from 'unimport'
import { normalize } from 'pathe'
+import { tryUseNuxt } from '@nuxt/kit'
import type { ImportsOptions } from 'nuxt/schema'
import { isJS, isVue } from '../core/utils'
@@ -37,7 +38,11 @@ export const TransformPlugin = createUnplugin(({ ctx, options, sourcemap }: { ct
return
}
- const { s } = await ctx.injectImports(code, id, { autoImport: options.autoImport && !isNodeModule })
+ const { s, imports } = await ctx.injectImports(code, id, { autoImport: options.autoImport && !isNodeModule })
+ if (imports.some(i => i.from === '#app/composables/script-stubs') && tryUseNuxt()?.options.test === false) {
+ import('../core/features').then(({ installNuxtModule }) => installNuxtModule('@nuxt/scripts'))
+ }
+
if (s.hasChanged()) {
return {
code: s.toString(),
diff --git a/packages/nuxt/src/pages/module.ts b/packages/nuxt/src/pages/module.ts
index a4f5e9d47..ee5b8c1c7 100644
--- a/packages/nuxt/src/pages/module.ts
+++ b/packages/nuxt/src/pages/module.ts
@@ -422,11 +422,6 @@ export default defineNuxtModule({
getContents: () => 'export { START_LOCATION, useRoute } from \'vue-router\'',
})
- // Optimize vue-router to ensure we share the same injection symbol
- nuxt.options.vite.optimizeDeps = nuxt.options.vite.optimizeDeps || {}
- nuxt.options.vite.optimizeDeps.include = nuxt.options.vite.optimizeDeps.include || []
- nuxt.options.vite.optimizeDeps.include.push('vue-router')
-
nuxt.options.vite.resolve = nuxt.options.vite.resolve || {}
nuxt.options.vite.resolve.dedupe = nuxt.options.vite.resolve.dedupe || []
nuxt.options.vite.resolve.dedupe.push('vue-router')
diff --git a/packages/nuxt/src/pages/plugins/route-injection.ts b/packages/nuxt/src/pages/plugins/route-injection.ts
index 257f104e1..41d235b2d 100644
--- a/packages/nuxt/src/pages/plugins/route-injection.ts
+++ b/packages/nuxt/src/pages/plugins/route-injection.ts
@@ -1,10 +1,13 @@
import { createUnplugin } from 'unplugin'
import MagicString from 'magic-string'
import type { Nuxt } from '@nuxt/schema'
+import { stripLiteral } from 'strip-literal'
import { isVue } from '../../core/utils'
-const INJECTION_RE = /\b_ctx\.\$route\b/g
-const INJECTION_SINGLE_RE = /\b_ctx\.\$route\b/
+const INJECTION_RE_TEMPLATE = /\b_ctx\.\$route\b/g
+const INJECTION_RE_SCRIPT = /\bthis\.\$route\b/g
+
+const INJECTION_SINGLE_RE = /\bthis\.\$route\b|\b_ctx\.\$route\b/
export const RouteInjectionPlugin = (nuxt: Nuxt) => createUnplugin(() => {
return {
@@ -14,14 +17,30 @@ export const RouteInjectionPlugin = (nuxt: Nuxt) => createUnplugin(() => {
return isVue(id, { type: ['template', 'script'] })
},
transform (code) {
- if (!INJECTION_SINGLE_RE.test(code) || code.includes('_ctx._.provides[__nuxt_route_symbol')) { return }
+ if (!INJECTION_SINGLE_RE.test(code) || code.includes('_ctx._.provides[__nuxt_route_symbol') || code.includes('this._.provides[__nuxt_route_symbol')) { return }
let replaced = false
const s = new MagicString(code)
- s.replace(INJECTION_RE, () => {
- replaced = true
- return '(_ctx._.provides[__nuxt_route_symbol] || _ctx.$route)'
- })
+ const strippedCode = stripLiteral(code)
+
+ // Local helper function for regex-based replacements using `strippedCode`
+ const replaceMatches = (regExp: RegExp, replacement: string) => {
+ for (const match of strippedCode.matchAll(regExp)) {
+ const start = match.index!
+ const end = start + match[0].length
+ s.overwrite(start, end, replacement)
+ if (!replaced) {
+ replaced = true
+ }
+ }
+ }
+
+ // handles `$route` in template
+ replaceMatches(INJECTION_RE_TEMPLATE, '(_ctx._.provides[__nuxt_route_symbol] || _ctx.$route)')
+
+ // handles `this.$route` in script
+ replaceMatches(INJECTION_RE_SCRIPT, '(this._.provides[__nuxt_route_symbol] || this.$route)')
+
if (replaced) {
s.prepend('import { PageRouteSymbol as __nuxt_route_symbol } from \'#app/components/injections\';\n')
}
diff --git a/packages/nuxt/src/pages/runtime/page.ts b/packages/nuxt/src/pages/runtime/page.ts
index bee5eca87..b0bd345cd 100644
--- a/packages/nuxt/src/pages/runtime/page.ts
+++ b/packages/nuxt/src/pages/runtime/page.ts
@@ -1,4 +1,4 @@
-import { Suspense, Transition, defineComponent, h, inject, nextTick, ref, watch } from 'vue'
+import { Fragment, Suspense, Transition, defineComponent, h, inject, nextTick, ref, watch } from 'vue'
import type { KeepAliveProps, TransitionProps, VNode } from 'vue'
import { RouterView } from '#vue-router'
import { defu } from 'defu'
@@ -37,7 +37,7 @@ export default defineComponent({
default: null,
},
},
- setup (props, { attrs, expose }) {
+ setup (props, { attrs, slots, expose }) {
const nuxtApp = useNuxtApp()
const pageRef = ref()
const forkRoute = inject(PageRouteSymbol, null)
@@ -120,7 +120,7 @@ export default defineComponent({
default: () => {
const providerVNode = h(RouteProvider, {
key: key || undefined,
- vnode: routeProps.Component,
+ vnode: slots.default ? h(Fragment, undefined, slots.default(routeProps)) : routeProps.Component,
route: routeProps.route,
renderKey: key || undefined,
trackRootNodes: hasTransition,
diff --git a/packages/nuxt/src/pages/runtime/plugins/prerender.server.ts b/packages/nuxt/src/pages/runtime/plugins/prerender.server.ts
index 31467d17b..a8cf53915 100644
--- a/packages/nuxt/src/pages/runtime/plugins/prerender.server.ts
+++ b/packages/nuxt/src/pages/runtime/plugins/prerender.server.ts
@@ -23,7 +23,7 @@ export default defineNuxtPlugin(async () => {
// Implementation
-const OPTIONAL_PARAM_RE = /^\/?:.*(\?|\(\.\*\)\*)$/
+const OPTIONAL_PARAM_RE = /^\/?:.*(?:\?|\(\.\*\)\*)$/
function processRoutes (routes: RouteRecordRaw[], currentPath = '/', routesToPrerender = new Set()) {
for (const route of routes) {
diff --git a/packages/nuxt/src/pages/utils.ts b/packages/nuxt/src/pages/utils.ts
index dd0dbf8bf..9bd65069f 100644
--- a/packages/nuxt/src/pages/utils.ts
+++ b/packages/nuxt/src/pages/utils.ts
@@ -135,7 +135,7 @@ export async function generateRoutesFromFiles (files: ScannedFile[], options: Ge
return prepareRoutes(routes)
}
-const SFC_SCRIPT_RE = /]*>([\s\S]*?)<\/script\s*[^>]*>/i
+const SFC_SCRIPT_RE = /]*>([\s\S]*?)<\/script[^>]*>/i
export function extractScriptContent (html: string) {
const match = html.match(SFC_SCRIPT_RE)
@@ -146,7 +146,7 @@ export function extractScriptContent (html: string) {
return null
}
-const PAGE_META_RE = /(definePageMeta\([\s\S]*?\))/
+const PAGE_META_RE = /definePageMeta\([\s\S]*?\)/
const DYNAMIC_META_KEY = '__nuxt_dynamic_meta_key' as const
const pageContentsCache: Record = {}
@@ -261,7 +261,7 @@ function getRoutePath (tokens: SegmentToken[]): string {
}, '/')
}
-const PARAM_CHAR_RE = /[\w\d_.]/
+const PARAM_CHAR_RE = /[\w.]/
function parseSegment (segment: string) {
let state: SegmentParserState = SegmentParserState.initial
@@ -537,7 +537,7 @@ export function pathToNitroGlob (path: string) {
return null
}
- return path.replace(/\/(?:[^:/]+)?:\w+.*$/, '/**')
+ return path.replace(/\/[^:/]*:\w.*$/, '/**')
}
export function resolveRoutePaths (page: NuxtPage, parent = '/'): string[] {
diff --git a/packages/nuxt/test/islandTransform.test.ts b/packages/nuxt/test/islandTransform.test.ts
index 519373867..8c8145440 100644
--- a/packages/nuxt/test/islandTransform.test.ts
+++ b/packages/nuxt/test/islandTransform.test.ts
@@ -23,11 +23,9 @@ const pluginWebpack = islandsTransform.raw({
selectiveClient: true,
}, { framework: 'webpack', webpack: { compiler: {} as any } })
-const viteTransform = async (source: string, id: string, isDev = false, selectiveClient = false) => {
+const viteTransform = async (source: string, id: string, selectiveClient = false) => {
const vitePlugin = islandsTransform.raw({
getComponents,
- rootDir: '/root',
- isDev,
selectiveClient,
}, { framework: 'vite' }) as Plugin
@@ -193,7 +191,7 @@ describe('islandTransform - server and island components', () => {
- `, 'WithVif.vue', false, true)
+ `, 'WithVif.vue', true)
expect(normalizeLineEndings(result)).toMatchInlineSnapshot(`
"
- `, 'hello.server.vue', true, true)
+ `, 'hello.server.vue', true)
expect(normalizeLineEndings(result)).toMatchInlineSnapshot(`
"
-
@@ -247,42 +241,6 @@ describe('islandTransform - server and island components', () => {
"
`)
- // root-dir prop should never be used in production
- expect(result).toContain('root-dir="/root"')
- })
-
- it('test transform with vite in prod', async () => {
- const result = await viteTransform(`
-
-
-
-
-
- `, 'hello.server.vue', false, true)
-
- expect(normalizeLineEndings(result)).toMatchInlineSnapshot(`
- "
-
-
-
-
-
- "
- `)
-
- // root-dir prop should never be used in production
- expect(result).not.toContain('root-dir="')
})
it('test dynamic nuxt-client', async () => {
@@ -298,13 +256,13 @@ describe('islandTransform - server and island components', () => {
const nuxtClient = false
- `, 'hello.server.vue', false, true)
+ `, 'hello.server.vue', true)
expect(normalizeLineEndings(result)).toMatchInlineSnapshot(`
"
-
-
+ "
+
+
+
- "
- `)
+ "
+ `)
expect(result).toContain('import NuxtTeleportIslandComponent from \'#app/components/nuxt-teleport-island-component\'')
})
@@ -389,7 +347,7 @@ describe('islandTransform - server and island components', () => {
-
"
diff --git a/packages/nuxt/test/load-nuxt.test.ts b/packages/nuxt/test/load-nuxt.test.ts
index d6207329c..7efadc7e4 100644
--- a/packages/nuxt/test/load-nuxt.test.ts
+++ b/packages/nuxt/test/load-nuxt.test.ts
@@ -1,11 +1,32 @@
import { fileURLToPath } from 'node:url'
-import { describe, expect, it } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
import { normalize } from 'pathe'
import { withoutTrailingSlash } from 'ufo'
+import { readPackageJSON } from 'pkg-types'
+import { inc } from 'semver'
import { loadNuxt } from '../src'
+import { version } from '../package.json'
const repoRoot = withoutTrailingSlash(normalize(fileURLToPath(new URL('../../../', import.meta.url))))
+vi.stubGlobal('console', {
+ ...console,
+ error: vi.fn(console.error),
+ warn: vi.fn(console.warn),
+})
+
+vi.mock('pkg-types', async (og) => {
+ const originalPkgTypes = (await oguseLink in NuxtLink: true
')
expect(html).toContain('route using useLink: /nuxt-link/trailing-slash
')
expect(html).toContain('href using useLink: /nuxt-link/trailing-slash
')
@@ -812,21 +847,21 @@ describe('nuxt links', () => {
describe('head tags', () => {
it('SSR should render tags', async () => {
- const headHtml = await $fetch('/head')
+ const headHtml = await $fetch