app.config.ts

Nuxt 3는 라이프사이클 내에서 런타임에 업데이트하거나 nuxt 플러그인을 사용하고 HMR(핫 모듈 교체)로 편집할 수 있는 기능을 통해 애플리케이션 내 반응 구성을 노출하는 app.config 구성 파일을 제공한다.

 

app.config.ts 파일을 사용하여 런타임 앱 구성을 쉽게 제공할 수 있다. 확장자는 .ts, .js 또는 .mjs 중 하나일 수 있다.

 

app.config.ts

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

 

app.config 파일 안에 비밀 값을 넣으면 안된다. 이는 사용자 클라이언트 번들에 노출된다.

 

구성 및 환경 변수를 앱의 나머지 부분에 노출하려면 app.config 파일에서 구성을 정의해야한다.

 

app.config.ts

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

app.config에 테마를 추가할 때 Nuxt는 Vite 또는 webpack을 사용하여 코드를 묶는다. 페이지를 서버에서 렌더링할 때와 useAppConfig 컴포저블을 사용하여 브라우저에서 테마에 보편적으로 액세스할 수 있다.

 

pages/index.vue

<!--
pages/index.vue
-->

<script setup>
const appConfig = useAppConfig()

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

사용자 정의 srcDir을 구성할 때 app.config 파일을 새 srcDir 경로의 루트에 배치해야 한다.

 

App Config 수동 입력

Nuxt는 제공된 앱 구성에서 TypeScript 인터페이스를 자동으로 생성하려고 시도하므로 직접 입력할 필요가 없다.

 

그러나 직접 입력하고 싶은 경우도 있을텐데. 입력할 수 있는 항목은 두 가지다.

 

AppConfigInput

AppConfigInput은 앱 구성을 설정할 때 유효한 입력 옵션이 무엇인지 선언하는 모듈 작성자가 사용할 수 있다. 이는 useAppConfig() 유형에 영향을 미치지 않는다.

 

index.d.ts

declare module 'nuxt/schema' {
  interface AppConfigInput {
    /** Theme configuration */
    theme?: {
      /** Primary app color */
      primaryColor?: string
    }
  }
}

// It is always important to ensure you import/export something when augmenting a type
export {}

 

AppConfigOutput

useAppConfig() 호출 결과를 입력하려면 AppConfig를 확장해야한다.

 

실제로 정의된 앱 구성에서 Nuxt가 추론하는 유형을 덮어쓰게 되므로 AppConfig를 입력할 때 주의하자.

 

index.d.ts

// index.d.ts

declare module 'nuxt/schema' {
  interface AppConfig {
    // This will entirely replace the existing inferred `theme` property
    theme: {
      // You might want to type this value to add more specific types than Nuxt can infer,
      // such as string literal types
      primaryColor?: 'red' | 'blue'
    }
  }
}

// It is always important to ensure you import/export something when augmenting a type
export {}

 

병합 전략

Nuxt는 애플리케이션의 AppConfig 내부 레이어에 대해 사용자 정의 병합 전략을 사용한다.

 

이 전략은 값으로 배열이 있는 app.config 의 모든 키에 대해 사용자 정의 병합 전략을 정의할 수 있는 Function Merger를 사용하여 구현된다.

 

Function Merger는 애플리케이션의 기본app.config에서만 사용해야한다.

 

사용 예

layer/app.config.ts

layer/app.config.ts

export default defineAppConfig({
  // Default array value
  array: ['hello'],
})

 

app.config.ts

// app.config.ts

export default defineAppConfig({
  // Overwrite default array value by using a merger function
  array: () => ['bonjour'],
})