Nuxt의 일부 기능은 선택적으로 사용할 수 있으며, 필요에 따라 비활성화할 수 있습니다.

features

inlineStyles

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

Vue 컴포넌트의 경로를 받아 해당 컴포넌트의 스타일을 인라인으로 삽입할지 여부를 반환하는 함수를 전달할 수도 있습니다.

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

noScripts

Nuxt 스크립트와 JS 리소스 힌트의 렌더링을 비활성화합니다. routeRules 내에서 세부적으로 구성할 수도 있습니다.

export default defineNuxtConfig({
  features: {
    noScripts: true
  }
})

future

미래의 (아마도 주요) 버전에서 기본이 될 새로운 기능을 조기에 선택할 수 있는 future 네임스페이스도 있습니다.

compatibilityVersion

이 옵션은 Nuxt 기능이나 플래그에 대한 조기 액세스를 활성화합니다.

compatibilityVersion을 4로 설정하면 Nuxt 구성 전반에 걸쳐 Nuxt v4 동작을 선택할 수 있지만, 테스트 시 Nuxt v3 동작을 세부적으로 다시 활성화할 수 있습니다 (예제를 참조하세요). 문제가 발생하면 Nuxt 또는 생태계에서 해결할 수 있도록 이슈를 제기해 주세요.

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4,
  },
  // _모든_ Nuxt v3 동작을 다시 활성화하려면 다음 옵션을 설정하세요:
  srcDir: '.',
  dir: {
    app: 'app'
  },
  experimental: {
    scanPageMeta: 'after-resolve',
    sharedPrerenderData: false,
    compileTemplate: true,
    resetAsyncDataToUndefined: true,
    templateUtils: true,
    relativeWatchPaths: true,
    normalizeComponentNames: false
    defaults: {
      useAsyncData: {
        deep: true
      }
    }
  },
  features: {
    inlineStyles: true
  },
  unhead: {
    renderSSRHeadOptions: {
      omitLineBreaks: false
    }
  }
})

typescriptBundlerResolution

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

exports를 사용하는 현대적인 라이브러리와 함께 사용할 때 타입 지원을 개선합니다.

원본 TypeScript 풀 리퀘스트를 참조하세요.

export default defineNuxtConfig({
  future: {
    typescriptBundlerResolution: true
  }
})