기능

Nuxt의 일부 기능은 옵트인 방식으로 제공되거나, 필요에 따라 비활성화할 수 있습니다.

features

devLogs

개발 중에 서버 로그를 클라이언트로 스트리밍합니다. 이러한 로그는 dev:ssr-logs 훅에서 처리할 수 있습니다.

기본적으로, 테스트 모드가 활성화되어 있지 않은 개발 환경에서 활성화됩니다.

silent로 설정하면, 로그가 브라우저 콘솔에 출력되지 않습니다.

export default defineNuxtConfig({
  features: {
    devLogs: true,
  },
})

inlineStyles

HTML을 렌더링할 때 스타일을 인라인으로 삽입합니다. 현재는 Vite를 사용할 때만 사용할 수 있습니다.

또한 Vue 컴포넌트의 경로를 인자로 받아 해당 컴포넌트의 스타일을 인라인할지 여부를 나타내는 불리언을 반환하는 함수를 전달할 수도 있습니다.

기본값은 (id) => id.includes('.vue') 입니다.

export default defineNuxtConfig({
  features: {
    inlineStyles: false, // 또는 인라인 여부를 결정하는 함수
  },
})

noScripts

Nuxt 스크립트와 JavaScript 리소스 힌트의 렌더링을 끕니다. routeRules 내에서 세밀하게 설정할 수도 있습니다.

또한 routeRules 내에서 더 세밀하게 스크립트를 비활성화할 수 있습니다.

'production' 또는 true로 설정하면, 프로덕션 모드에서만 JavaScript가 비활성화됩니다. 'all'로 설정하면, 개발 및 프로덕션 모드 모두에서 JavaScript가 비활성화됩니다.

export default defineNuxtConfig({
  features: {
    noScripts: true, // 또는 'production' | 'all' | false
  },
})

future

향후(주요 버전일 수도 있는) 프레임워크 버전에서 기본값이 될 새로운 기능을 미리 옵트인하기 위한 future 네임스페이스도 있습니다.

compatibilityVersion

Nuxt 기능 또는 플래그에 대한 조기 접근을 활성화합니다.

compatibilityVersion을 5로 설정하면, Nuxt 설정 전반의 기본값이 Nuxt v5 동작을 따르도록 변경되며, 여기에는 Vite Environment API 활성화도 포함됩니다.

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 5,
  },
})

multiApp

실험적인 멀티 앱 지원에 대한 조기 접근을 활성화합니다. Nuxt에서 멀티 앱 지원의 진행 상황은 트래커 이슈 #21635를 통해 확인할 수 있습니다.

export default defineNuxtConfig({
  future: {
    multiApp: true,
  },
})

typescriptBundlerResolution

TypeScript에 대해 'Bundler' 모듈 해석 모드를 활성화하며, 이는 Nuxt 및 Vite와 같은 프레임워크에 권장되는 설정입니다.

exports를 사용하는 최신 라이브러리를 사용할 때 타입 지원을 향상시킵니다.

원래 TypeScript 풀 리퀘스트를 참고하세요.

기본적으로 TypeScript의 기본값인 레거시 'Node' 모드를 사용하려면 false로 설정할 수 있습니다.

export default defineNuxtConfig({
  future: {
    typescriptBundlerResolution: false,
  },
})