기본적으로 Nuxt는 대부분의 사용 사례를 다루도록 구성되어 있습니다. nuxt.config.ts 파일은 이 기본 구성을 재정의하거나 확장할 수 있습니다.

Nuxt 구성

nuxt.config.ts 파일은 Nuxt 프로젝트의 루트에 위치하며 애플리케이션의 동작을 재정의하거나 확장할 수 있습니다.

최소한의 구성 파일은 구성과 함께 객체를 포함하는 defineNuxtConfig 함수를 내보냅니다. defineNuxtConfig 헬퍼는 전역적으로 사용할 수 있으며 import가 필요하지 않습니다.

export default defineNuxtConfig({
  // My Nuxt config
})

이 파일은 문서에서 자주 언급되며, 예를 들어 사용자 정의 스크립트를 추가하거나 모듈을 등록하거나 렌더링 모드를 변경하는 데 사용됩니다.

환경 재정의

nuxt.config에서 완전히 타입화된 환경별 재정의를 구성할 수 있습니다.

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

Nuxt CLI 명령을 실행할 때 환경을 선택하려면 --envName 플래그에 이름을 전달하면 됩니다. 예: nuxt build --envName staging.

이러한 재정의 뒤에 있는 메커니즘에 대해 더 알고 싶다면, 환경별 구성에 대한 c12 문서를 참조하세요.

환경 변수 및 비공개 토큰

runtimeConfig API는 환경 변수와 같은 값을 애플리케이션의 나머지 부분에 노출합니다. 기본적으로 이러한 키는 서버 측에서만 사용할 수 있습니다. runtimeConfig.public 및 Nuxt 내부에서 사용되는 runtimeConfig.app 내의 키는 클라이언트 측에서도 사용할 수 있습니다.

이러한 값은 nuxt.config에서 정의되어야 하며 환경 변수를 사용하여 재정의할 수 있습니다.

export default defineNuxtConfig({
  runtimeConfig: {
    // 서버 측에서만 사용할 수 있는 비공개 키
    apiSecret: '123',
    // public 내의 키는 클라이언트 측에서도 노출됩니다
    public: {
      apiBase: '/api'
    }
  }
})

이 변수들은 useRuntimeConfig() 컴포저블을 사용하여 애플리케이션의 나머지 부분에 노출됩니다.

const runtimeConfig = useRuntimeConfig()

앱 구성

app.config.ts 파일은 소스 디렉토리(기본적으로 프로젝트의 루트)에 위치하며 빌드 시점에 결정될 수 있는 공개 변수를 노출하는 데 사용됩니다. runtimeConfig 옵션과 달리, 환경 변수를 사용하여 재정의할 수 없습니다.

최소한의 구성 파일은 구성과 함께 객체를 포함하는 defineAppConfig 함수를 내보냅니다. defineAppConfig 헬퍼는 전역적으로 사용할 수 있으며 import가 필요하지 않습니다.

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

이 변수들은 useAppConfig 컴포저블을 사용하여 애플리케이션의 나머지 부분에 노출됩니다.

const appConfig = useAppConfig()

runtimeConfig vs. app.config

위에서 언급했듯이, runtimeConfig와 app.config는 모두 애플리케이션의 나머지 부분에 변수를 노출하는 데 사용됩니다. 어느 것을 사용해야 할지 결정하기 위해 다음 가이드라인을 참고하세요:

• runtimeConfig: 빌드 후 환경 변수를 사용하여 지정해야 하는 비공개 또는 공개 토큰.
• app.config: 빌드 시점에 결정되는 공개 토큰, 테마 변형, 제목 및 민감하지 않은 프로젝트 구성과 같은 웹사이트 구성.

외부 구성 파일

Nuxt는 nuxt.config.ts 파일을 구성의 단일 진실의 원천으로 사용하며 외부 구성 파일을 읽지 않습니다. 프로젝트를 빌드하는 과정에서 이를 구성해야 할 필요가 있을 수 있습니다. 다음 표는 일반적인 구성과, 해당되는 경우 Nuxt로 구성하는 방법을 강조합니다.

다음은 다른 일반적인 구성 파일 목록입니다:

Vue 구성

Vite와 함께

@vitejs/plugin-vue 또는 @vitejs/plugin-vue-jsx에 옵션을 전달해야 하는 경우, nuxt.config 파일에서 이를 수행할 수 있습니다.

• @vitejs/plugin-vue의 경우 vite.vue. 사용 가능한 옵션을 확인하세요.
• @vitejs/plugin-vue-jsx의 경우 vite.vueJsx. 사용 가능한 옵션을 확인하세요.

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

webpack과 함께

webpack을 사용하고 vue-loader를 구성해야 하는 경우, nuxt.config 파일 내의 webpack.loaders.vue 키를 사용하여 이를 수행할 수 있습니다. 사용 가능한 옵션은 여기에 정의되어 있습니다.

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

실험적인 Vue 기능 활성화

Vue에서 propsDestructure와 같은 실험적인 기능을 활성화해야 할 수도 있습니다. Nuxt는 사용 중인 빌더에 관계없이 nuxt.config.ts에서 이를 쉽게 활성화할 수 있는 방법을 제공합니다:

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

Vue 3.4 및 Nuxt 3.9에서의 실험적 reactivityTransform 마이그레이션

Nuxt 3.9 및 Vue 3.4 이후로, reactivityTransform은 Vue에서 Vue Macros로 이동되었으며, 이는 Nuxt 통합을 제공합니다.