object{ "~~": "/<rootDir>", "@@": "/<rootDir>", "~": "/<rootDir>", "@": "/<rootDir>", "assets": "/<rootDir>/assets", "public": "/<rootDir>/public"}You can improve your DX by defining additional aliases to access custom directories within your JavaScript and CSS.
~..nuxt/tsconfig.json so you can get full
type support and path auto-complete. In case you need to extend options provided by ./.nuxt/tsconfig.json
further, make sure to add them here or within the typescript.tsConfig property in nuxt.config.Example:
export default { alias: { 'images': fileURLToPath(new URL('./assets/images', import.meta.url)), 'style': fileURLToPath(new URL('./assets/style', import.meta.url)), 'data': fileURLToPath(new URL('./assets/other/data', import.meta.url)) }}Nuxt App configuration.
baseURLstring"/"The base path of your Nuxt application.
This can be set at runtime by setting the NUXT_APP_BASE_URL environment variable.
Example:
NUXT_APP_BASE_URL=/prefix/ node .output/server/index.mjsbuildAssetsDirstring"/_nuxt/"The folder name for the built site assets, relative to
baseURL(orcdnURLif set). This is set at build time and should not be customized at runtime.
cdnURLstring""An absolute URL to serve the public folder from (production-only).
This can be set to a different value at runtime by setting the NUXT_APP_CDN_URL environment variable.
Example:
NUXT_APP_CDN_URL=https://mycdn.org/ node .output/server/index.mjsheadobject{ "meta": [], "link": [], "style": [], "script": [], "noscript": [], "charset": "utf-8", "viewport": "width=device-width, initial-scale=1"}Set default configuration for
<head>on every page.
Example:
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' } ] }}keepalivebooleanfalseDefault values for KeepAlive configuration between pages.
This can be overridden with definePageMeta on an individual page. Only JSON-serializable values are allowed.
See: https://vuejs.org/api/built-in-components.html#keepalive
layoutTransitionDefault values for layout transitions.
This can be overridden with definePageMeta on an individual page. Only JSON-serializable values are allowed.
See: https://vuejs.org/api/built-in-components.html#transition
modestring"out-in"namestring"layout"pageTransitionDefault values for page transitions.
This can be overridden with definePageMeta on an individual page. Only JSON-serializable values are allowed.
See: https://vuejs.org/api/built-in-components.html#transition
modestring"out-in"namestring"page"Additional app configuration
For programmatic usage and type support, you can directly provide app config with this option. It will be merged with app.config file as default value.
Shared build configuration.
analyzebooleanfalseNuxt uses
webpack-bundle-analyzerto visualize your bundles and how to optimize them.
Set to true to enable bundle analysis, or pass an object with options: for webpack or for vite.
Example:
analyze: { analyzerMode: 'static'}quietbooleanfalseSuppresses most of the build output log.
It is enabled by default when a CI or test environment is detected.
See: std-env
templatesarrayYou can provide your own templates which will be rendered based on Nuxt configuration. This feature is specially useful for using with modules.
Templates are rendered using lodash.template.
Example:
templates: [ { src: '~/modules/support/plugin.js', // `src` can be absolute or relative dst: 'support.js', // `dst` is relative to project `.nuxt` dir options: { // Options are provided to template as `options` key live_chat: false } }]transpilearrayIf 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:
transpile: [({ isLegacy }) => isLegacy && 'ky']string"/<rootDir>/.nuxt"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.
Example:
export default { buildDir: 'nuxt-build'}string"@nuxt/vite-builder"The builder to use for bundling the Vue part of your application.
object{ "dirs": [ { "path": "~/components/global", "global": true }, "~/components" ]}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.
Default: nullSee: Nuxt 3 and Nuxt 2 documentation
arrayYou 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:
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']booleanfalseWhether Nuxt is running in development mode.
Normally, you should not need to set this.
arrayNitro development-only server handlers.
See: https://nitro.unjs.io/guide/introduction/routing
Customize default directory structure used by Nuxt.
It is better to stick with defaults unless needed.
layoutsstring"layouts"The layouts directory, each file of which will be auto-registered as a Nuxt layout.
middlewarestring"middleware"The middleware directory, each file of which will be auto-registered as a Nuxt middleware.
pagesstring"pages"The directory which will be processed to auto-generate your application page routes.
pluginsstring"plugins"The plugins directory, each file of which will be auto-registered as a Nuxt plugin.
publicstring"public"The directory containing your static files, which will be directly accessible via the Nuxt server and copied across into your
distfolder when your app is generated.
asyncEntrybooleanfalseSet to true to generate an async entry point for the Vue bundle (for module federation support).
externalVuebooleantrueExternalize
vue,@vue/*andvue-routerwhen building.
See: #4084
inlineSSRStylesbooleantrueInline styles when rendering HTML (currently vite only).
You can also pass a function that receives the path of a Vue component and returns a boolean indicating whether to inline the styles for that component.
noScriptsbooleanfalseTurn off rendering of Nuxt scripts and JS resource hints.
payloadExtractionbooleantrueWhen this option is enabled (by default) payload of pages generated with
nuxt generateare extracted
reactivityTransformbooleanfalseEnable Vue's reactivity transform
See: https://vuejs.org/guide/extras/reactivity-transform.html
treeshakeClientOnlybooleantrueTree shakes contents of client-only components from server bundle.
See: #5750
viteNodebooleantrueUse vite-node for on-demand server chunk loading
viteServerDynamicImportsbooleantrueSplit server bundle into multiple chunks and dynamically import them.
See: #6432
nullExtend 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:, gitlab:, bitbucket: or https:// to extend from a remote git repository.
array[ ".js", ".jsx", ".mjs", ".ts", ".tsx", ".vue"]The extensions that should be resolved by the Nuxt resolver.
nullHooks are listeners to Nuxt events that are typically used in modules, but are also available in
nuxt.config.
Internally, hooks follow a naming pattern using colons (e.g., build:done).
For ease of configuration, you can also structure them as an hierarchical object in nuxt.config (as below).
Example:
import fs from 'node:fs'
import path from 'node:path'
export default {
hooks: {
build: {
done(builder) {
const extraFilePath = path.join(
builder.nuxt.options.buildDir,
'extra-file'
)
fs.writeFileSync(extraFilePath, 'Something extra')
}
}
}
}array[ "**/*.stories.{js,ts,jsx,tsx}", "**/*.{spec,test}.{js,ts,jsx,tsx}", ".output", "**/-*.*"]More customizable than
ignorePrefix: all files matching glob patterns specified inside theignorearray will be ignored in building.
Pass options directly to
node-ignore(which is used by Nuxt to ignore files).
See: node-ignoreExample:
ignoreOptions: { ignorecase: false}string"-"Any file in
pages/,layouts/,middleware/orstore/will be ignored during building if its filename starts with the prefix specified byignorePrefix.
Configure how Nuxt auto-imports composables into your application.
See: Nuxt 3 documentation
dirsarrayglobalbooleanfalselinkarraymetaarrayscriptarraystylearrayarrayModules 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 string and the options as a second object, or an inline module function.
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.
Example:
modules: [ // Using package name '@nuxtjs/axios', // Relative to your project srcDir '~/modules/awesome.js', // Providing options ['@nuxtjs/google-analytics', { ua: 'X1234567' }], // Inline definition function () {}]Configuration for Nitro.
See: https://nitro.unjs.io/config/
booleanWhether 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.
configbooleanfalsePath to postcss config file.
pluginsOptions for configuring PostCSS plugins.
autoprefixercssnanobooleantruepostcss-importobjectpostcss-urlstring"/<rootDir>"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.
object{ "public": {}, "app": { "baseURL": "/", "buildAssetsDir": "/_nuxt/", "cdnURL": "" }}Runtime config allows passing dynamic config and environment variables to the Nuxt app context.
The value of this object is accessible from server only using useRuntimeConfig.
It mainly should hold private configuration which is not exposed on the frontend. This could include a reference to your API secret tokens.
Anything under public and app will be exposed to the frontend as well.
Values are automatically replaced by matching env variables at runtime, e.g. setting an environment variable NUXT_API_KEY=my-api-key NUXT_PUBLIC_BASE_URL=/foo/ would overwrite the two values in the example below.
Example:
export default { runtimeConfig: { apiKey: '' // Default to an empty string, automatically set at runtime using process.env.NUXT_API_KEY public: { baseURL: '' // Exposed to the frontend as well. } }}string"/<rootDir>/server"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.
arrayNitro 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://v3.nuxtjs.org/guide/features/server-routes
server/api, server/middleware and server/routes will be automatically registered by Nuxt.Example:
serverHandlers: [ { route: '/path/foo/**:name', handler: '~/server/foohandler.ts' }]object{ "server": true, "client": false}Whether to generate sourcemaps.
string"/<rootDir>"Define the source directory of your Nuxt application.
If a relative path is specified, it will be relative to the rootDir.
Example:
export default { srcDir: 'src/'}This would work with the following folder structure:
-| app/---| node_modules/---| nuxt.config.js---| package.json---| src/------| assets/------| components/------| layouts/------| middleware/------| pages/------| plugins/------| static/------| store/------| server/booleantrueWhether to enable rendering of HTML - either dynamically (in server mode) or at generate time. If set to
falseand combined withstatictarget, generated pages will simply display a loading screen with no content.
booleanManually disable nuxt telemetry.
See: Nuxt Telemetry for more information.
stringnullExtend 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.
Configuration for Nuxt's TypeScript integration.
shimbooleantrueGenerate a
*.vueshim.
We recommend instead either enabling Take Over Mode or adding TypeScript Vue Plugin (Volar) 👉 [Download].
strictbooleanfalseTypeScript comes with certain checks to give you more safety and analysis of your program. Once you’ve converted your codebase to TypeScript, you can start enabling these checks for greater safety. Read More
tsConfigYou can extend generated
.nuxt/tsconfig.jsonusing this option.
typeCheckbooleanfalseEnable build-time type checking.
If set to true, this will type check in development. You can restrict this to build-time type checking by setting it to build.
Configuration that will be passed directly to Vite.
See https://vitejs.dev/config for more information. Please note that not all vite options are supported in Nuxt.
buildassetsDirstring"_nuxt/"emptyOutDirbooleanfalseclearScreenbooleanfalsedefineobject{ "process.dev": false}esbuildjsxFactorystring"h"jsxFragmentstring"Fragment"tsconfigRawstring"{}"logLevelstring"warn"modestring"production"optimizeDepsexcludearray[ "vue-demi"]publicDirstring"/<rootDir>/public"resolveextensionsarray[ ".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"]rootstring"/<rootDir>"serverfsallowarray[ "/<rootDir>/.nuxt", "/<rootDir>", "/<rootDir>", "/<rootDir>/node_modules", "/home/cinob/learn/github/nuxt3-core/packages/schema/node_modules"]strictbooleanfalsevueisProductionbooleantruetemplatecompilerOptionsobjectVue.js config
compilerOptionsOptions for the Vue compiler that will be passed at build time.
See: documentation
The watchers property lets you overwrite watchers configuration in your
nuxt.config.
chokidarOptions to pass directly to
chokidar.
See: chokidar
ignoreInitialbooleantruerewatchOnRawEventsAn array of event types, which, when received, will cause the watcher to restart.
webpack
watchOptionsto pass directly to webpack.
See: webpack@4 watch options.
aggregateTimeoutnumber1000aggressiveCodeRemovalbooleanfalseHard-replaces
typeof process,typeof windowandtypeof documentto tree-shake bundle.
analyzebooleanfalseNuxt uses
webpack-bundle-analyzerto visualize your bundles and how to optimize them.
Set to true to enable bundle analysis, or pass an object with options: for webpack or for vite.
Example:
analyze: { analyzerMode: 'static'}cssSourceMapbooleanfalseEnables CSS source map support (defaults to
truein development).
devMiddlewareSee webpack-dev-middleware for available options.
statsstring"none"extractCSSbooleantrueEnables Common CSS Extraction using Vue Server Renderer guidelines.
Using extract-css-chunks-webpack-plugin under the hood, your CSS will be extracted into separate files, usually one per component. This allows caching your CSS and JavaScript separately and is worth trying if you have a lot of global or shared CSS.
Example:
export default { webpack: { extractCSS: true, // or extractCSS: { ignoreOrder: true } }}Example:
export default { webpack: { extractCSS: true, optimization: { splitChunks: { cacheGroups: { styles: { name: 'styles', test: /\.(css|vue)$/, chunks: 'all', enforce: true } } } } }}filenamesCustomize bundle filenames.
To understand a bit more about the use of manifests, take a look at this webpack documentation.
Example:
filenames: { chunk: ({ isDev }) => (isDev ? '[name].js' : '[id].[contenthash].js')}appfunctionchunkfunctioncssfunctionfontfunctionimgfunctionvideofunctionfriendlyErrorsbooleantrueSet to
falseto disable the overlay provided by FriendlyErrorsWebpackPlugin.
hotMiddlewareSee webpack-hot-middleware for available options.
loadersCustomize the options of Nuxt's integrated webpack loaders.
cssesModulebooleanfalseimportLoadersnumber0urlfilterfunctioncssModulesesModulebooleanfalseimportLoadersnumber0moduleslocalIdentNamestring"[local]_[hash:base64:5]"urlfilterfunctionfileesModulebooleanfalsefontUrlesModulebooleanfalselimitnumber1000imgUrlesModulebooleanfalselimitnumber1000less{ "sourceMap": false}pugPlainsasssassOptionsindentedSyntaxbooleantruescss{ "sourceMap": false}stylus{ "sourceMap": false}vuecompilerOptionsobjectproductionModebooleantruetransformAssetUrlsembedstring"src"objectstring"src"sourcestring"src"videostring"src"vueStyle{ "sourceMap": false}optimizationConfigure webpack optimization.
minimizebooleantrueSet minimize to
falseto disable all minimizers. (It is disabled in development by default).
minimizerYou can set minimizer to a customized array of plugins.
runtimeChunkstring"single"splitChunksautomaticNameDelimiterstring"/"cacheGroupschunksstring"all"optimizeCSSbooleanfalseOptimizeCSSAssets plugin options.
Defaults to true when extractCSS is enabled.
See: css-minimizer-webpack-plugin documentation.
pluginsarrayAdd webpack plugins.
Example:
import webpack from 'webpack'import { version } from './package.json'// ...plugins: [ new webpack.DefinePlugin({ 'process.VERSION': version })]postcssCustomize PostCSS Loader. Same options as https://github.com/webpack-contrib/postcss-loader#options
executeundefinedimplementationundefinedorderstring""postcssOptionsconfigbooleanfalsepluginsobject{ "postcss-import": {}, "postcss-url": {}, "autoprefixer": {}, "cssnano": true}sourceMapundefinedprofilebooleanfalseEnable the profiler in webpackbar.
It is normally enabled by CLI argument --profile.
See: webpackbar.
serverURLPolyfillstring"url"The polyfill library to load to provide URL and URLSearchParams.
Defaults to 'url' (see package).
terserTerser plugin options.
Set to false to disable this plugin, or pass an object of options.
See: terser-webpack-plugin documentation.
//# sourceMappingURL linking comment at
the end of each output file if webpack config.devtool is set to source-map.warningIgnoreFiltersarrayFilters to hide build warnings.
string"/<rootDir>"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.