UNPKG

@nuxt/schema

Version:

Nuxt types and default configuration

1,573 lines (1,509 loc) 96.9 kB
import { AppConfig as AppConfig$1, TransitionProps, KeepAliveProps } from 'vue'; import { ViteDevServer, UserConfig, ServerOptions } from 'vite'; import { Options as Options$7 } from '@vitejs/plugin-vue'; import { Options as Options$8 } from '@vitejs/plugin-vue-jsx'; import * as untyped from 'untyped'; import { SchemaDefinition, Schema } from 'untyped'; export { SchemaDefinition } from 'untyped'; import { NitroConfig, Nitro, NitroEventHandler, NitroDevEventHandler, NitroRuntimeConfigApp, NitroRuntimeConfig } from 'nitropack'; import { SnakeCase } from 'scule'; import { SourceOptions, ResolvedConfig } from 'c12'; import { Hookable } from 'hookable'; import { Ignore, Options } from 'ignore'; import { Server } from 'node:http'; import { Server as Server$1 } from 'node:https'; import { TSConfig } from 'pkg-types'; import { Manifest } from 'vue-bundle-renderer'; import { EventHandler } from 'h3'; import { InlinePreset, Import, Unimport, UnimportOptions } from 'unimport'; import { Configuration, Compiler, Stats, WebpackError } from 'webpack'; import { RouteRecordRaw, RouteLocationRaw, RouterOptions as RouterOptions$1, RouterHistory } from 'vue-router'; import { VueCompilerOptions } from '@vue/language-core'; import { AssetURLTagConfig } from '@vue/compiler-sfc'; import { CompilerOptions } from '@vue/compiler-core'; import { HtmlAttributes, RenderSSRHeadOptions, MergeHead, Head } from '@unhead/schema'; import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'; import { PluginVisualizerOptions } from 'rollup-plugin-visualizer'; import { TransformerOptions } from 'unctx/transform'; import { CompatibilityDateSpec } from 'compatx'; import { Defu } from 'defu'; import { NuxtLinkOptions } from 'nuxt/app'; import { FetchOptions } from 'ofetch'; import { Options as Options$1 } from 'autoprefixer'; import { Options as Options$2 } from 'cssnano'; import { PluginOptions } from 'mini-css-extract-plugin'; import { LoaderOptions } from 'esbuild-loader'; import { Options as Options$3 } from 'file-loader'; import { Options as Options$4 } from 'pug'; import { VueLoaderOptions } from 'vue-loader'; import { Options as Options$5 } from 'sass-loader'; import { BasePluginOptions, DefinedDefaultMinimizerAndOptions } from 'css-minimizer-webpack-plugin'; import { ProcessOptions } from 'postcss'; import { Options as Options$6 } from 'webpack-dev-middleware'; import { IncomingMessage, ServerResponse } from 'http'; import { MiddlewareOptions, ClientOptions } from 'webpack-hot-middleware'; interface NuxtCompatibility { /** * Required nuxt version in semver format. * @example `^2.14.0` or `>=3.0.0-27219851.6e49637`. */ nuxt?: string; /** * Bridge constraint for Nuxt 2 support. * * - `true`: When using Nuxt 2, using bridge module is required. * - `false`: When using Nuxt 2, using bridge module is not supported. */ bridge?: boolean; /** * Mark a builder as incompatible, or require a particular version. * * @example * ```ts * export default defineNuxtModule({ * meta: { * name: 'my-module', * compatibility: { * builder: { * // marking as incompatible * webpack: false, * // you can require a (semver-compatible) version * vite: '^5' * } * } * } * // ... * }) * ``` */ builder?: Partial<Record<'vite' | 'webpack' | 'rspack' | (string & {}), false | string>>; } interface NuxtCompatibilityIssue { name: string; message: string; } interface NuxtCompatibilityIssues extends Array<NuxtCompatibilityIssue> { /** * Return formatted error message. */ toString(): string; } interface ComponentMeta { [key: string]: unknown; } interface Component { pascalName: string; kebabName: string; export: string; filePath: string; shortPath: string; chunkName: string; prefetch: boolean; preload: boolean; global?: boolean | 'sync'; island?: boolean; meta?: ComponentMeta; mode?: 'client' | 'server' | 'all'; /** * This number allows configuring the behavior of overriding Nuxt components. * If multiple components are provided with the same name, then higher priority * components will be used instead of lower priority components. */ priority?: number; /** * Allow bypassing client/server transforms for internal Nuxt components like * ServerPlaceholder and NuxtClientFallback. * * @internal */ _raw?: boolean; } interface ScanDir { /** * Path (absolute or relative) to the directory containing your components. * You can use Nuxt aliases (~ or @) to refer to directories inside project or directly use an npm package path similar to require. */ path: string; /** * Accept Pattern that will be run against specified path. */ pattern?: string | string[]; /** * Ignore patterns that will be run against specified path. */ ignore?: string[]; /** * Prefix all matched components. */ prefix?: string; /** * Prefix component name by its path. */ pathPrefix?: boolean; /** * Ignore scanning this directory if set to `false` */ enabled?: boolean; /** * These properties (prefetch/preload) are used in production to configure how components with Lazy prefix are handled by webpack via its magic comments. * Learn more on webpack documentation: https://webpack.js.org/api/module-methods/#magic-comments */ prefetch?: boolean; /** * These properties (prefetch/preload) are used in production to configure how components with Lazy prefix are handled by webpack via its magic comments. * Learn more on webpack documentation: https://webpack.js.org/api/module-methods/#magic-comments */ preload?: boolean; /** * This flag indicates, component should be loaded async (with a separate chunk) regardless of using Lazy prefix or not. */ isAsync?: boolean; extendComponent?: (component: Component) => Promise<Component | void> | (Component | void); /** * If enabled, registers components to be globally available. * */ global?: boolean; /** * If enabled, registers components as islands */ island?: boolean; } interface ComponentsDir extends ScanDir { /** * Watch specified path for changes, including file additions and file deletions. */ watch?: boolean; /** * Extensions supported by Nuxt builder. */ extensions?: string[]; /** * Transpile specified path using build.transpile. * By default ('auto') it will set transpile: true if node_modules/ is in path. */ transpile?: 'auto' | boolean; /** * This number allows configuring the behavior of overriding Nuxt components. * It will be inherited by any components within the directory. * * If multiple components are provided with the same name, then higher priority * components will be used instead of lower priority components. */ priority?: number; } interface ComponentsOptions { dirs: (string | ComponentsDir)[]; /** * The default value for whether to globally register components. * * When components are registered globally, they will still be directly imported where used, * but they can also be used dynamically, for example `<component :is="`icon-${myIcon}`">`. * * This can be overridden by an individual component directory entry. * @default false */ global?: boolean; /** * Whether to write metadata to the build directory with information about the components that * are auto-registered in your app. */ generateMetadata?: boolean; loader?: boolean; transform?: { exclude?: RegExp[]; include?: RegExp[]; }; } type HookResult = Promise<void> | void; type TSReference = { types: string; } | { path: string; }; type WatchEvent = 'add' | 'addDir' | 'change' | 'unlink' | 'unlinkDir'; type VueTSConfig = 0 extends 1 & VueCompilerOptions ? TSConfig : TSConfig & { vueCompilerOptions?: Omit<VueCompilerOptions, 'plugins'> & { plugins?: string[]; }; }; type NuxtPage = { name?: string; path: string; props?: RouteRecordRaw['props']; file?: string; meta?: Record<string, any>; alias?: string[] | string; redirect?: RouteLocationRaw; children?: NuxtPage[]; /** * Set the render mode. * * `all` means the page will be rendered isomorphically - with JavaScript both on client and server. * * `server` means pages are automatically rendered with server components, so there will be no JavaScript to render the page in your client bundle. * * `client` means that page will render on the client-side only. * @default 'all' */ mode?: 'client' | 'server' | 'all'; /** @internal */ _sync?: boolean; }; type NuxtMiddleware = { name: string; path: string; global?: boolean; }; type NuxtLayout = { name: string; file: string; }; interface ImportPresetWithDeprecation extends InlinePreset { } interface GenerateAppOptions { filter?: (template: ResolvedNuxtTemplate<any>) => boolean; } interface NuxtAnalyzeMeta { name: string; slug: string; startTime: number; endTime: number; analyzeDir: string; buildDir: string; outDir: string; } /** * The listeners to Nuxt build time events */ interface NuxtHooks { /** * Allows extending compatibility checks. * @param compatibility Compatibility object * @param issues Issues to be mapped * @returns Promise */ 'kit:compatibility': (compatibility: NuxtCompatibility, issues: NuxtCompatibilityIssues) => HookResult; /** * Called after Nuxt initialization, when the Nuxt instance is ready to work. * @param nuxt The configured Nuxt object * @returns Promise */ 'ready': (nuxt: Nuxt) => HookResult; /** * Called when Nuxt instance is gracefully closing. * @param nuxt The configured Nuxt object * @returns Promise */ 'close': (nuxt: Nuxt) => HookResult; /** * Called to restart the current Nuxt instance. * @returns Promise */ 'restart': (options?: { /** * Try to restart the whole process if supported */ hard?: boolean; }) => HookResult; /** * Called during Nuxt initialization, before installing user modules. * @returns Promise */ 'modules:before': () => HookResult; /** * Called during Nuxt initialization, after installing user modules. * @returns Promise */ 'modules:done': () => HookResult; /** * Called after resolving the `app` instance. * @param app The resolved `NuxtApp` object * @returns Promise */ 'app:resolve': (app: NuxtApp) => HookResult; /** * Called during `NuxtApp` generation, to allow customizing, modifying or adding new files to the build directory (either virtually or to written to `.nuxt`). * @param app The configured `NuxtApp` object * @returns Promise */ 'app:templates': (app: NuxtApp) => HookResult; /** * Called after templates are compiled into the [virtual file system](https://nuxt.com/docs/guide/directory-structure/nuxt#virtual-file-system) (vfs). * @param app The configured `NuxtApp` object * @returns Promise */ 'app:templatesGenerated': (app: NuxtApp, templates: ResolvedNuxtTemplate[], options?: GenerateAppOptions) => HookResult; /** * Called before Nuxt bundle builder. * @returns Promise */ 'build:before': () => HookResult; /** * Called after Nuxt bundle builder is complete. * @returns Promise */ 'build:done': () => HookResult; /** * Called during the manifest build by Vite and Webpack. This allows customizing the manifest that Nitro will use to render `<script>` and `<link>` tags in the final HTML. * @param manifest The manifest object to build * @returns Promise */ 'build:manifest': (manifest: Manifest) => HookResult; /** * Called when `nuxt analyze` is finished * @param meta the analyze meta object, mutations will be saved to `meta.json` * @returns Promise */ 'build:analyze:done': (meta: NuxtAnalyzeMeta) => HookResult; /** * Called before generating the app. * @param options GenerateAppOptions object * @returns Promise */ 'builder:generateApp': (options?: GenerateAppOptions) => HookResult; /** * Called at build time in development when the watcher spots a change to a file or directory in the project. * @param event "add" | "addDir" | "change" | "unlink" | "unlinkDir" * @param path the path to the watched file * @returns Promise */ 'builder:watch': (event: WatchEvent, path: string) => HookResult; /** * Called after page routes are scanned from the file system. * @param pages Array containing scanned pages * @returns Promise */ 'pages:extend': (pages: NuxtPage[]) => HookResult; /** * Called after page routes have been augmented with scanned metadata. * @param pages Array containing resolved pages * @returns Promise */ 'pages:resolved': (pages: NuxtPage[]) => HookResult; /** * Called when resolving `app/router.options` files. It allows modifying the detected router options files * and adding new ones. * * Later items in the array override earlier ones. * * Adding a router options file will switch on page-based routing, unless `optional` is set, in which case * it will only apply when page-based routing is already enabled. * @param context An object with `files` containing an array of router options files. * @returns Promise */ 'pages:routerOptions': (context: { files: Array<{ path: string; optional?: boolean; }>; }) => HookResult; /** * Called when the dev middleware is being registered on the Nitro dev server. * @param handler the Vite or Webpack event handler * @returns Promise */ 'server:devHandler': (handler: EventHandler) => HookResult; /** * Called at setup allowing modules to extend sources. * @param presets Array containing presets objects * @returns Promise */ 'imports:sources': (presets: ImportPresetWithDeprecation[]) => HookResult; /** * Called at setup allowing modules to extend imports. * @param imports Array containing the imports to extend * @returns Promise */ 'imports:extend': (imports: Import[]) => HookResult; /** * Called when the [unimport](https://github.com/unjs/unimport) context is created. * @param context The Unimport context * @returns Promise */ 'imports:context': (context: Unimport) => HookResult; /** * Allows extending import directories. * @param dirs Array containing directories as string * @returns Promise */ 'imports:dirs': (dirs: string[]) => HookResult; /** * Called within `app:resolve` allowing to extend the directories that are scanned for auto-importable components. * @param dirs The `dirs` option to push new items * @returns Promise */ 'components:dirs': (dirs: ComponentsOptions['dirs']) => HookResult; /** * Allows extending new components. * @param components The `components` array to push new items * @returns Promise */ 'components:extend': (components: Component[]) => HookResult; /** * Called before initializing Nitro, allowing customization of Nitro's configuration. * @param nitroConfig The nitro config to be extended * @returns Promise */ 'nitro:config': (nitroConfig: NitroConfig) => HookResult; /** * Called after Nitro is initialized, which allows registering Nitro hooks and interacting directly with Nitro. * @param nitro The created nitro object * @returns Promise */ 'nitro:init': (nitro: Nitro) => HookResult; /** * Called before building the Nitro instance. * @param nitro The created nitro object * @returns Promise */ 'nitro:build:before': (nitro: Nitro) => HookResult; /** * Called after copying public assets. Allows modifying public assets before Nitro server is built. * @param nitro The created nitro object * @returns Promise */ 'nitro:build:public-assets': (nitro: Nitro) => HookResult; /** * Allows extending the routes to be pre-rendered. * @param ctx Nuxt context * @returns Promise */ 'prerender:routes': (ctx: { routes: Set<string>; }) => HookResult; /** * Called when an error occurs at build time. * @param error Error object * @returns Promise */ 'build:error': (error: Error) => HookResult; /** * Called before Nuxi writes `.nuxt/tsconfig.json` and `.nuxt/nuxt.d.ts`, allowing addition of custom references and declarations in `nuxt.d.ts`, or directly modifying the options in `tsconfig.json` * @param options Objects containing `references`, `declarations`, `tsConfig` * @returns Promise */ 'prepare:types': (options: { references: TSReference[]; declarations: string[]; tsConfig: VueTSConfig; }) => HookResult; /** * Called when the dev server is loading. * @param listenerServer The HTTP/HTTPS server object * @param listener The server's listener object * @returns Promise */ 'listen': (listenerServer: Server | Server$1, listener: any) => HookResult; /** * Allows extending default schemas. * @param schemas Schemas to be extend * @returns void */ 'schema:extend': (schemas: SchemaDefinition[]) => void; /** * Allows extending resolved schema. * @param schema Schema object * @returns void */ 'schema:resolved': (schema: Schema) => void; /** * Called before writing the given schema. * @param schema Schema object * @returns void */ 'schema:beforeWrite': (schema: Schema) => void; /** * Called after the schema is written. * @returns void */ 'schema:written': () => void; /** * Allows to extend Vite default context. * @param viteBuildContext The vite build context object * @returns Promise */ 'vite:extend': (viteBuildContext: { nuxt: Nuxt; config: ViteConfig; }) => HookResult; /** * Allows to extend Vite default config. * @param viteInlineConfig The vite inline config object * @param env Server or client * @returns Promise */ 'vite:extendConfig': (viteInlineConfig: ViteConfig, env: { isClient: boolean; isServer: boolean; }) => HookResult; /** * Allows to read the resolved Vite config. * @param viteInlineConfig The vite inline config object * @param env Server or client * @returns Promise */ 'vite:configResolved': (viteInlineConfig: Readonly<ViteConfig>, env: { isClient: boolean; isServer: boolean; }) => HookResult; /** * Called when the Vite server is created. * @param viteServer Vite development server * @param env Server or client * @returns Promise */ 'vite:serverCreated': (viteServer: ViteDevServer, env: { isClient: boolean; isServer: boolean; }) => HookResult; /** * Called after Vite server is compiled. * @returns Promise */ 'vite:compiled': () => HookResult; /** * Called before configuring the webpack compiler. * @param webpackConfigs Configs objects to be pushed to the compiler * @returns Promise */ 'webpack:config': (webpackConfigs: Configuration[]) => HookResult; /** * Allows to read the resolved webpack config * @param webpackConfigs Configs objects to be pushed to the compiler * @returns Promise */ 'webpack:configResolved': (webpackConfigs: Readonly<Configuration>[]) => HookResult; /** * Called right before compilation. * @param options The options to be added * @returns Promise */ 'webpack:compile': (options: { name: string; compiler: Compiler; }) => HookResult; /** * Called after resources are loaded. * @param options The compiler options * @returns Promise */ 'webpack:compiled': (options: { name: string; compiler: Compiler; stats: Stats; }) => HookResult; /** * Called on `change` on WebpackBar. * @param shortPath the short path * @returns void */ 'webpack:change': (shortPath: string) => void; /** * Called on `done` if has errors on WebpackBar. * @returns void */ 'webpack:error': () => void; /** * Called on `allDone` on WebpackBar. * @returns void */ 'webpack:done': () => void; /** * Called on `progress` on WebpackBar. * @param statesArray The array containing the states on progress * @returns void */ 'webpack:progress': (statesArray: any[]) => void; /** * Called before configuring the webpack compiler. * @param webpackConfigs Configs objects to be pushed to the compiler * @returns Promise */ 'rspack:config': (webpackConfigs: Configuration[]) => HookResult; /** * Allows to read the resolved webpack config * @param webpackConfigs Configs objects to be pushed to the compiler * @returns Promise */ 'rspack:configResolved': (webpackConfigs: Readonly<Configuration>[]) => HookResult; /** * Called right before compilation. * @param options The options to be added * @returns Promise */ 'rspack:compile': (options: { name: string; compiler: Compiler; }) => HookResult; /** * Called after resources are loaded. * @param options The compiler options * @returns Promise */ 'rspack:compiled': (options: { name: string; compiler: Compiler; stats: Stats; }) => HookResult; /** * Called on `change` on WebpackBar. * @param shortPath the short path * @returns void */ 'rspack:change': (shortPath: string) => void; /** * Called on `done` if has errors on WebpackBar. * @returns void */ 'rspack:error': () => void; /** * Called on `allDone` on WebpackBar. * @returns void */ 'rspack:done': () => void; /** * Called on `progress` on WebpackBar. * @param statesArray The array containing the states on progress * @returns void */ 'rspack:progress': (statesArray: any[]) => void; } type NuxtHookName = keyof NuxtHooks; interface NuxtPlugin { /** @deprecated use mode */ ssr?: boolean; src: string; mode?: 'all' | 'server' | 'client'; /** * This allows more granular control over plugin order and should only be used by advanced users. * Lower numbers run first, and user plugins default to `0`. * * Default Nuxt priorities can be seen at [here](https://github.com/nuxt/nuxt/blob/9904849bc87c53dfbd3ea3528140a5684c63c8d8/packages/nuxt/src/core/plugins/plugin-metadata.ts#L15-L34). */ order?: number; /** * @internal */ name?: string; } type TemplateDefaultOptions = Record<string, any>; interface NuxtTemplate<Options = TemplateDefaultOptions> { /** resolved output file path (generated) */ dst?: string; /** The target filename once the template is copied into the Nuxt buildDir */ filename?: string; /** An options object that will be accessible within the template via `<% options %>` */ options?: Options; /** The resolved path to the source file to be template */ src?: string; /** Provided compile option instead of src */ getContents?: (data: { nuxt: Nuxt; app: NuxtApp; options: Options; }) => string | Promise<string>; /** Write to filesystem */ write?: boolean; } interface NuxtServerTemplate { /** The target filename once the template is copied into the Nuxt buildDir */ filename: string; getContents: () => string | Promise<string>; } interface ResolvedNuxtTemplate<Options = TemplateDefaultOptions> extends NuxtTemplate<Options> { filename: string; dst: string; modified?: boolean; } interface NuxtTypeTemplate<Options = TemplateDefaultOptions> extends Omit<NuxtTemplate<Options>, 'write' | 'filename'> { filename: `${string}.d.ts`; write?: true; } type _TemplatePlugin<Options> = Omit<NuxtPlugin, 'src'> & NuxtTemplate<Options>; interface NuxtPluginTemplate<Options = TemplateDefaultOptions> extends _TemplatePlugin<Options> { } interface NuxtApp { mainComponent?: string | null; rootComponent?: string | null; errorComponent?: string | null; dir: string; extensions: string[]; plugins: NuxtPlugin[]; components: Component[]; layouts: Record<string, NuxtLayout>; middleware: NuxtMiddleware[]; templates: NuxtTemplate[]; configs: string[]; pages?: NuxtPage[]; } interface Nuxt { _version: string; _ignore?: Ignore; _dependencies?: Set<string>; /** The resolved Nuxt configuration. */ options: NuxtOptions; hooks: Hookable<NuxtHooks>; hook: Nuxt['hooks']['hook']; callHook: Nuxt['hooks']['callHook']; addHooks: Nuxt['hooks']['addHooks']; ready: () => Promise<void>; close: () => Promise<void>; /** The production or development server. */ server?: any; vfs: Record<string, string>; apps: Record<string, NuxtApp>; } interface ImportsOptions extends UnimportOptions { /** * Enable implicit auto import from Vue, Nuxt and module contributed utilities. * Generate global TypeScript definitions. * @default true */ autoImport?: boolean; /** * Directories to scan for auto imports. * @see https://nuxt.com/docs/guide/directory-structure/composables#how-files-are-scanned * @default ['./composables', './utils'] */ dirs?: string[]; /** * Enabled scan for local directories for auto imports. * When this is disabled, `dirs` options will be ignored. * @default true */ scan?: boolean; /** * Assign auto imported utilities to `globalThis` instead of using built time transformation. * @default false */ global?: boolean; transform?: { exclude?: RegExp[]; include?: RegExp[]; }; } interface ModuleMeta$1 { /** Module name. */ name?: string; /** Module version. */ version?: string; /** * The configuration key used within `nuxt.config` for this module's options. * For example, `@nuxtjs/axios` uses `axios`. */ configKey?: string; /** * Constraints for the versions of Nuxt or features this module requires. */ compatibility?: NuxtCompatibility; [key: string]: unknown; } /** The options received. */ type ModuleOptions = Record<string, any>; type ModuleSetupInstallResult = { /** * Timing information for the initial setup */ timings?: { /** Total time took for module setup in ms */ setup?: number; [key: string]: number | undefined; }; }; type Awaitable<T> = T | Promise<T>; type Prettify<T> = { [K in keyof T]: T[K]; } & {}; type ModuleSetupReturn = Awaitable<false | void | ModuleSetupInstallResult>; type ResolvedModuleOptions<TOptions extends ModuleOptions, TOptionsDefaults extends Partial<TOptions>> = Prettify<Defu<Partial<TOptions>, [ Partial<TOptions>, TOptionsDefaults ]>>; /** Module definition passed to 'defineNuxtModule(...)' or 'defineNuxtModule().with(...)'. */ interface ModuleDefinition<TOptions extends ModuleOptions, TOptionsDefaults extends Partial<TOptions>, TWith extends boolean> { meta?: ModuleMeta$1; defaults?: TOptionsDefaults | ((nuxt: Nuxt) => Awaitable<TOptionsDefaults>); schema?: TOptions; hooks?: Partial<NuxtHooks>; setup?: (this: void, resolvedOptions: TWith extends true ? ResolvedModuleOptions<TOptions, TOptionsDefaults> : TOptions, nuxt: Nuxt) => ModuleSetupReturn; } interface NuxtModule<TOptions extends ModuleOptions = ModuleOptions, TOptionsDefaults extends Partial<TOptions> = Partial<TOptions>, TWith extends boolean = false> { (this: void, resolvedOptions: TWith extends true ? ResolvedModuleOptions<TOptions, TOptionsDefaults> : TOptions, nuxt: Nuxt): ModuleSetupReturn; getOptions?: (inlineOptions?: Partial<TOptions>, nuxt?: Nuxt) => Promise<TWith extends true ? ResolvedModuleOptions<TOptions, TOptionsDefaults> : TOptions>; getMeta?: () => Promise<ModuleMeta$1>; } type RouterOptions = Partial<Omit<RouterOptions$1, 'history' | 'routes'>> & { history?: (baseURL?: string) => RouterHistory | null | undefined; routes?: (_routes: RouterOptions$1['routes']) => RouterOptions$1['routes'] | Promise<RouterOptions$1['routes']>; hashMode?: boolean; scrollBehaviorType?: 'smooth' | 'auto'; }; type RouterConfig = RouterOptions; /** * Only JSON serializable router options are configurable from nuxt config */ type RouterConfigSerializable = Pick<RouterConfig, 'linkActiveClass' | 'linkExactActiveClass' | 'end' | 'sensitive' | 'strict' | 'hashMode' | 'scrollBehaviorType'>; interface ConfigSchema { /** * Configure Nuxt component auto-registration. * * Any components in the directories configured here can be used throughout your pages, layouts (and other components) without needing to explicitly import them. * * * @see [`components/` directory documentation](https://nuxt.com/docs/guide/directory-structure/components) */ components: boolean | ComponentsOptions | ComponentsOptions['dirs'], /** * Configure how Nuxt auto-imports composables into your application. * * * @see [Nuxt documentation](https://nuxt.com/docs/guide/directory-structure/composables) */ imports: ImportsOptions, /** * Whether to use the vue-router integration in Nuxt 3. If you do not provide a value it will be enabled if you have a `pages/` directory in your source folder. * */ pages: boolean, /** * Manually disable nuxt telemetry. * * * @see [Nuxt Telemetry](https://github.com/nuxt/telemetry) for more information. */ telemetry: boolean | Record<string, any>, /** * Enable Nuxt DevTools for development. * * Breaking changes for devtools might not reflect on the version of Nuxt. * * * @see [Nuxt DevTools](https://devtools.nuxt.com/) for more information. */ devtools: { enabled: boolean, [key: string]: any } , /** * Vue.js config * */ vue: { transformAssetUrls: AssetURLTagConfig, /** * Options for the Vue compiler that will be passed at build time. * * * @see [Vue documentation](https://vuejs.org/api/application.html#app-config-compileroptions) */ compilerOptions: CompilerOptions, /** * Include Vue compiler in runtime bundle. * * @default false */ runtimeCompiler: boolean, /** * Enable reactive destructure for `defineProps` * * @default true */ propsDestructure: boolean, /** * It is possible to pass configure the Vue app globally. Only serializable options may be set in your `nuxt.config`. All other options should be set at runtime in a Nuxt plugin.. * * * @see [Vue app config documentation](https://vuejs.org/api/application.html#app-config) */ config: any, }, /** * Nuxt App configuration. * */ app: { /** * The base path of your Nuxt application. * * For example: * * @default "/" * * @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 * ``` */ baseURL: string, /** * The folder name for the built site assets, relative to `baseURL` (or `cdnURL` if set). This is set at build time and should not be customized at runtime. * * @default "/_nuxt/" */ buildAssetsDir: string, /** * An absolute URL to serve the public folder from (production-only). * * For example: * * @default "" * * @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 * NUXT_APP_CDN_URL=https://mycdn.org/ node .output/server/index.mjs * ``` */ cdnURL: string, /** * Set default configuration for `<head>` on every page. * * * @example * ```js * app: { * head: { * meta: [ * // <meta name="viewport" content="width=device-width, initial-scale=1"> * { name: 'viewport', content: 'width=device-width, initial-scale=1' } * ], * script: [ * // <script src="https://myawesome-lib.js"></script> * { src: 'https://awesome-lib.js' } * ], * link: [ * // <link rel="stylesheet" href="https://myawesome-lib.css"> * { rel: 'stylesheet', href: 'https://awesome-lib.css' } * ], * // please note that this is an area that is likely to change * style: [ * // <style type="text/css">:root { color: red }</style> * { children: ':root { color: red }', type: 'text/css' } * ], * noscript: [ * // <noscript>JavaScript is required</noscript> * { children: 'JavaScript is required' } * ] * } * } * ``` */ head: NuxtAppConfig['head'], /** * Default values for layout transitions. * * This can be overridden with `definePageMeta` on an individual page. Only JSON-serializable values are allowed. * * @default false * * @see [Vue Transition docs](https://vuejs.org/api/built-in-components.html#transition) */ layoutTransition: NuxtAppConfig['layoutTransition'], /** * Default values for page transitions. * * This can be overridden with `definePageMeta` on an individual page. Only JSON-serializable values are allowed. * * @default false * * @see [Vue Transition docs](https://vuejs.org/api/built-in-components.html#transition) */ pageTransition: NuxtAppConfig['pageTransition'], /** * Default values for view transitions. * * This only has an effect when **experimental** support for View Transitions is [enabled in your nuxt.config file](/docs/getting-started/transitions#view-transitions-api-experimental). * This can be overridden with `definePageMeta` on an individual page. * * @default false * * @see [Nuxt View Transition API docs](https://nuxt.com/docs/getting-started/transitions#view-transitions-api-experimental) */ viewTransition: NuxtAppConfig['viewTransition'], /** * Default values for KeepAlive configuration between pages. * * This can be overridden with `definePageMeta` on an individual page. Only JSON-serializable values are allowed. * * @default false * * @see [Vue KeepAlive](https://vuejs.org/api/built-in-components.html#keepalive) */ keepalive: NuxtAppConfig['keepalive'], /** * Customize Nuxt root element id. * * @default "__nuxt" * * @deprecated Prefer `rootAttrs.id` instead */ rootId: string | false, /** * Customize Nuxt root element tag. * * @default "div" */ rootTag: string, /** * Customize Nuxt root element id. * */ rootAttrs: HtmlAttributes, /** * Customize Nuxt Teleport element tag. * * @default "div" */ teleportTag: string, /** * Customize Nuxt Teleport element id. * * @default "teleports" * * @deprecated Prefer `teleportAttrs.id` instead */ teleportId: string | false, /** * Customize Nuxt Teleport element attributes. * */ teleportAttrs: HtmlAttributes, /** * Customize Nuxt SpaLoader element tag. * * @default "div" */ spaLoaderTag: string, /** * Customize Nuxt Nuxt SpaLoader element attributes. * */ spaLoaderAttrs: HtmlAttributes, }, /** * 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 * default Nuxt image will be used. * Some good sources for spinners are [SpinKit](https://github.com/tobiasahlin/SpinKit) or [SVG Spinners](https://icones.js.org/collection/svg-spinners). * * * @example ~/app/spa-loading-template.html * ```html * <!-- https://github.com/barelyhuman/snips/blob/dev/pages/css-loader.md --> * <div class="loader"></div> * <style> * .loader { * display: block; * position: fixed; * z-index: 1031; * top: 50%; * left: 50%; * transform: translate(-50%, -50%); * width: 18px; * height: 18px; * box-sizing: border-box; * border: solid 2px transparent; * border-top-color: #000; * border-left-color: #000; * border-bottom-color: #efefef; * border-right-color: #efefef; * border-radius: 50%; * -webkit-animation: loader 400ms linear infinite; * animation: loader 400ms linear infinite; * } * * \@-webkit-keyframes loader { * 0% { * -webkit-transform: translate(-50%, -50%) rotate(0deg); * } * 100% { * -webkit-transform: translate(-50%, -50%) rotate(360deg); * } * } * \@keyframes loader { * 0% { * transform: translate(-50%, -50%) rotate(0deg); * } * 100% { * transform: translate(-50%, -50%) rotate(360deg); * } * } * </style> * ``` */ spaLoadingTemplate: string | boolean, /** * An array of nuxt app plugins. * * Each plugin can be a string (which can be an absolute or relative path to a file). If it ends with `.client` or `.server` then it will be automatically loaded only in the appropriate context. * It can also be an object with `src` and `mode` keys. * * * @note Plugins are also auto-registered from the `~/plugins` directory * and these plugins do not need to be listed in `nuxt.config` unless you * need to customize their order. All plugins are deduplicated by their src path. * * @see [`plugins/` directory documentation](https://nuxt.com/docs/guide/directory-structure/plugins) * * @example * ```js * plugins: [ * '~/plugins/foo.client.js', // only in client side * '~/plugins/bar.server.js', // only in server side * '~/plugins/baz.js', // both client & server * { src: '~/plugins/both-sides.js' }, * { src: '~/plugins/client-only.js', mode: 'client' }, // only on client side * { src: '~/plugins/server-only.js', mode: 'server' } // only on server side * ] * ``` */ plugins: (NuxtPlugin | string)[], /** * You can define the CSS files/modules/libraries you want to set globally (included in every page). * * Nuxt will automatically guess the file type by its extension and use the appropriate pre-processor. You will still need to install the required loader if you need to use them. * * * @example * ```js * css: [ * // Load a Node.js module directly (here it's a Sass file). * 'bulma', * // CSS file in the project * '~/assets/css/main.css', * // SCSS file in the project * '~/assets/css/main.scss' * ] * ``` */ css: string[], /** * An object that allows us to configure the `unhead` nuxt module. * */ unhead: { /** * An object that will be passed to `renderSSRHead` to customize the output. * * * @see [`unhead` options documentation](https://unhead.unjs.io/setup/ssr/installation#options) * * @example * ```ts * export default defineNuxtConfig({ * unhead: { * renderSSRHeadOptions: { * omitLineBreaks: true * } * }) * ``` */ renderSSRHeadOptions: RenderSSRHeadOptions, }, /** * The builder to use for bundling the Vue part of your application. * * @default "@nuxt/vite-builder" */ builder: 'vite' | 'webpack' | 'rspack' | { bundle: (nuxt: Nuxt) => Promise<void> }, /** * Configures whether and how sourcemaps are generated for server and/or client bundles. * * If set to a single boolean, that value applies to both server and client. Additionally, the `'hidden'` option is also available for both server and client. * Available options for both client and server: - `true`: Generates sourcemaps and includes source references in the final bundle. - `false`: Does not generate any sourcemaps. - `'hidden'`: Generates sourcemaps but does not include references in the final bundle. * */ sourcemap: boolean | { server?: boolean | 'hidden', client?: boolean | 'hidden' }, /** * Log level when building logs. * * Defaults to 'silent' when running in CI or when a TTY is not available. This option is then used as 'silent' in Vite and 'none' in Webpack * * @default "info" */ logLevel: 'silent' | 'info' | 'verbose', /** * Shared build configuration. * */ build: { /** * If you want to transpile specific dependencies with Babel, you can add them here. Each item in transpile can be a package name, a function, a string or regex object matching the dependency's file name. * * You can also use a function to conditionally transpile. The function will receive an object ({ isDev, isServer, isClient, isModern, isLegacy }). * * * @example * ```js * transpile: [({ isLegacy }) => isLegacy && 'ky'] * ``` */ transpile: Array<string | RegExp | ((ctx: { isClient?: boolean; isServer?: boolean; isDev: boolean }) => string | RegExp | false)>, /** * It is recommended to use `addTemplate` from `@nuxt/kit` instead of this option. * * * @example * ```js * templates: [ * { * src: '~/modules/support/plugin.js', // `src` can be absolute or relative * dst: 'support.js', // `dst` is relative to project `.nuxt` dir * } * ] * ``` */ templates: NuxtTemplate<any>[], /** * Nuxt allows visualizing your bundles and how to optimize them. * * Set to `true` to enable bundle analysis, or pass an object with options: [for webpack](https://github.com/webpack-contrib/webpack-bundle-analyzer#options-for-plugin) or [for vite](https://github.com/btd/rollup-plugin-visualizer#options). * * * @example * ```js * analyze: { * analyzerMode: 'static' * } * ``` */ analyze: boolean | { enabled?: boolean } & ((0 extends 1 & BundleAnalyzerPlugin.Options ? {} : BundleAnalyzerPlugin.Options) | PluginVisualizerOptions), }, /** * Build time optimization configuration. * */ optimization: { /** * Functions to inject a key for. * * As long as the number of arguments passed to the function is less than `argumentLength`, an additional magic string will be injected that can be used to deduplicate requests between server and client. You will need to take steps to handle this additional key. * The key will be unique based on the location of the function being invoked within the file. * * @default [{"name":"callOnce","argumentLength":3},{"name":"defineNuxtComponent","argumentLength":2},{"name":"useState","argumentLength":2},{"name":"useFetch","argumentLength":3},{"name":"useAsyncData","argumentLength":3},{"name":"useLazyAsyncData","argumentLength":3},{"name":"useLazyFetch","argumentLength":3}] */ keyedComposables: Array<{ name: string, source?: string | RegExp, argumentLength: number }>, /** * Tree shake code from specific builds. * */ treeShake: { /** * Tree shake composables from the server or client builds. * * * @example * ```js * treeShake: { client: { myPackage: ['useServerOnlyComposable'] } } * ``` */ composables: { server: { [key: string]: any }, client: { [key: string]: any }, }, }, /** * Options passed directly to the transformer from `unctx` that preserves async context after `await`. * */ asyncTransforms: TransformerOptions, }, /** * Extend project from multiple local or remote sources. * * Value should be either a string or array of strings pointing to source directories or config path relative to current config. * You can use `github:`, `gh:` `gitlab:` or `bitbucket:` * * * @see [`c12` docs on extending config layers](https://github.com/unjs/c12#extending-config-layer-from-remote-sources) * * @see [`giget` documentation](https://github.com/unjs/giget) */ extends: string | [string, SourceOptions?] | (string | [string, SourceOptions?])[], /** * Specify a compatibility date for your app. * * This is used to control the behavior of presets in Nitro, Nuxt Image and other modules that may change behavior without a major version bump. * We plan to improve the tooling around this feature in the future. * */ compatibilityDate: CompatibilityDateSpec, /** * Extend project from a local or remote source. * * Value should be a string pointing to source directory or config path relative to current config. * You can use `github:`, `gitlab:`, `bitbucket:` or `https://` to extend from a remote git repository. * * @default null */ theme: string, /** * Define the root directory of your application. * * This property can be overwritten (for example, running `nuxt ./my-app/` will set the `rootDir` to the absolute path of `./my-app/` from the current/working directory. * It is normally not needed to configure this option. * * @default "/<rootDir>" */ rootDir: string, /** * Define the workspace directory of your application. * * Often this is used when in a monorepo setup. Nuxt will attempt to detect your workspace directory automatically, but you can override it here. * It is normally not needed to configure this option. * * @default "/<workspaceDir>" */ workspaceDir: string, /** * Define the source directory of your Nuxt application. * * If a relative path is specified, it will be relative to the `rootDir`. * * @default "/<srcDir>" * * @example * ```js * export default { * srcDir: 'src/' * } * ``` * This would work with the following folder structure: * ```bash * -| app/ * ---| node_modules/ * ---| nuxt.config.js * ---| package.json * ---| src/ * ------| assets/ * ------| components/ * ------| layouts/ * ------| middleware/ * ------| pages/ * ------| plugins/ * ------| public/ * ------| store/ * ------| server/ * ------| app.config.ts * ------| app.vue * ------| error.vue * ``` */ srcDir: string, /** * Define the server directory of your Nuxt application, where Nitro routes, middleware and plugins are kept. * * If a relative path is specified, it will be relative to your `rootDir`. * * @default "/<srcDir>/server" */ serverDir: string, /** * Define the directory where your built Nuxt files will be placed. * * Many tools assume that `.nuxt` is a hidden directory (because it starts with a `.`). If that is a problem, you can use this option to prevent that. * * @default "/<rootDir>/.nuxt" * * @example * ```js * export default { * buildDir: 'nuxt-build' * } * ``` */ buildDir: string, /** * For multi-app projects, the unique id of the Nuxt application. * * Defaults to `nuxt-app`. * * @default "nuxt-app" */ appId: string, /** * A unique identifier matching the build. This may contain the hash of the current state of the project. * * @default "ccc5ae97-dafb-4eec-96a7-6079193880ea" */ buildId: string, /** * Used to set the modules directories for path resolving (for example, webpack's `resolveLoading`, `nodeExternals` and `postcss`). * * The configuration path is relative to `options.rootDir` (default is current working directory). * Setting this field may be necessary if your project is organized as a yarn workspace-styled mono-repository. * * @default ["/<rootDir>/node_modules"] * * @example * ```js * export default { * modulesDir: ['../../node_modules'] * } * ``` */ modulesDir: Array<string>, /** * The directory where Nuxt will store the generated files when running `nuxt analyze`. * * If a relative path is specified, it will be relative to your `rootDir`. * * @default "/<rootDir>/.nuxt/analyze" */ analyzeDir: string, /** * Whether Nuxt is running in development mode. * * Normally, you should not need to set this. * * @default false */ dev: boolean, /** * Whether your app is being unit tested. * * @default false */ test: boolean, /** * Set to `true` to enable debug mode. * * At the moment, it prints out hook names and timings on the server, and logs hook arguments as well in the browser. * * @default false */ debug: boolean, /** * Whether to enable rendering of HTML - either dynamically (in server mode) or at generate time. If set to `false` generated pages will have no content. * * @default true */ ssr: boolean, /** * Modules are Nuxt extensions which can extend its core functionality and add endless integrations. * * Each module is either a string (which can refer to a package, or be a path to a file), a tuple with the module as first str