Por defecto, Nuxt está configurado para cubrir la mayoría de los casos de uso. El archivo nuxt.config.ts puede anular o extender esta configuración predeterminada.

Configuración de Nuxt

El archivo nuxt.config.ts se encuentra en la raíz de un proyecto Nuxt y puede anular o extender el comportamiento de la aplicación.

Un archivo de configuración mínimo exporta la función defineNuxtConfig que contiene un objeto con tu configuración. El helper defineNuxtConfig está disponible globalmente sin necesidad de importación.

export default defineNuxtConfig({
  // Mi configuración de Nuxt
})

Este archivo se mencionará a menudo en la documentación, por ejemplo, para agregar scripts personalizados, registrar módulos o cambiar modos de renderizado.

Anulaciones de Entorno

Puedes configurar anulaciones completamente tipadas por entorno en tu nuxt.config.

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

Para seleccionar un entorno al ejecutar un comando CLI de Nuxt, simplemente pasa el nombre al flag --envName, así: nuxt build --envName staging.

Para obtener más información sobre el mecanismo detrás de estas anulaciones, consulta la documentación de c12 sobre configuración específica del entorno.

Variables de Entorno y Tokens Privados

La API runtimeConfig expone valores como variables de entorno al resto de tu aplicación. Por defecto, estas claves solo están disponibles del lado del servidor. Las claves dentro de runtimeConfig.public y runtimeConfig.app (que es utilizada internamente por Nuxt) también están disponibles del lado del cliente.

Esos valores deben definirse en nuxt.config y pueden ser anulados usando variables de entorno.

export default defineNuxtConfig({
  runtimeConfig: {
    // Las claves privadas que solo están disponibles del lado del servidor
    apiSecret: '123',
    // Las claves dentro de public también se exponen del lado del cliente
    public: {
      apiBase: '/api'
    }
  }
})

Estas variables se exponen al resto de tu aplicación usando el composable useRuntimeConfig().

const runtimeConfig = useRuntimeConfig()

Configuración de la Aplicación

El archivo app.config.ts, ubicado en el directorio fuente (por defecto en la raíz del proyecto), se utiliza para exponer variables públicas que pueden determinarse en tiempo de compilación. A diferencia de la opción runtimeConfig, estas no pueden ser anuladas usando variables de entorno.

Un archivo de configuración mínimo exporta la función defineAppConfig que contiene un objeto con tu configuración. El helper defineAppConfig está disponible globalmente sin necesidad de importación.

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

Estas variables se exponen al resto de tu aplicación usando el composable useAppConfig.

const appConfig = useAppConfig()

runtimeConfig vs. app.config

Como se mencionó anteriormente, runtimeConfig y app.config se utilizan para exponer variables al resto de tu aplicación. Para determinar si debes usar uno u otro, aquí hay algunas pautas:

• runtimeConfig: Tokens privados o públicos que necesitan especificarse después de la compilación usando variables de entorno.
• app.config: Tokens públicos que se determinan en tiempo de compilación, configuración del sitio web como variante de tema, título y cualquier configuración de proyecto que no sea sensible.

Archivos de Configuración Externos

Nuxt utiliza el archivo nuxt.config.ts como la única fuente de verdad para configuraciones y omite la lectura de archivos de configuración externos. Durante el curso de la construcción de tu proyecto, puedes necesitar configurar estos. La siguiente tabla destaca configuraciones comunes y, donde sea aplicable, cómo pueden configurarse con Nuxt.

Aquí hay una lista de otros archivos de configuración comunes:

Configuración de Vue

Con Vite

Si necesitas pasar opciones a @vitejs/plugin-vue o @vitejs/plugin-vue-jsx, puedes hacerlo en tu archivo nuxt.config.

• vite.vue para @vitejs/plugin-vue. Consulta opciones disponibles.
• vite.vueJsx para @vitejs/plugin-vue-jsx. Consulta opciones disponibles.

export default defineNuxtConfig({
  vite: {
    vue: {
      customElement: true
    },
    vueJsx: {
      mergeProps: true
    }
  }
})

Con webpack

Si usas webpack y necesitas configurar vue-loader, puedes hacerlo usando la clave webpack.loaders.vue dentro de tu archivo nuxt.config. Las opciones disponibles están definidas aquí.

export default defineNuxtConfig({
  webpack: {
    loaders: {
      vue: {
        hotReload: true,
      }
    }
  }
})

Habilitando Funciones Experimentales de Vue

Puede que necesites habilitar funciones experimentales en Vue, como propsDestructure. Nuxt proporciona una manera fácil de hacerlo en nuxt.config.ts, sin importar qué constructor estés usando:

export default defineNuxtConfig({
  vue: {
    propsDestructure: true
  }
})

migración experimental reactivityTransform de Vue 3.4 y Nuxt 3.9

Desde Nuxt 3.9 y Vue 3.4, reactivityTransform se ha movido de Vue a Vue Macros, que tiene una integración con Nuxt.