A Nuxt application is configured through the nuxt.config.ts file. In this file, we can setup core features of nuxt, enable modules, configure them, extend from other layers, and more.
Each layer has a nuxt.config.ts file that is used to configure the layer itself. Layers can also have a app.config.ts file that is used to manage the layer's default app configuration. In that case, you should also find a nuxt.schema.ts file that is used to define the layer's configuration schema.
•nuxt.config.js
This is an overview of the nuxt configuration file. It's used to change the way nuxt works (disable server-side rendering, change the build directory, etc, apply cache rules to specific routes, ...)
•Runtime config
Everything defined in the <app>/nuxt.config.ts file is not exposed in either the client or the server. To expose a variable to the client, you need to use the runtimeConfig property. This property is used to expose variables to the client, and to the server.
The runtime config can then be accessed in the server using the useRuntimeConfig nuxt composable:
And in the client using same composable, note that you only have access to the public variables:
•Environment variables
When using the runtimeConfig property, you can use environment variables to define their value. This is useful when you want to use different values for different environments.
Like seen in the previous example, you can define the NUXT_SECRET_KEY and NUXT_PUBLIC_MAPBOX_TOKEN value using an environment variable.
During development, or at build time, you can use .env files to define environment variables. These files are located at the root of your project and are named .env and .env.local. Note that when running the production build, no .env file is used.
Useful resources:
In addition to the nuxt configuration, another file is used to configure the app itself. This file is named app.config.ts and is used to configure the app layout, theme, and more.
•app.config.ts
App configuration can then be accessed in components using the useAppConfig nuxt composable. We use this internally to configure the layout, the theme, and other features, but nothing stops you from using it to configure your own components.
Useful resources: