app.config.ts

Nuxt предоставляет конфигурационный файл app.config для отображения реактивной конфигурации в приложении с возможностью ее обновления в рантайме в рамках жизненного цикла или с помощью nuxt-плагина и редактирования с помощью HMR (hot-module-replacement).

Вы можете легко настроить приложение в рантайме, используя файл app.config.ts. Он может иметь расширение .ts, .js или .mjs.

export default 
defineAppConfig
({
  
foo
: 'bar'
})

Использование

Чтобы предоставить доступ к конфигурации и переменным окружения остальной части приложения, вам необходимо определить конфигурацию в файле app.config.

export default 
defineAppConfig
({
  
theme
: {
    
primaryColor
: '#ababab'
  }
})

При добавлении theme в app.config, Nuxt использует Vite или webpack для объединения кода. Мы можем получить универсальный доступ к theme как при серверном рендеринге страницы, так и в браузере, используя композабл useAppConfig.

<script setup lang="ts">
const appConfig = useAppConfig()

console.log(appConfig.theme)
</script>

При настройке пользовательского srcDir обязательно поместите файл app.config в корень нового пути srcDir.

Типизация конфигурации приложения

Nuxt пытается автоматически сгенерировать интерфейс TypeScript из предоставленной конфигурации приложения, поэтому вам не придется типизировать ее самостоятельно.

Однако есть некоторые случаи, когда вы можете захотеть типизировать ее самостоятельно. Есть две возможные вещи, которые вы можете захотеть типизировать.

Ввод конфигурации приложения

AppConfigInput может использоваться авторами модулей, которые объявляют допустимые параметры input при настройке конфигурации приложения. Это не повлияет на тип useAppConfig().

declare module 'nuxt/schema' {
  interface AppConfigInput {
    /** Конфигурация темы */
    theme?: {
      /** Основной цвет приложения */
      primaryColor?: string
    }
  }
}

// Всегда важно убедиться, что вы импортируете/экспортируете что-либо при расширении типа.
export {}

Вывод конфигурации приложения

Если вы хотите типизировать результат вызова useAppConfig(), то вам нужно будет расширить AppConfig.

declare module 'nuxt/schema' {
  interface AppConfig {
    // Это полностью заменит существующее выведенное свойство `theme`
    theme: {
      // Возможно, вам захочется ввести это значение, чтобы добавить более конкретные типы, чем те, которые может вывести Nuxt,
      // например, типы строковых литералов.
      primaryColor?: 'red' | 'blue'
    }
  }
}

// Всегда важно убедиться, что вы импортируете/экспортируете что-либо при расширении типа.
export {}

Стратегия слияния

Nuxt использует специальную стратегию слияния для AppConfig в слоях вашего приложения.

Эта стратегия реализуется с помощью Function Merger, который позволяет определить пользовательскую стратегию слияния для каждого ключа в app.config, имеющего массив в качестве значения.

Вот пример того, как это можно использовать:

export default 
defineAppConfig
({
  // Значение массива по умолчанию
  
array
: ['hello'],
})

Known Limitations

As of Nuxt v3.3, the app.config.ts file is shared with Nitro, which results in the following limitations:

1. You cannot import Vue components directly in app.config.ts.
2. Some auto-imports are not available in the Nitro context.

These limitations occur because Nitro processes the app config without full Vue component support.

While it's possible to use Vite plugins in the Nitro config as a workaround, this approach is not recommended:

export default defineNuxtConfig({
  nitro: {
    vite: {
      plugins: [vue()]
    }
  }
})

Related issues:

• Issue #19858
• Issue #19854