useAppConfig

프로젝트에 설정된 app config 를 불러온다.

 

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

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

 

사용예

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

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

 

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

 

App Config 구성

Nuxt는 제공된 앱 구성에서 TypeScript 인터페이스를 자동으로 생성하려고 시도하므로 직접 입력할 필요가 없다.
그러나 직접 입력하고 싶은 경우도 있다. 입력할 수 있는 항목은 두 가지다.

 

App Config Input

 AppConfigInput 앱 구성을 설정할 때 유효한 입력 옵션이 무엇인지 선언할 수 있다. 이는 useAppConfig() 의 type 에 영향을 미치지 않는다.

 

// 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 {}

 

App Config Output

useAppConfig() 호출 결과를 입력하려면 AppConfig 를 확장하는 것이 좋습니다.

주의) 실제로 정의된 앱 구성에서 Nuxt가 추론하는 유형을 덮어쓰게 되므로 AppConfig 에 type 을 적용할 때 주의한다.

// 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 {}

 

App Config 병합 전략

Nuxt는 애플리케이션 레이어내 에서 AppConfig 를 위한 맞춤형 병합 전략을 사용한다 .
이 전략은 app.config 내에 배열을 값으로 갖는 모든 키에 대해 사용자 정의 병합 전략을 정의할 수 있는 Function Merger 를 사용하여 구현된다.

Function Merger는 애플리케이션 기반 app.config 에서만 사용해야 합니다.

 

사용 예

// layer/app.config

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

// app.config.ts

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