Nuxt는 app/app.config.ts 설정 파일을 제공하여, 라이프사이클 내에서 또는 Nuxt 플러그인을 사용해 런타임에 업데이트하고 HMR(핫 모듈 교체)로 수정할 수 있는 반응형 설정을 애플리케이션 내에 노출할 수 있게 합니다.
app.config.ts 파일을 사용하면 런타임 앱 설정을 쉽게 제공할 수 있습니다. 이 파일은 .ts, .js, .mjs 확장자를 가질 수 있습니다.
export default defineAppConfig({
foo: 'bar',
})
app.config 파일 안에 어떤 비밀 값도 넣지 마세요. 이 파일은 사용자 클라이언트 번들에 노출됩니다.앱의 나머지 부분에 설정과 환경 변수를 노출하려면, app.config 파일에 설정을 정의해야 합니다.
export default defineAppConfig({
theme: {
primaryColor: '#ababab',
},
})
이제 useAppConfig 컴포저블을 사용하여 서버 렌더링 시와 브라우저에서 모두 theme에 범용적으로 접근할 수 있습니다.
<script setup lang="ts">
const appConfig = useAppConfig()
console.log(appConfig.theme)
</script>
updateAppConfig 유틸리티를 사용하면 런타임에 app.config를 업데이트할 수 있습니다.
<script setup>
const appConfig = useAppConfig() // { foo: 'bar' }
const newAppConfig = { foo: 'baz' }
updateAppConfig(newAppConfig)
console.log(appConfig) // { foo: 'baz' }
</script>
Nuxt는 제공된 app config로부터 TypeScript 인터페이스를 자동으로 생성하려고 시도하므로, 직접 타입을 정의할 필요가 없습니다.
하지만, 직접 타입을 정의하고 싶은 경우도 있을 수 있습니다. 타입을 지정하고 싶은 것은 두 가지가 있을 수 있습니다.
AppConfigInput은 모듈 작성자가 app config를 설정할 때 유효한 입력 옵션이 무엇인지 선언하는 데 사용할 수 있습니다. 이는 useAppConfig()의 타입에는 영향을 주지 않습니다.
declare module 'nuxt/schema' {
interface AppConfigInput {
/** 테마 설정 */
theme?: {
/** 기본 앱 색상 */
primaryColor?: string
}
}
}
// 타입을 보강(augment)할 때는 항상 무언가를 import/export 하는 것이 중요합니다
export {}
useAppConfig()를 호출한 결과에 타입을 지정하고 싶다면, AppConfig를 확장하면 됩니다.
AppConfig에 타입을 지정할 때는 주의해야 합니다. 실제로 정의한 app config로부터 Nuxt가 추론한 타입을 덮어쓰게 됩니다.declare module 'nuxt/schema' {
interface AppConfig {
// 이는 기존에 추론된 `theme` 속성을 완전히 대체합니다
theme: {
// Nuxt가 추론할 수 있는 것보다 더 구체적인 타입(예: 문자열 리터럴 타입)을
// 추가하기 위해 이 값을 타입으로 지정하고 싶을 수 있습니다
primaryColor?: 'red' | 'blue'
}
}
}
// 타입을 보강(augment)할 때는 항상 무언가를 import/export 하는 것이 중요합니다
export {}
Nuxt는 애플리케이션의 레이어 내에서 AppConfig에 대해 커스텀 병합 전략을 사용합니다.
이 전략은 Function Merger를 사용해 구현되며, 배열을 값으로 가지는 app.config의 각 키에 대해 커스텀 병합 전략을 정의할 수 있게 해줍니다.
app.config에서는 사용할 수 없습니다.다음은 이를 사용하는 방법의 예시입니다:
export default defineAppConfig({
// 기본 배열 값
array: ['hello'],
})
export default defineAppConfig({
// 병합 함수를 사용하여 기본 배열 값을 덮어씁니다
array: () => ['bonjour'],
})
Nuxt v3.3 기준으로, app.config.ts 파일은 Nitro와 공유되며, 이로 인해 다음과 같은 제한 사항이 발생합니다:
app.config.ts에서 Vue 컴포넌트를 직접 import할 수 없습니다.이러한 제한은 Nitro가 전체 Vue 컴포넌트 지원 없이 app config를 처리하기 때문에 발생합니다.
우회 방법으로 Nitro 설정에서 Vite 플러그인을 사용하는 것이 가능하긴 하지만, 이 접근 방식은 권장되지 않습니다:
export default defineNuxtConfig({
nitro: {
vite: {
plugins: [vue()],
},
},
})
관련 이슈: