A Comprehensive Guide to Nuxt.js Configuration

Nuxt.js, a powerful framework for building Vue.js applications, offers a straightforward and flexible configuration system. In this blog post, we’ll delve into the essentials of configuring your Nuxt.js application, from the primary nuxt.config.ts file to environment overrides and other advanced options.

The ‘nuxt.config.ts’ File

Located at the root of your Nuxt project, the nuxt.config.ts file serves as the central configuration hub for your application. It allows you to customize and extend your application’s behavior. A minimal configuration file exports an object with your configuration using the defineNuxtConfig function:

typescript:

import { defineNuxtConfig } from 'nuxt3' export default defineNuxtConfig({ // Your Nuxt config options go here })

This file is frequently referenced in Nuxt.js documentation, whether you want to add custom scripts, register modules, or alter rendering modes.

Environment Overrides

Nuxt.js provides a neat way to configure environment-specific overrides in your nuxt.config.ts file. You can define fully-typed overrides for different environments like production and development:

typescript:

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  $production: {
    routeRules: {
      '/**': { isr: true }
    }
  },
  $development: {
    // Customize for development
  }
})

These environment-specific configurations help you tailor your app for different scenarios.

Environment Variables and Private Tokens

The runtimeConfig API enables you to expose values like environment variables to your application. These values can be defined in the nuxt.config.ts file and are accessible server-side by default. However, keys within runtimeConfig.public are also available client-side. Here’s how you can set it up:

typescript:

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  runtimeConfig: {
    // Private keys available server-side
    apiSecret: '123',
    // Keys within 'public' are exposed client-side
    public: {
      apiBase: '/api'
    }
  }
})

To use these variables in your application, you can employ the useRuntimeConfig composable:

vue:

<script setup lang="ts"> const runtimeConfig = useRuntimeConfig() </script>

App Configuration

The app.config.ts file, found in the source directory (usually the root of your project), allows you to expose public variables determined at build time. Unlike runtimeConfig, these cannot be overridden using environment variables. Here’s how to set it up:

typescript:

import { defineAppConfig } from 'nuxt3'

export default defineAppConfig({
  title: 'Hello Nuxt',
  theme: {
    dark: true,
    colors: {
      primary: '#ff0000'
    }
  }
})

You can access these variables in your application using the useAppConfig composable.

‘runtimeConfig’ vs ‘app.config’

To decide whether to use runtimeConfig or app.config, consider the following guidelines:

• Use runtimeConfig for private or public tokens that need to be specified after build using environment variables.
• Use app.config for public tokens determined at build time, such as website configuration like theme variants, titles, and any non-sensitive project config.

These choices offer flexibility depending on your application’s needs.

Vue Configuration

With Vite

If you need to pass options to @vitejs/plugin-vue or @vitejs/plugin-vue-jsx, you can do so in your nuxt.config.ts file. Simply use the vite.vue and vite.vueJsx keys to specify your options.

With webpack

If you’re using webpack and need to configure vue-loader, you can achieve this using the webpack.loaders.vue key within your nuxt.config.ts file. This allows you to customize options for vue-loader to suit your needs.

Enabling Experimental Vue Features

To enable experimental Vue features like defineModel or propsDestructure, regardless of the builder you’re using, simply configure them in your nuxt.config.ts file. This feature is handy when you want to experiment with the latest Vue features in your Nuxt project.

With Nuxt.js’s versatile configuration options, you can tailor your application to meet your specific requirements and adapt to different environments with ease. Whether you’re fine-tuning environment-specific settings, exposing variables, or experimenting with Vue features, Nuxt.js offers a seamless configuration experience for your Vue.js applications. Happy coding!