configuration

12 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

defineNuxtConfig function

The defineNuxtConfig function is a helper that is globally available without import. It is used to export the configuration object in the nuxt.config.ts file. A minimal configuration file exports defineNuxtConfig containing an object with your configuration.

nuxt.config.ts location and purpose

The nuxt.config.ts file is located at the root of a Nuxt project and can override or extend the application's default behavior and configuration.

Environment-specific configuration overrides

Nuxt supports fully typed, per-environment overrides using the $production, $development, and $env keys in nuxt.config. To select an environment when running a Nuxt CLI command, pass the name to the --envName flag, like: nuxt build --envName staging.

Environment variable override for runtimeConfig

Environment variables override runtimeConfig values by prefixing with NUXT_. For example, NUXT_API_SECRET=api_secret_token overrides the value of apiSecret.

defineAppConfig function

The defineAppConfig function is a helper that is globally available without import. It is used to export the configuration object in the app/app.config.ts file. These variables are exposed to the rest of your application using the useAppConfig composable.

app.config.ts purpose

The app.config.ts file is located in the source directory (by default app/) and is used to expose public variables that can be determined at build time. Contrary to runtimeConfig, these cannot be overridden using environment variables.

runtimeConfig vs app.config comparison

runtimeConfig and app.config have different characteristics: runtimeConfig is hydrated on client-side, supports environment variables, is reactive, has partial types support, does not support configuration per request, does not support hot module replacement, and does not support non-primitive JS types. app.config is bundled on client-side, does not support environment variables, is reactive, has full types support, supports configuration per request, supports hot module replacement, and supports non-primitive JS types.

External configuration integration in Nuxt

Nuxt uses nuxt.config.ts as the single source of truth and skips reading external configuration files. Common tools are configured within nuxt.config using their respective keys: Nitro via the 'nitro' key, PostCSS via the 'postcss' key, Vite via the 'vite' key, and webpack via the 'webpack' key.

Vue configuration with Vite in nuxt.config

For Vite, options can be passed to @vitejs/plugin-vue using vite.vue key and to @vitejs/plugin-vue-jsx using vite.vueJsx key within nuxt.config.

Vue configuration with webpack in nuxt.config

For webpack, vue-loader can be configured using the webpack.loaders.vue key inside nuxt.config file.

Enabling experimental Vue features in nuxt.config

Experimental Vue features can be enabled in nuxt.config.ts using the vue key. For example, propsDestructure can be enabled by setting vue.propsDestructure to true.

reactivityTransform migration from Vue 3.4 and Nuxt 3.9

Since Nuxt 3.9 and Vue 3.4, reactivityTransform has been moved from Vue to Vue Macros which has a Nuxt integration.

Give your agent this brain