fix: support nuxt 4 tsconfig structure (#3728)

BobbieGoede · web-flow · commit 1d76df6fe403 · 2025-07-16T23:30:42.000+02:00
diff --git a/docs/package.json b/docs/package.json
@@ -20,7 +20,7 @@
     "@nuxt/image": "^1.10.0",
     "@nuxt/scripts": "^0.11.8",
     "@nuxt/ui-pro": "^3.1.3",
-    "nuxt": "^3.17.5",
+    "nuxt": "^4.0.0",
     "nuxt-llms": "0.1.3",
     "nuxt-og-image": "^5.1.6",
     "shiki-transformer-color-highlight": "^1.0.0"
diff --git a/knip.jsonc b/knip.jsonc
@@ -30,7 +30,7 @@
       "entry": ["{components,layouts,pages,plugins,server}/**", "{app,error}.vue", "*.ts"]
     },
     "playground": {
-      "entry": ["{components,layouts,pages,plugins,server}/**", "{app,error}.vue", "*.ts"],
+      "entry": ["{app,server}/**", "{app,error}.vue", "*.ts"],
       "ignore": ["i18n/**"],
       "ignoreDependencies": ["@nuxtjs/i18n"]
     }
diff --git a/package.json b/package.json
@@ -89,7 +89,7 @@
     "@intlify/unplugin-vue-i18n": "^6.0.8",
     "@intlify/utils": "^0.13.0",
     "@miyaneee/rollup-plugin-json5": "^1.2.0",
-    "@nuxt/kit": "^3.17.6",
+    "@nuxt/kit": "^4.0.0",
     "@rollup/plugin-yaml": "^4.1.2",
     "@vue/compiler-sfc": "^3.5.17",
     "cookie-es": "^2.0.0",
@@ -116,7 +116,7 @@
     "@babel/types": "^7.27.3",
     "@eslint/js": "9.28.0",
     "@nuxt/module-builder": "^1.0.1",
-    "@nuxt/schema": "^3.17.6",
+    "@nuxt/schema": "^4.0.0",
     "@types/debug": "^4.1.12",
     "@types/estree": "^1.0.7",
     "@types/jsdom": "^21.1.7",
@@ -126,7 +126,7 @@
     "eslint": "^9.28.0",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-regexp": "^2.7.0",
-    "get-port-please": "^3.1.2",
+    "get-port-please": "^3.2.0",
     "gh-changelogen": "^0.2.8",
     "globals": "^16.2.0",
     "jiti": "^2.4.2",
@@ -135,7 +135,7 @@
     "lint-staged": "^15.5.0",
     "nitropack": "^2.11.13",
     "npm-run-all2": "^6.2.6",
-    "nuxt": "^3.17.6",
+    "nuxt": "^4.0.0",
     "ofetch": "^1.4.1",
     "playwright-core": "^1.52.0",
     "prettier": "^3.5.3",
diff --git a/playground/app/app.vue b/playground/app/app.vue
diff --git a/playground/app/layouts/default.vue b/playground/app/layouts/default.vue
diff --git a/playground/app/pages/index.vue b/playground/app/pages/index.vue
diff --git a/playground/tsconfig.json b/playground/tsconfig.json
@@ -1,4 +1,17 @@
 {
-  // https://nuxt.com/docs/guide/concepts/typescript
-  "extends": "./.nuxt/tsconfig.json"
+  "files": [],
+  "references": [
+    {
+      "path": "./.nuxt/tsconfig.app.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.server.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.shared.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.node.json"
+    }
+  ]
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/alias.ts b/src/alias.ts
@@ -10,6 +10,10 @@ import {
   UFO_PKG,
   NUXT_I18N_MODULE_ID
 } from './constants'
+import { defu } from 'defu'
+import { resolveI18nDir } from './layers'
+import { getLayerI18n } from './utils'
+import { relative, resolve } from 'pathe'
 
 import type { Nuxt } from '@nuxt/schema'
 import type { I18nNuxtContext } from './context'
@@ -25,6 +29,29 @@ export function setupAlias({ userOptions: options }: I18nNuxtContext, nuxt: Nuxt
     [UFO_PKG]: UFO_PKG
   } as const
 
+  const layerI18nDirs = nuxt.options._layers
+    .map(l => {
+      const i18n = getLayerI18n(l)
+      if (i18n == null) return undefined
+      return relative(nuxt.options.buildDir, resolve(resolveI18nDir(l, i18n), '**/*'))
+    })
+    .filter((x): x is string => !!x)
+
+  nuxt.options.typescript = defu(nuxt.options.typescript, {
+    hoist: Object.keys(modules),
+    tsConfig: {
+      include: layerI18nDirs
+    }
+  })
+
+  const optimize = Object.keys(modules)
+  optimize.push(UTILS_PKG, 'cookie-es')
+  nuxt.options.vite = defu(nuxt.options.vite, {
+    optimizeDeps: {
+      include: optimize
+    }
+  })
+
   const moduleDirs = ([] as string[])
     .concat(
       nuxt.options.modulesDir,
diff --git a/src/gen.ts b/src/gen.ts
@@ -47,7 +47,7 @@ export function generateLoaderOptions(
           load: genDynamicImport(asI18nVirtual(meta.hash), { comment: `webpackChunkName: ${key}` })
         })
       }
