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/composables/asyncData.ts b/packages/nuxt/src/app/composables/asyncData.ts
index 5e9f9bf081..aafb729e14 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) => {
@@ -404,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,
@@ -418,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,
@@ -440,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]
@@ -463,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 {
@@ -520,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 2a76c389a0..69b56e1c2b 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 d7b50ab717..a083c47789 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/loading-indicator.ts b/packages/nuxt/src/app/composables/loading-indicator.ts
index 5bae3c98b5..b3c0a86455 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 13a60e8d82..58b53745c9 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 4e8cd677d4..7a7d8fd2e7 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 750a1aeaf6..d6395e5832 100644
--- a/packages/nuxt/src/app/composables/router.ts
+++ b/packages/nuxt/src/app/composables/router.ts
@@ -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/defaults.ts b/packages/nuxt/src/app/defaults.ts
new file mode 100644
index 0000000000..c83129cca6
--- /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 75821e7b55..8222527514 100644
--- a/packages/nuxt/src/app/nuxt.ts
+++ b/packages/nuxt/src/app/nuxt.ts
@@ -1,4 +1,4 @@
-import { effectScope, getCurrentInstance, getCurrentScope, hasInjectionContext, reactive } from 'vue'
+import { effectScope, getCurrentInstance, getCurrentScope, hasInjectionContext, reactive, shallowReactive } from 'vue'
import type { App, EffectScope, Ref, VNode, onErrorCaptured } from 'vue'
import type { RouteLocationNormalizedLoaded } from '#vue-router'
import type { HookCallback, Hookable } from 'hookable'
@@ -20,13 +20,15 @@ import type { LoadingIndicator } from '../app/composables/loading-indicator'
import type { RouteAnnouncer } from '../app/composables/route-announcer'
import type { 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'
-// @ts-expect-error virtual import
-import { buildId } from '#build/nuxt.config.mjs'
-
-function getNuxtAppCtx (appName?: string) {
- return getContext(appName || buildId || 'nuxt-app', {
+function getNuxtAppCtx (appName = appId || 'nuxt-app') {
+ return getContext(appName, {
asyncContext: !!__NUXT_ASYNC_CONTEXT__ && import.meta.server,
})
}
@@ -92,8 +94,8 @@ export interface NuxtPayload {
state: Record
once: Set
config?: Pick
- error?: NuxtError | null
- _errors: Record
+ error?: NuxtError | DefaultErrorValue
+ _errors: Record
[key: string]: unknown
}
@@ -120,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 */
@@ -244,7 +248,7 @@ export interface CreateOptions {
export function createNuxtApp (options: CreateOptions) {
let hydratingCount = 0
const nuxtApp: NuxtApp = {
- name: buildId,
+ _name: appId || 'nuxt-app',
_scope: effectScope(),
provide: undefined,
globalName: 'nuxt',
@@ -252,12 +256,11 @@ 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: {},
@@ -288,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
diff --git a/packages/nuxt/src/app/plugins/dev-server-logs.ts b/packages/nuxt/src/app/plugins/dev-server-logs.ts
index cccb105794..eeae8d7562 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/components/client-fallback-auto-id.ts b/packages/nuxt/src/components/client-fallback-auto-id.ts
index 19b5a39984..7aa42f1d0a 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 6e018dc167..ac5a954932 100644
--- a/packages/nuxt/src/components/islandsTransform.ts
+++ b/packages/nuxt/src/components/islandsTransform.ts
@@ -25,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\''
diff --git a/packages/nuxt/src/components/loader.ts b/packages/nuxt/src/components/loader.ts
index 628638ffad..b56271e631 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 82e227a2ad..24fe7f3fbc 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[]
diff --git a/packages/nuxt/src/components/scan.ts b/packages/nuxt/src/components/scan.ts
index 3507955a63..6f22c8b567 100644
--- a/packages/nuxt/src/components/scan.ts
+++ b/packages/nuxt/src/components/scan.ts
@@ -85,8 +85,8 @@ export async function scanComponents (dirs: ComponentsDir[], srcDir: string): Pr
*/
let fileName = basename(filePath, fileExt)
- 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 bb21509ee7..ff55e3c7f2 100644
--- a/packages/nuxt/src/components/templates.ts
+++ b/packages/nuxt/src/components/templates.ts
@@ -104,8 +104,8 @@ export const componentsTypeTemplate = {
const buildDir = nuxt.options.buildDir
const componentTypes = app.components.filter(c => !c.island).map((c) => {
const type = `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}']`
+ ? 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,
diff --git a/packages/nuxt/src/components/tree-shake.ts b/packages/nuxt/src/components/tree-shake.ts
index f6034d023c..56ea65cd3b 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 8f694f035b..4bc7da1e91 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 5f6d726fef..c66e33c198 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 1a5ac75fb2..ce25bdb7db 100644
--- a/packages/nuxt/src/core/nitro.ts
+++ b/packages/nuxt/src/core/nitro.ts
@@ -161,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
@@ -218,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' : nuxt.options.buildId)
+ const buildId = nuxt.options.runtimeConfig.app.buildId ||= nuxt.options.buildId
const buildTimestamp = Date.now()
const manifestPrefix = joinURL(nuxt.options.app.buildAssetsDir, 'builds')
@@ -383,7 +383,7 @@ export async function initNitro (nuxt: Nuxt & { _nitro?: Nitro }) {
tsConfig.compilerOptions.paths[alias] = [absolutePath]
tsConfig.compilerOptions.paths[`${alias}/*`] = [`${absolutePath}/*`]
} else {
- tsConfig.compilerOptions.paths[alias] = [absolutePath.replace(/(?<=\w)\.\w+$/g, '')] /* remove extension */
+ tsConfig.compilerOptions.paths[alias] = [absolutePath.replace(/\b\.\w+$/g, '')] /* remove extension */
}
}
diff --git a/packages/nuxt/src/core/nuxt.ts b/packages/nuxt/src/core/nuxt.ts
index 113d4aea73..5d57d55f46 100644
--- a/packages/nuxt/src/core/nuxt.ts
+++ b/packages/nuxt/src/core/nuxt.ts
@@ -10,9 +10,10 @@ 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'
@@ -63,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()) {
@@ -71,6 +77,17 @@ async function initNuxt (nuxt: Nuxt) {
}
}
+ // Restart Nuxt when layer directories are added or removed
+ const layersDir = withTrailingSlash(resolve(nuxt.options.rootDir, 'layers'))
+ nuxt.hook('builder:watch', (event, relativePath) => {
+ const path = resolve(nuxt.options.srcDir, relativePath)
+ if (event === 'addDir' || event === 'unlinkDir') {
+ if (path.startsWith(layersDir)) {
+ return nuxt.callHook('restart', { hard: true })
+ }
+ }
+ })
+
// Set nuxt instance for useNuxt
nuxtCtx.set(nuxt)
nuxt.hook('close', () => nuxtCtx.unset())
@@ -112,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') })
@@ -253,6 +272,9 @@ async function initNuxt (nuxt: Nuxt) {
...nuxt.options._layers.filter(i => i.cwd.includes('node_modules')).map(i => i.cwd as string),
)
+ // 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 = []
@@ -540,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)
}
@@ -605,6 +633,8 @@ export async function loadNuxt (opts: LoadNuxtOptions): Promise {
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)
@@ -621,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 cd740d9828..56f0a579f4 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/runtime/nitro/dev-server-logs.ts b/packages/nuxt/src/core/runtime/nitro/dev-server-logs.ts
index 194ca2dc38..3ff3f16676 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/renderer.ts b/packages/nuxt/src/core/runtime/nitro/renderer.ts
index eb0b599948..ebd84414a7 100644
--- a/packages/nuxt/src/core/runtime/nitro/renderer.ts
+++ b/packages/nuxt/src/core/runtime/nitro/renderer.ts
@@ -21,7 +21,7 @@ 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
@@ -327,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,11 +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 buildId = ${JSON.stringify(ctx.nuxt.options.buildId)}`,
+ `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 54f214b8a3..b8edfe9bd7 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/imports/presets.ts b/packages/nuxt/src/imports/presets.ts
index aeb0a7bf62..ba5a513d3c 100644
--- a/packages/nuxt/src/imports/presets.ts
+++ b/packages/nuxt/src/imports/presets.ts
@@ -135,6 +135,7 @@ export const scriptsStubsPreset = {
'useScriptGoogleMaps',
'useScriptNpm',
],
+ priority: -1,
from: '#app/composables/script-stubs',
} satisfies InlinePreset
diff --git a/packages/nuxt/src/pages/module.ts b/packages/nuxt/src/pages/module.ts
index a4f5e9d474..ee5b8c1c79 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 257f104e19..41d235b2da 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/plugins/prerender.server.ts b/packages/nuxt/src/pages/runtime/plugins/prerender.server.ts
index 31467d17b0..a8cf539151 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 dd0dbf8bfb..9bd65069fe 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/load-nuxt.test.ts b/packages/nuxt/test/load-nuxt.test.ts
index d6207329c3..7efadc7e48 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 og())
+ return {
+ ...originalPkgTypes,
+ readPackageJSON: vi.fn(originalPkgTypes.readPackageJSON),
+ }
+})
+
+afterEach(() => {
+ vi.clearAllMocks()
+})
+
describe('loadNuxt', () => {
it('respects hook overrides', async () => {
let hookRan = false
@@ -24,3 +45,44 @@ describe('loadNuxt', () => {
expect(hookRan).toBe(true)
})
})
+
+describe('dependency mismatch', () => {
+ it('expect mismatched dependency to log a warning', async () => {
+ vi.mocked(readPackageJSON).mockReturnValue(Promise.resolve({
+ version: '3.0.0',
+ }))
+
+ const nuxt = await loadNuxt({
+ cwd: repoRoot,
+ })
+
+ expect(console.warn).toHaveBeenCalledWith(`[nuxt] Expected \`@nuxt/kit\` to be at least \`${version}\` but got \`3.0.0\`. This might lead to unexpected behavior. Check your package.json or refresh your lockfile.`)
+ expect(console.warn).toHaveBeenCalledWith(`[nuxt] Expected \`@nuxt/schema\` to be at least \`${version}\` but got \`3.0.0\`. This might lead to unexpected behavior. Check your package.json or refresh your lockfile.`)
+
+ vi.mocked(readPackageJSON).mockRestore()
+ await nuxt.close()
+ })
+ it.each([
+ {
+ name: 'nuxt version is lower',
+ depVersion: inc(version, 'minor'),
+ },
+ {
+ name: 'version matches',
+ depVersion: version,
+ },
+ ])('expect no warning when $name.', async ({ depVersion }) => {
+ vi.mocked(readPackageJSON).mockReturnValue(Promise.resolve({
+ depVersion,
+ }))
+
+ const nuxt = await loadNuxt({
+ cwd: repoRoot,
+ })
+
+ expect(console.warn).not.toHaveBeenCalled()
+
+ await nuxt.close()
+ vi.mocked(readPackageJSON).mockRestore()
+ })
+})
diff --git a/packages/nuxt/test/route-injection.test.ts b/packages/nuxt/test/route-injection.test.ts
new file mode 100644
index 0000000000..d2b7b6f69a
--- /dev/null
+++ b/packages/nuxt/test/route-injection.test.ts
@@ -0,0 +1,73 @@
+import { describe, expect, it } from 'vitest'
+import { compileScript, compileTemplate, parse } from '@vue/compiler-sfc'
+import type { Plugin } from 'vite'
+import type { Nuxt } from '@nuxt/schema'
+
+import { RouteInjectionPlugin } from '../src/pages/plugins/route-injection'
+
+describe('route-injection:transform', () => {
+ const injectionPlugin = RouteInjectionPlugin({ options: { sourcemap: { client: false, server: false } } } as Nuxt).raw({}, { framework: 'rollup' }) as Plugin
+
+ const transform = async (source: string) => {
+ const result = await (injectionPlugin.transform! as Function).call({ error: null, warn: null } as any, source, 'test.vue')
+ const code: string = typeof result === 'string' ? result : result?.code
+ let depth = 0
+ return code.split('\n').map((l) => {
+ l = l.trim()
+ if (l.match(/^[}\]]/)) { depth-- }
+ const res = ''.padStart(depth * 2, ' ') + l
+ if (l.match(/[{[]$/)) { depth++ }
+ return res
+ }).join('\n')
+ }
+
+ it('should correctly inject route in template', async () => {
+ const sfc = `{{ $route.path }}`
+ const res = compileTemplate({
+ filename: 'test.vue',
+ id: 'test.vue',
+ source: sfc,
+ })
+ const transformResult = await transform(res.code)
+ expect(transformResult).toMatchInlineSnapshot(`
+ "import { PageRouteSymbol as __nuxt_route_symbol } from '#app/components/injections';
+ import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+
+ export function render(_ctx, _cache) {
+ return (_openBlock(), _createElementBlock("template", null, [
+ _createTextVNode(_toDisplayString((_ctx._.provides[__nuxt_route_symbol] || _ctx.$route).path), 1 /* TEXT */)
+ ]))
+ }"
+ `)
+ })
+
+ it('should correctly inject route in options api', async () => {
+ const sfc = `
+ {{ thing }}
+
+ `
+
+ const res = compileScript(parse(sfc).descriptor, { id: 'test.vue' })
+ const transformResult = await transform(res.content)
+ expect(transformResult).toMatchInlineSnapshot(`
+ "import { PageRouteSymbol as __nuxt_route_symbol } from '#app/components/injections';
+
+ export default {
+ computed: {
+ thing () {
+ return (this._.provides[__nuxt_route_symbol] || this.$route).path
+ }
+ }
+ }
+ "
+ `)
+ })
+})
diff --git a/packages/nuxt/test/treeshake-client.test.ts b/packages/nuxt/test/treeshake-client.test.ts
index 9306bec381..e0b076d950 100644
--- a/packages/nuxt/test/treeshake-client.test.ts
+++ b/packages/nuxt/test/treeshake-client.test.ts
@@ -182,7 +182,7 @@ describe('treeshake client only in ssr', () => {
expect(treeshaken).not.toContain('ssrRenderComponent(_unref(HelloWorld')
expect(treeshaken).toContain('ssrRenderComponent(_unref(Glob')
}
- expect(treeshaken.replace(/data-v-[\d\w]{8}/g, 'data-v-one-hash').replace(/scoped=[\d\w]{8}/g, 'scoped=one-hash')).toMatchSnapshot()
+ expect(treeshaken.replace(/data-v-\w{8}/g, 'data-v-one-hash').replace(/scoped=\w{8}/g, 'scoped=one-hash')).toMatchSnapshot()
})
}
diff --git a/packages/schema/package.json b/packages/schema/package.json
index 302afdfb4e..df4e1fa7af 100644
--- a/packages/schema/package.json
+++ b/packages/schema/package.json
@@ -35,16 +35,16 @@
},
"devDependencies": {
"@nuxt/telemetry": "2.5.4",
- "@nuxt/ui-templates": "1.3.3",
+ "@nuxt/ui-templates": "1.3.4",
"@types/file-loader": "5.0.4",
"@types/pug": "2.0.10",
"@types/sass-loader": "8.0.8",
- "@unhead/schema": "1.9.10",
+ "@unhead/schema": "1.9.11",
"@vitejs/plugin-vue": "5.0.4",
"@vitejs/plugin-vue-jsx": "3.1.0",
"@vue/compiler-core": "3.4.27",
"@vue/compiler-sfc": "3.4.27",
- "@vue/language-core": "2.0.16",
+ "@vue/language-core": "2.0.19",
"c12": "1.10.0",
"esbuild-loader": "4.1.0",
"h3": "1.11.1",
@@ -54,7 +54,7 @@
"unbuild": "latest",
"unctx": "2.3.1",
"unenv": "1.9.0",
- "vite": "5.2.11",
+ "vite": "5.2.12",
"vue": "3.4.27",
"vue-bundle-renderer": "2.1.0",
"vue-loader": "17.4.2",
@@ -71,7 +71,7 @@
"scule": "^1.3.0",
"std-env": "^3.7.0",
"ufo": "^1.5.3",
- "unimport": "^3.7.1",
+ "unimport": "^3.7.2",
"uncrypto": "^0.1.3",
"untyped": "^1.4.2"
},
diff --git a/packages/schema/src/config/app.ts b/packages/schema/src/config/app.ts
index f9ad11e8c7..ad4026c157 100644
--- a/packages/schema/src/config/app.ts
+++ b/packages/schema/src/config/app.ts
@@ -45,7 +45,17 @@ export default defineUntypedSchema({
/**
* The base path of your Nuxt application.
*
- * This can be set at runtime by setting the NUXT_APP_BASE_URL environment variable.
+ * For example:
+ * @example
+ * ```ts
+ * export default defineNuxtConfig({
+ * app: {
+ * baseURL: '/prefix/'
+ * }
+ * })
+ * ```
+ *
+ * This can also be set at runtime by setting the NUXT_APP_BASE_URL environment variable.
* @example
* ```bash
* NUXT_APP_BASE_URL=/prefix/ node .output/server/index.mjs
@@ -63,6 +73,16 @@ export default defineUntypedSchema({
/**
* An absolute URL to serve the public folder from (production-only).
*
+ * For example:
+ * @example
+ * ```ts
+ * export default defineNuxtConfig({
+ * app: {
+ * cdnURL: 'https://mycdn.org/'
+ * }
+ * })
+ * ```
+ *
* This can be set to a different value at runtime by setting the `NUXT_APP_CDN_URL` environment variable.
* @example
* ```bash
@@ -241,6 +261,7 @@ export default defineUntypedSchema({
/**
* Boolean or a path to an HTML file with the contents of which will be inserted into any HTML page
* rendered with `ssr: false`.
+ *
* - If it is unset, it will use `~/app/spa-loading-template.html` file in one of your layers, if it exists.
* - If it is false, no SPA loading indicator will be loaded.
* - If true, Nuxt will look for `~/app/spa-loading-template.html` file in one of your layers, or a
diff --git a/packages/schema/src/config/common.ts b/packages/schema/src/config/common.ts
index 42191feace..944bd5f2c2 100644
--- a/packages/schema/src/config/common.ts
+++ b/packages/schema/src/config/common.ts
@@ -154,11 +154,23 @@ export default defineUntypedSchema({
$resolve: async (val: string | undefined, get): Promise => resolve(await get('rootDir') as string, val || '.nuxt'),
},
+ /**
+ * For multi-app projects, the unique name of the Nuxt application.
+ */
+ appId: {
+ $resolve: (val: string) => val ?? 'nuxt-app',
+ },
+
/**
* A unique identifier matching the build. This may contain the hash of the current state of the project.
*/
buildId: {
- $resolve: (val: string) => val ?? randomUUID(),
+ $resolve: async (val: string | undefined, get): Promise => {
+ if (typeof val === 'string') { return val }
+
+ const [isDev, isTest] = await Promise.all([get('dev') as Promise, get('test') as Promise])
+ return isDev ? 'dev' : isTest ? 'test' : randomUUID()
+ },
},
/**
@@ -236,7 +248,8 @@ export default defineUntypedSchema({
*
* Nuxt tries to resolve each item in the modules array using node require path
* (in `node_modules`) and then will be resolved from project `srcDir` if `~` alias is used.
- * @note Modules are executed sequentially so the order is important.
+ * @note Modules are executed sequentially so the order is important. First, the modules defined in `nuxt.config.ts` are loaded. Then, modules found in the `modules/`
+ * directory are executed, and they load in alphabetical order.
* @example
* ```js
* modules: [
@@ -527,11 +540,12 @@ export default defineUntypedSchema({
*/
runtimeConfig: {
$resolve: async (val: RuntimeConfig, get): Promise> => {
- const app = await get('app') as Record
+ const [app, buildId] = await Promise.all([get('app') as Promise>, get('buildId') as Promise])
provideFallbackValues(val)
return defu(val, {
public: {},
app: {
+ buildId,
baseURL: app.baseURL,
buildAssetsDir: app.buildAssetsDir,
cdnURL: app.cdnURL,
diff --git a/packages/schema/src/config/experimental.ts b/packages/schema/src/config/experimental.ts
index b50629cbab..f429a873e8 100644
--- a/packages/schema/src/config/experimental.ts
+++ b/packages/schema/src/config/experimental.ts
@@ -29,6 +29,7 @@ export default defineUntypedSchema({
* compileTemplate: true,
* templateUtils: true,
* relativeWatchPaths: true,
+ * resetAsyncDataToUndefined: true,
* defaults: {
* useAsyncData: {
* deep: true
@@ -45,6 +46,11 @@ export default defineUntypedSchema({
* @type {3 | 4}
*/
compatibilityVersion: 3,
+ /**
+ * This enables early access to the experimental multi-app support.
+ * @see [Nuxt Issue #21635](https://github.com/nuxt/nuxt/issues/21635)
+ */
+ multiApp: false,
/**
* This enables 'Bundler' module resolution mode for TypeScript, which is the recommended setting
* for frameworks like Nuxt and Vite.
@@ -136,8 +142,18 @@ export default defineUntypedSchema({
/**
* Tree shakes contents of client-only components from server bundle.
* @see [Nuxt PR #5750](https://github.com/nuxt/framework/pull/5750)
+ * @deprecated This option will no longer be configurable in Nuxt v4
*/
- treeshakeClientOnly: true,
+ treeshakeClientOnly: {
+ async $resolve (val, get) {
+ const isV4 = ((await get('future') as Record).compatibilityVersion === 4)
+ if (isV4 && val === false) {
+ console.warn('Enabling `experimental.treeshakeClientOnly` in v4 compatibility mode as it will no longer be configurable in Nuxt v4.')
+ return true
+ }
+ return val ?? true
+ },
+ },
/**
* Emit `app:chunkError` hook when there is an error loading vite/webpack
@@ -246,19 +262,51 @@ export default defineUntypedSchema({
/**
* Config schema support
* @see [Nuxt Issue #15592](https://github.com/nuxt/nuxt/issues/15592)
+ * @deprecated This option will no longer be configurable in Nuxt v4
*/
- configSchema: true,
+ configSchema: {
+ async $resolve (val, get) {
+ const isV4 = ((await get('future') as Record).compatibilityVersion === 4)
+ if (isV4 && val === false) {
+ console.warn('Enabling `experimental.configSchema` in v4 compatibility mode as it will no longer be configurable in Nuxt v4.')
+ return true
+ }
+ return val ?? true
+ },
+ },
/**
* Whether or not to add a compatibility layer for modules, plugins or user code relying on the old
* `@vueuse/head` API.
*
- * This can be disabled for most Nuxt sites to reduce the client-side bundle by ~0.5kb.
+ * This is disabled to reduce the client-side bundle by ~0.5kb.
+ * @deprecated This feature will be removed in Nuxt v4.
*/
- polyfillVueUseHead: false,
+ polyfillVueUseHead: {
+ async $resolve (val, get) {
+ const isV4 = ((await get('future') as Record).compatibilityVersion === 4)
+ if (isV4 && val === true) {
+ console.warn('Disabling `experimental.polyfillVueUseHead` in v4 compatibility mode as it will no longer be configurable in Nuxt v4.')
+ return false
+ }
+ return val ?? false
+ },
+ },
- /** Allow disabling Nuxt SSR responses by setting the `x-nuxt-no-ssr` header. */
- respectNoSSRHeader: false,
+ /**
+ * Allow disabling Nuxt SSR responses by setting the `x-nuxt-no-ssr` header.
+ * @deprecated This feature will be removed in Nuxt v4.
+ */
+ respectNoSSRHeader: {
+ async $resolve (val, get) {
+ const isV4 = ((await get('future') as Record).compatibilityVersion === 4)
+ if (isV4 && val === true) {
+ console.warn('Disabling `experimental.respectNoSSRHeader` in v4 compatibility mode as it will no longer be configurable in Nuxt v4.')
+ return false
+ }
+ return val ?? false
+ },
+ },
/** Resolve `~`, `~~`, `@` and `@@` aliases located within layers with respect to their layer source and root directories. */
localLayerAliases: true,
@@ -295,8 +343,10 @@ export default defineUntypedSchema({
/**
* Use new experimental head optimisations:
+ *
* - Add the capo.js head plugin in order to render tags in of the head in a more performant way.
* - Uses the hash hydration plugin to reduce initial hydration
+ *
* @see [Nuxt Discussion #22632](https://github.com/nuxt/nuxt/discussions/22632]
*/
headNext: true,
@@ -345,7 +395,11 @@ export default defineUntypedSchema({
* })
* ```
*/
- sharedPrerenderData: false,
+ sharedPrerenderData: {
+ async $resolve (val, get) {
+ return val ?? ((await get('future') as Record).compatibilityVersion === 4)
+ },
+ },
/**
* Enables CookieStore support to listen for cookie updates (if supported by the browser) and refresh `useCookie` ref values.
@@ -368,6 +422,18 @@ export default defineUntypedSchema({
* Options that apply to `useAsyncData` (and also therefore `useFetch`)
*/
useAsyncData: {
+ /** @type {'undefined' | 'null'} */
+ value: {
+ async $resolve (val, get) {
+ return val ?? ((await get('future') as Record).compatibilityVersion === 4 ? 'undefined' : 'null')
+ },
+ },
+ /** @type {'undefined' | 'null'} */
+ errorValue: {
+ async $resolve (val, get) {
+ return val ?? ((await get('future') as Record).compatibilityVersion === 4 ? 'undefined' : 'null')
+ },
+ },
deep: {
async $resolve (val, get) {
return val ?? !((await get('future') as Record).compatibilityVersion === 4)
@@ -429,5 +495,15 @@ export default defineUntypedSchema({
return val ?? ((await get('future') as Record).compatibilityVersion !== 4)
},
},
+
+ /**
+ * Whether `clear` and `clearNuxtData` should reset async data to its _default_ value or update
+ * it to `null`/`undefined`.
+ */
+ resetAsyncDataToUndefined: {
+ async $resolve (val, get) {
+ return val ?? ((await get('future') as Record).compatibilityVersion !== 4)
+ },
+ },
},
})
diff --git a/packages/schema/src/config/nitro.ts b/packages/schema/src/config/nitro.ts
index 5c72ba750f..f937bb2f20 100644
--- a/packages/schema/src/config/nitro.ts
+++ b/packages/schema/src/config/nitro.ts
@@ -46,11 +46,13 @@ export default defineUntypedSchema({
* Nitro server handlers.
*
* Each handler accepts the following options:
+ *
* - handler: The path to the file defining the handler.
* - route: The route under which the handler is available. This follows the conventions of https://github.com/unjs/radix3.
* - method: The HTTP method of requests that should be handled.
* - middleware: Specifies whether it is a middleware handler.
* - lazy: Specifies whether to use lazy loading to import the handler.
+ *
* @see https://nuxt.com/docs/guide/directory-structure/server
* @note Files from `server/api`, `server/middleware` and `server/routes` will be automatically registered by Nuxt.
* @example
diff --git a/packages/schema/src/config/typescript.ts b/packages/schema/src/config/typescript.ts
index d8e019e4ee..ccb8b54cbc 100644
--- a/packages/schema/src/config/typescript.ts
+++ b/packages/schema/src/config/typescript.ts
@@ -41,6 +41,7 @@ export default defineUntypedSchema({
'ofetch',
// Key nuxt dependencies
'@unhead/vue',
+ '@nuxt/devtools',
'vue',
'@vue/runtime-core',
'@vue/compiler-sfc',
diff --git a/packages/schema/src/config/webpack.ts b/packages/schema/src/config/webpack.ts
index 5ee21abc14..ad9787aea5 100644
--- a/packages/schema/src/config/webpack.ts
+++ b/packages/schema/src/config/webpack.ts
@@ -157,7 +157,11 @@ export default defineUntypedSchema({
* See https://github.com/esbuild-kit/esbuild-loader
* @type {Omit}
*/
- esbuild: {},
+ esbuild: {
+ jsxFactory: 'h',
+ jsxFragment: 'Fragment',
+ tsconfigRaw: '{}',
+ },
/**
* See: https://github.com/webpack-contrib/file-loader#options
diff --git a/packages/ui-templates/lib/dev.ts b/packages/ui-templates/lib/dev.ts
index a9d6ff55a1..00a307c2fc 100644
--- a/packages/ui-templates/lib/dev.ts
+++ b/packages/ui-templates/lib/dev.ts
@@ -23,7 +23,7 @@ export const DevRenderingPlugin = () => {
const messages = JSON.parse(await fsp.readFile(r(page, 'messages.json'), 'utf-8'))
return template(contents, {
- interpolate: /{{{?([\s\S]+?)}?}}/g,
+ interpolate: /\{\{\{?([\s\S]+?)\}?\}\}/g,
})({
messages: { ...genericMessages, ...messages },
})
diff --git a/packages/ui-templates/lib/render.ts b/packages/ui-templates/lib/render.ts
index 38ea09e2a6..34ba7c189c 100644
--- a/packages/ui-templates/lib/render.ts
+++ b/packages/ui-templates/lib/render.ts
@@ -58,7 +58,7 @@ export const RenderPlugin = () => {
}
// Inline our scripts
- const scriptSources = Array.from(html.matchAll(/]*src="(.*)"[^>]*>[\s\S]*?<\/script>/g))
+ const scriptSources = Array.from(html.matchAll(/]*src="([^"]*)"[^>]*>[\s\S]*?<\/script>/g))
.filter(([_block, src]) => src?.match(/^\/.*\.js$/))
for (const [scriptBlock, src] of scriptSources) {
@@ -79,10 +79,10 @@ export const RenderPlugin = () => {
const messages = JSON.parse(readFileSync(r(`templates/${templateName}/messages.json`), 'utf-8'))
// Serialize into a js function
- const chunks = html.split(/\{{2,3}\s*[^{}]+\s*\}{2,3}/g).map(chunk => JSON.stringify(chunk))
+ const chunks = html.split(/\{{2,3}[^{}]+\}{2,3}/g).map(chunk => JSON.stringify(chunk))
const hasMessages = chunks.length > 1
let templateString = chunks.shift()
- for (const expression of html.matchAll(/\{{2,3}(\s*[^{}]+\s*)\}{2,3}/g)) {
+ for (const expression of html.matchAll(/\{{2,3}([^{}]+)\}{2,3}/g)) {
templateString += ` + (${expression[1].trim()}) + ${chunks.shift()}`
}
if (chunks.length > 0) {
@@ -98,28 +98,28 @@ export const RenderPlugin = () => {
].join('\n')
const templateContent = html
- .match(/([\s\S]*)<\/body>/)?.[0]
- .replace(/(?<=<|<\/)body/g, 'div')
+ .match(/]*>([\s\S]*)<\/body>/)?.[0]
+ .replace(/(?<=<\/|<)body/g, 'div')
.replace(/messages\./g, '')
.replace(/]*>([\s\S]*?)<\/script>/g, '')
.replace(/]*)>([\s\S]*)<\/a>/g, '\n$3\n ')
- .replace(/<([^>]+) ([a-z]+)="([^"]*)({{\s*(\w+?)\s*}})([^"]*)"([^>]*)>/g, '<$1 :$2="`$3${$5}$6`"$7>')
- .replace(/>{{\s*(\w+?)\s*}}<\/[\w-]*>/g, ' v-text="$1" />')
- .replace(/>{{{\s*(\w+?)\s*}}}<\/[\w-]*>/g, ' v-html="$1" />')
+ .replace(/<([^>]+) ([a-z]+)="([^"]*)(\{\{\s*(\w+)\s*\}\})([^"]*)"([^>]*)>/g, '<$1 :$2="`$3${$5}$6`"$7>')
+ .replace(/>\{\{\s*(\w+)\s*\}\}<\/[\w-]*>/g, ' v-text="$1" />')
+ .replace(/>\{\{\{\s*(\w+)\s*\}\}\}<\/[\w-]*>/g, ' v-html="$1" />')
// We are not matching `)),
html.match(new RegExp(`]*>document.querySelectorAll\\('\\[data-prehydrate-id\\*=":${id2}:"]'\\).forEach\\(o=>{console.log\\("other",o.outerHTML\\)}\\)`)),
]
@@ -662,7 +670,7 @@ describe('nuxt composables', () => {
describe('rich payloads', () => {
it('correctly serializes and revivifies complex types', async () => {
- const html = await $fetch('/json-payload')
+ const html = await $fetch('/json-payload')
for (const test of [
'Date: true',
'BigInt: true',
@@ -682,7 +690,7 @@ describe('rich payloads', () => {
describe('nuxt links', () => {
it('handles trailing slashes', async () => {
- const html = await $fetch('/nuxt-link/trailing-slash')
+ const html = await $fetch('/nuxt-link/trailing-slash')
const data: Record = {}
for (const selector of ['nuxt-link', 'router-link', 'link-with-trailing-slash', 'link-without-trailing-slash']) {
data[selector] = []
@@ -800,7 +808,7 @@ describe('nuxt links', () => {
})
it('useLink works', async () => {
- const html = await $fetch('/nuxt-link/use-link')
+ const html = await $fetch('/nuxt-link/use-link')
expect(html).toContain('('/head')
expect(headHtml).toContain('Using a dynamic component - Title Template Fn Change ')
expect(headHtml).not.toContain('')
expect(headHtml).toContain('')
- expect(headHtml.match('meta charset').length).toEqual(1)
+ expect(headHtml.match('meta charset')!.length).toEqual(1)
expect(headHtml).toContain('')
- expect(headHtml.match('meta name="viewport"').length).toEqual(1)
+ expect(headHtml.match('meta name="viewport"')!.length).toEqual(1)
expect(headHtml).not.toContain('')
expect(headHtml).toContain('')
expect(headHtml).toMatch(/]*class="html-attrs-test"/)
expect(headHtml).toMatch(/]*class="body-attrs-test"/)
expect(headHtml).toContain('
useLink in NuxtLink: true
')
expect(html).toContain('route using useLink: /nuxt-link/trailing-slash
')
expect(html).toContain('href using useLink: /nuxt-link/trailing-slash
')
@@ -839,21 +847,21 @@ describe('nuxt links', () => {
describe('head tags', () => {
it('SSR should render tags', async () => {
- const headHtml = await $fetch('/head')
+ const headHtml = await $fetch