기능

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
  }
})