-      localeLoaders[locale.code].push(importMapper.get(meta.path)!)
+      localeLoaders[locale.code]!.push(importMapper.get(meta.path)!)
     }
   }
 
@@ -56,7 +56,7 @@ export function generateLoaderOptions(
    */
   const vueI18nConfigs = []
   for (let i = ctx.vueI18nConfigPaths.length - 1; i >= 0; i--) {
-    const config = ctx.vueI18nConfigPaths[i]
+    const config = ctx.vueI18nConfigPaths[i]!
     const key = genString(`config_${genSafeVariableName(basename(config.path))}_${config.hash}`)
     vueI18nConfigs.push({
       importer: genDynamicImport(asI18nVirtual(config.hash), { comment: `webpackChunkName: ${key}` }),
diff --git a/src/layers.ts b/src/layers.ts
@@ -10,7 +10,7 @@ import type { FileMeta, LocaleObject, LocaleType, NuxtI18nOptions } from './type
 import type { I18nNuxtContext } from './context'
 
 export function checkLayerOptions(_options: NuxtI18nOptions, nuxt: Nuxt) {
-  const project = nuxt.options._layers[0]
+  const project = nuxt.options._layers[0]!
   const layers = nuxt.options._layers
 
   for (const layer of layers) {
diff --git a/src/nitro.ts b/src/nitro.ts
@@ -27,7 +27,7 @@ export async function setupNitro(ctx: I18nNuxtContext, nuxt: Nuxt) {
   addServerTemplate({
     filename: '#internal/i18n-options.mjs',
     getContents: () =>
-      nuxt.vfs['#build/i18n-options.mjs']?.replace(/\/\*\* client \*\*\/[\s\S]*\/\*\* client-end \*\*\//, '')
+      nuxt.vfs['#build/i18n-options.mjs']!.replace(/\/\*\* client \*\*\/[\s\S]*\/\*\* client-end \*\*\//, '')
   })
 
   addServerTemplate({
@@ -97,7 +97,7 @@ export { localeDetector }`
     h3UtilsExports.map(key => ({
       name: key,
       as: key,
-      from: ctx.resolver.resolve(nuxt.options.alias[UTILS_H3_PKG])
+      from: ctx.resolver.resolve(nuxt.options.alias[UTILS_H3_PKG]!)
     }))
   )
 
diff --git a/src/pages.ts b/src/pages.ts
@@ -75,7 +75,7 @@ export const i18nPathToPath = ${JSON.stringify(routeResources.i18nPathToPath, nu
 
       // analyze layer pages
       for (const layer of nuxt.options._layers) {
-        const pagesDir = resolve(projectLayer.config.rootDir, layer.config.srcDir, layer.config.dir?.pages ?? 'pages')
+        const pagesDir = resolve(projectLayer!.config.rootDir, layer.config.srcDir, layer.config.dir?.pages ?? 'pages')
         analyzeNuxtPages(ctx, pagesDir, pages)
       }
 
@@ -276,7 +276,7 @@ export function getRouteOptionsResolver(
     const res = getRouteOptions(route, localeCodes, ctx, defaultLocale, customRoutes)
     if (route.file) {
       const localeCfg = res?.srcPaths
-      const mappedPath = ctx.fileToPath[route.file]
+      const mappedPath = ctx.fileToPath[route.file]!
       ctx.pathToConfig[mappedPath] ??= {} as Record<string, string | boolean>
 
       // set paths for all locales, assume no custom path is a disabled locale
@@ -402,8 +402,8 @@ function readComponent(target: string) {
           if (node.callee.type === 'Identifier' && node.callee.name === DEFINE_I18N_ROUTE_FN) {
             const arg = node.arguments[0]
             if (
-              arg.type === 'BooleanLiteral' ||
-              (arg.type === 'ObjectExpression' && verifyObjectValue(arg.properties))
+              arg?.type === 'BooleanLiteral' ||
+              (arg?.type === 'ObjectExpression' && verifyObjectValue(arg.properties))
             ) {
               extract = desc.loc.source.slice(arg.start!, arg.end!)
             }
diff --git a/src/prepare/build-manifest.ts b/src/prepare/build-manifest.ts
@@ -11,8 +11,8 @@ export function prepareBuildManifest({ localeInfo }: I18nNuxtContext, nuxt: Nuxt
 
     for (const key in manifest) {
       if (langPaths.some(x => key.startsWith(x))) {
-        manifest[key].prefetch = false
-        manifest[key].preload = false
+        manifest[key]!.prefetch = false
+        manifest[key]!.preload = false
       }
     }
   })
diff --git a/src/runtime/context.ts b/src/runtime/context.ts
@@ -146,7 +146,7 @@ export function createNuxtI18nContext(nuxt: NuxtApp, vueI18n: I18n, defaultLocal
         await ctx.vueI18n.__resolvePendingLocalePromise?.()
       }
     },
-    getLocales: () => unref(i18n.locales).map(x => (isString(x) ? { code: x } : x)),
+    getLocales: () => unref(i18n.locales).map(x => (isString(x) ? { code: x } : (x as LocaleObject<string>))),
     setCookieLocale: (locale: string) => {
       if (detectConfig.useCookie && isSupportedLocale(locale)) {
         localeCookie.value = locale
diff --git a/src/runtime/kit/browser.ts b/src/runtime/kit/browser.ts
@@ -22,8 +22,8 @@ function matchBrowserLocale(locales: Locale[], browserLocales: readonly string[]
 
   // second pass: match only locale code part of the browser locale (not including country).
   for (const [index, browserCode] of browserLocales.entries()) {
-    const languageCode = browserCode.split('-')[0].toLowerCase()
-    const matchedLocale = locales.find(l => l.language?.split('-')[0].toLowerCase() === languageCode)
+    const languageCode = browserCode.split('-')[0]!.toLowerCase()
+    const matchedLocale = locales.find(l => l.language?.split('-')[0]!.toLowerCase() === languageCode)
     if (matchedLocale) {
       // deduct a thousandth for being non-exact match.
       matchedLocales.push({ code: matchedLocale.code, score: 0.999 - index / browserLocales.length })
diff --git a/src/runtime/kit/head.ts b/src/runtime/kit/head.ts
@@ -93,7 +93,7 @@ export function localeHead(
       getAlternateOgLocales(
         options,
         strictSeo
-          ? alternateLinks.map(x => x.hreflang).filter(x => x !== 'x-default')
+          ? alternateLinks.map(x => x.hreflang).filter(x => x !== 'x-default') as string[]
           : options.locales.map(x => x.language || x.code)
       )
     )
@@ -134,11 +134,11 @@ function getHreflangLinks(options: HeadContext) {
     if (!link) continue
 
     links.push(link)
-    if (options.defaultLocale && options.defaultLocale === locale.code && links[0].hreflang !== 'x-default') {
+    if (options.defaultLocale && options.defaultLocale === locale.code && links[0]!.hreflang !== 'x-default') {
       links.unshift(
         strictSeo
-          ? { rel: 'alternate', href: link.href, hreflang: 'x-default' }
-          : { [options.key]: 'i18n-xd', rel: 'alternate', href: link.href, hreflang: 'x-default' }
+          ? { rel: 'alternate', href: link.href!, hreflang: 'x-default' }
+          : { [options.key]: 'i18n-xd', rel: 'alternate', href: link.href!, hreflang: 'x-default' }
       )
     }
   }
diff --git a/src/runtime/plugins/preload.ts b/src/runtime/plugins/preload.ts
@@ -37,7 +37,7 @@ export default defineNuxtPlugin({
         const msg = unref(ctx.vueI18n.global.messages) as LocaleMessages<DefineLocaleMessage>
         serverI18n.messages ??= {}
         for (const k in msg) {
-          serverI18n.messages[k] = msg[k]
+          serverI18n.messages[k] = msg[k]!
         }
       }
     }
diff --git a/src/runtime/server/plugin.ts b/src/runtime/server/plugin.ts
@@ -183,8 +183,8 @@ export default defineNitroPlugin(async nitro => {
             continue
           }
 
-          const usedKeys = Array.from(ctx.trackMap[locale])
-          ctx.messages[locale] = pickNested(usedKeys, ctx.messages[locale]) as unknown as Record<string, string>
+          const usedKeys = Array.from(ctx.trackMap[locale]!)
+          ctx.messages[locale] = pickNested(usedKeys, ctx.messages[locale]!) as unknown as Record<string, string>
         }
       }
 
diff --git a/src/runtime/server/utils/cache.ts b/src/runtime/server/utils/cache.ts
@@ -41,6 +41,7 @@ export function cachedFunctionI18n<T, ArgsT extends unknown[] = any[]>(
     }
   }
 
+  // @ts-expect-error needs to be properly typed
   return async (...args) => {
     const key = [opts.name, opts.getKey(...args)].join(':').replace(/:\/$/, ':index')
     const maxAge = opts.maxAge ?? 1
diff --git a/src/runtime/server/utils/messages-utils.ts b/src/runtime/server/utils/messages-utils.ts
@@ -57,14 +57,14 @@ export function setNestedValue<T extends object, K extends string, V = any>(obj:
 
   // Iterate over all parts except the last one
   for (let i = 0; i < parts.length - 1; i++) {
-    const part = parts[i]
+    const part = parts[i]!
     if (!current[part]) {
       current[part] = {} // Create nested object if it doesn't exist
     }
     current = current[part]
   }
 
   // Set the value for the last part
-  const lastPart = parts[parts.length - 1]
+  const lastPart = parts[parts.length - 1]!
   current[lastPart] = value
 }
diff --git a/src/runtime/shared/locales.ts b/src/runtime/shared/locales.ts
@@ -30,7 +30,7 @@ function getFallbackLocaleCodes(fallback: FallbackLocale, locales: string[]): st
   const targets = [...locales, 'default']
   for (const locale of targets) {
     if (locale in fallback == false) continue
-    fallbackLocales = [...fallbackLocales, ...fallback[locale].filter(Boolean)]
+    fallbackLocales = [...fallbackLocales, ...fallback[locale]!.filter(Boolean)]
   }
 
   return fallbackLocales
diff --git a/src/runtime/shared/matching.ts b/src/runtime/shared/matching.ts
@@ -9,8 +9,8 @@ for (const path of Object.keys(i18nPathToPath)) {
 
 const getI18nPathToI18nPath = (path: string, locale: string) => {
   if (!path || !locale) return
-  const plainPath = i18nPathToPath[path]
-  const i18nConfig = pathToI18nConfig[plainPath]
+  const plainPath = i18nPathToPath[path]!
+  const i18nConfig = pathToI18nConfig[plainPath]!
   if (i18nConfig && i18nConfig[locale]) {
     return i18nConfig[locale] === true ? plainPath : i18nConfig[locale]
   }
@@ -40,7 +40,7 @@ export function matchLocalized(path: string, locale: string, defaultLocale: stri
   )
 
   if (resolvedMatch && resolvedMatch.matched.length > 0) {
-    const alternate = getI18nPathToI18nPath(resolvedMatch?.matched[0]?.path, locale)
+    const alternate = getI18nPathToI18nPath(resolvedMatch.matched[0]!.path, locale)
     const match = matcher.resolve(
       { params: resolvedMatch.params },
       { path: alternate || '', name: '', matched: [], params: {}, meta: {} }
diff --git a/src/template.ts b/src/template.ts
@@ -15,8 +15,8 @@ function genLocaleLoaderHMR(localeLoaders: TemplateNuxtI18nOptions['localeLoader
   const statements: string[] = []
 
   for (const locale in localeLoaders) {
-    for (let i = 0; i < localeLoaders[locale].length; i++) {
-      const loader = localeLoaders[locale][i]
+    for (let i = 0; i < localeLoaders[locale]!.length; i++) {
+      const loader = localeLoaders[locale]![i]!
       statements.push(
         [
           `  import.meta.hot.accept("${loader.relative}", async mod => {`,
@@ -39,7 +39,7 @@ function genVueI18nConfigHMR(configs: TemplateNuxtI18nOptions['vueI18nConfigs'])
   for (let i = 0; i < configs.length; i++) {
     statements.push(
       [
-        `  import.meta.hot.accept("${configs[i].relative}", async mod => {`,
+        `  import.meta.hot.accept("${configs[i]!.relative}", async mod => {`,
         //   load configs before replacing loader
         `    const [oldData, newData] = await Promise.all([loadCfg(vueI18nConfigs[${i}]), loadCfg(() => Promise.resolve(mod))]);`,
         //   replace config loader
@@ -76,7 +76,7 @@ export function generateTemplateNuxtI18nOptions(
 
   const localeLoaderEntries: Record<string, { key: string; load: string; cache: boolean }[]> = {}
   for (const locale in opts.localeLoaders) {
-    localeLoaderEntries[locale] = opts.localeLoaders[locale].map(({ key, load, cache }) => ({ key, load, cache }))
+    localeLoaderEntries[locale] = opts.localeLoaders[locale]!.map(({ key, load, cache }) => ({ key, load, cache }))
   }
 
   return `// @ts-nocheck
diff --git a/src/transform/i18n-function-injection.ts b/src/transform/i18n-function-injection.ts
@@ -115,7 +115,7 @@ export const TransformI18nFunctionPlugin = (options: BundlerPluginOptions) =>
             // only add variables when used without having been declared
             const assignments: string[] = []
             for (const missing of missingFunctionDeclarators) {
-              assignments.push(TRANSLATION_FUNCTIONS_MAP[missing])
+              assignments.push(TRANSLATION_FUNCTIONS_MAP[missing]!)
             }
 
             // add variable declaration at the start of <script>, `autoImports` does the rest
@@ -184,7 +184,7 @@ class ScopeTracker {
   leaveScope() {
     this.scopeIndexStack.pop()
     this.curScopeKey = this.getKey()
-    this.scopeIndexStack[this.scopeIndexStack.length - 1]++
+    this.scopeIndexStack[this.scopeIndexStack.length - 1]!++
   }
 }
 
diff --git a/src/transform/resource.ts b/src/transform/resource.ts
@@ -85,7 +85,7 @@ export const ResourcePlugin = (options: BundlerPluginOptions, ctx: I18nNuxtConte
           const s = new MagicString(code)
           const matches = code.matchAll(DEFINE_I18N_FN_RE)
           for (const match of matches) {
-            s.overwrite(match.index, match.index + match[0].length, match[2])
+            s.overwrite(match.index, match.index + match[0].length, match[2]!)
           }
 
           if (s.hasChanged()) {
diff --git a/src/utils.ts b/src/utils.ts

Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@`
`30`	`30`	`"entry": ["{components,layouts,pages,plugins,server}/*", "{app,error}.vue", ".ts"]`
`31`	`31`	`},`
`32`	`32`	`"playground": {`
`33`		`- "entry": ["{components,layouts,pages,plugins,server}/*", "{app,error}.vue", ".ts"],`
	`33`	`+ "entry": ["{app,server}/*", "{app,error}.vue", ".ts"],`
`34`	`34`	`"ignore": ["i18n/**"],`
`35`	`35`	`"ignoreDependencies": ["@nuxtjs/i18n"]`
`36`	`36`	`}`
Original file line number	Diff line number	Diff line change
`@@ -47,7 +47,7 @@ export function generateLoaderOptions(`
`47`	`47`	load: genDynamicImport(asI18nVirtual(meta.hash), { comment: `webpackChunkName: ${key}` })
`48`	`48`	`})`
`49`	`49`	`}`
`50`		`- localeLoaders[locale.code].push(importMapper.get(meta.path)!)`
	`50`	`+ localeLoaders[locale.code]!.push(importMapper.get(meta.path)!)`
`51`	`51`	`}`
`52`	`52`	`}`
`53`	`53`
`@@ -56,7 +56,7 @@ export function generateLoaderOptions(`
`56`	`56`	`*/`
`57`	`57`	`const vueI18nConfigs = []`
`58`	`58`	`for (let i = ctx.vueI18nConfigPaths.length - 1; i >= 0; i--) {`
`59`		`- const config = ctx.vueI18nConfigPaths[i]`
	`59`	`+ const config = ctx.vueI18nConfigPaths[i]!`
`60`	`60`	const key = genString(`config_${genSafeVariableName(basename(config.path))}_${config.hash}`)
`61`	`61`	`vueI18nConfigs.push({`
`62`	`62`	importer: genDynamicImport(asI18nVirtual(config.hash), { comment: `webpackChunkName: ${key}` }),