Nuxt 설정

nuxt.config.ts 파일에서 사용할 수 있는 모든 옵션을 알아보세요.

alias

JavaScript와 CSS 내에서 커스텀 디렉터리에 접근하기 위한 추가 별칭(alias)을 정의하여 DX를 향상시킬 수 있습니다.

  • 타입: object
  • 기본값
{
  "~": "/<srcDir>",
  "@": "/<srcDir>",
  "~~": "/<rootDir>",
  "@@": "/<rootDir>",
  "#shared": "/<rootDir>/shared",
  "assets": "/<srcDir>/assets",
  "public": "/<rootDir>/public",
  "#build": "/<rootDir>/.nuxt",
  "#internal/nuxt/paths": "/<rootDir>/.nuxt/paths.mjs"
}
참고: webpack 컨텍스트(이미지 소스, CSS - JavaScript는 제외) 내에서는 별칭에 접근할 때 반드시 ~를 접두사로 붙여야 합니다.
참고: 이 별칭들은 자동으로 생성된 TypeScript 설정(.nuxt/tsconfig.app.json, .nuxt/tsconfig.server.json 등)에 추가되므로 전체 타입 지원과 경로 자동 완성을 사용할 수 있습니다. 생성된 설정에서 제공하는 옵션을 더 확장해야 하는 경우, 여기 또는 nuxt.config의 typescript.tsConfig 속성 내에 추가해야 합니다.

예시:

import { fileURLToPath } from 'node:url'

export default defineNuxtConfig({
  alias: {
    'images': fileURLToPath(new URL('./assets/images', import.meta.url)),
    'style': fileURLToPath(new URL('./assets/style', import.meta.url)),
    'data': fileURLToPath(new URL('./assets/other/data', import.meta.url)),
  },
})

<template>
  <img src="~images/main-bg.jpg">
</template>

<script>
import data from 'data/test.json'
</script>

<style>
// 아래 주석을 해제하세요
//@import '~style/variables.scss';
//@import '~style/utils.scss';
//@import '~style/base.scss';
body {
  background-image: url('~images/main-bg.jpg');
}
</style>

analyzeDir

nuxt analyze를 실행할 때 Nuxt가 생성된 파일을 저장할 디렉터리입니다.

상대 경로를 지정하면 rootDir을 기준으로 합니다.

  • 타입: string
  • 기본값: "/<rootDir>/.nuxt/analyze"

app

Nuxt 앱 설정.

baseURL

Nuxt 애플리케이션의 기본 경로입니다.

예시:

  • 타입: string
  • 기본값: "/"

예시:

export default defineNuxtConfig({
  app: {
    baseURL: '/prefix/',
  },
})

NUXT_APP_BASE_URL 환경 변수를 설정하여 런타임에 설정할 수도 있습니다.

예시:

NUXT_APP_BASE_URL=/prefix/ node .output/server/index.mjs

buildAssetsDir

빌드된 사이트 에셋의 폴더 이름으로, baseURL(또는 설정된 경우 cdnURL)을 기준으로 합니다. 이는 빌드 시에 설정되며 런타임에 커스터마이즈해서는 안 됩니다.

  • 타입: string
  • 기본값: "/_nuxt/"

cdnURL

public 폴더를 제공할 절대 URL(프로덕션 전용)입니다.

예시:

  • 타입: string
  • 기본값: ""

예시:

export default defineNuxtConfig({
  app: {
    cdnURL: 'https://mycdn.org/',
  },
})

NUXT_APP_CDN_URL 환경 변수를 설정하여 런타임에 다른 값으로 설정할 수 있습니다.

예시:

NUXT_APP_CDN_URL=https://mycdn.org/ node .output/server/index.mjs

head

모든 페이지의 <head>에 대한 기본 설정을 지정합니다.

  • 타입: object
  • 기본값
{
  "meta": [
    {
      "name": "viewport",
      "content": "width=device-width, initial-scale=1"
    },
    {
      "charset": "utf-8"
    }
  ],
  "link": [],
  "style": [],
  "script": [],
  "noscript": []
}

예시:

export default defineNuxtConfig({
  app: {
    head: {
      meta: [
      // <meta name="viewport" content="width=device-width, initial-scale=1">
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      ],
      script: [
      // <script src="https://myawesome-lib.js"></script>
        { src: 'https://awesome-lib.js' },
      ],
      link: [
      // <link rel="stylesheet" href="https://myawesome-lib.css">
        { rel: 'stylesheet', href: 'https://awesome-lib.css' },
      ],
      // 이 영역은 변경될 가능성이 있다는 점에 유의하세요
      style: [
      // <style>:root { color: red }</style>
        { textContent: ':root { color: red }' },
      ],
      noscript: [
      // <noscript>JavaScript is required</noscript>
        { textContent: 'JavaScript is required' },
      ],
    },
  },
})

keepalive

페이지 간 KeepAlive 설정의 기본값입니다.

개별 페이지에서 definePageMeta로 재정의할 수 있습니다. JSON으로 직렬화 가능한 값만 허용됩니다.

  • 타입: boolean
  • 기본값: false

참고: Vue KeepAlive

layoutTransition

레이아웃 전환에 대한 기본값입니다.

개별 페이지에서 definePageMeta로 재정의할 수 있습니다. JSON으로 직렬화 가능한 값만 허용됩니다.

  • 타입: boolean
  • 기본값: false

참고: Vue Transition 문서

pageTransition

페이지 전환에 대한 기본값입니다.

개별 페이지에서 definePageMeta로 재정의할 수 있습니다. JSON으로 직렬화 가능한 값만 허용됩니다.

  • 타입: boolean
  • 기본값: false

참고: Vue Transition 문서

rootAttrs

Nuxt 루트 엘리먼트의 id를 커스터마이즈합니다.

  • 타입: object
  • 기본값
{
  "id": "__nuxt"
}

rootId

Nuxt 루트 엘리먼트의 id를 커스터마이즈합니다.

  • 타입: string
  • 기본값: "__nuxt"

rootTag

Nuxt 루트 엘리먼트의 태그를 커스터마이즈합니다.

  • 타입: string
  • 기본값: "div"

spaLoaderAttrs

Nuxt SPA 로딩 템플릿 엘리먼트의 속성을 커스터마이즈합니다.

  • 타입: object
  • 기본값:
{
"id": "__nuxt-loader"
}

id

  • 타입: string
  • 기본값: "__nuxt-loader"

spaLoaderTag

Nuxt SpaLoader 엘리먼트의 태그를 커스터마이즈합니다.

  • 타입: string
  • 기본값: "div"

teleportAttrs

Nuxt Teleport 엘리먼트의 속성을 커스터마이즈합니다.

  • 타입: object
  • 기본값
{
  "id": "teleports"
}

teleportId

Nuxt Teleport 엘리먼트의 id를 커스터마이즈합니다.

  • 타입: string
  • 기본값: "teleports"

teleportTag

Nuxt Teleport 엘리먼트의 태그를 커스터마이즈합니다.

  • 타입: string
  • 기본값: "div"

viewTransition

뷰 전환에 대한 기본값입니다.

이는 View Transitions에 대한 실험적 지원이 nuxt.config 파일에서 활성화된 경우에만 효과가 있습니다. 개별 페이지에서 definePageMeta로 재정의할 수 있습니다.

  • 타입: boolean
  • 기본값: false

참고: Nuxt View Transition API 문서

appConfig

추가 앱 설정

프로그래밍 방식 사용 및 타입 지원을 위해 이 옵션으로 앱 설정을 직접 제공할 수 있습니다. 이는 기본값으로 app.config 파일과 병합됩니다.

nuxt

appId

멀티 앱 프로젝트에서 Nuxt 애플리케이션의 고유 id입니다.

기본값은 nuxt-app입니다.

  • 타입: string
  • 기본값: "nuxt-app"

build

공유 빌드 설정.

analyze

Nuxt는 번들을 시각화하고 최적화 방법을 파악할 수 있도록 합니다.

true로 설정하여 번들 분석을 활성화하거나, 옵션이 포함된 객체를 전달하세요: webpack용 또는 vite용.

  • 타입: object
  • 기본값
{
  "template": "treemap",
  "projectRoot": "/<rootDir>",
  "filename": "/<rootDir>/.nuxt/analyze/{name}.html"
}

예시:

export default defineNuxtConfig({
  analyze: {
    analyzerMode: 'static',
  },
})

templates

이 옵션 대신 @nuxt/kit의 addTemplate 사용을 권장합니다.

  • 타입: array

예시:

export default defineNuxtConfig({
  build: {
    templates: [
      {
        src: '~/modules/support/plugin.js', // `src`는 절대 또는 상대 경로일 수 있습니다
        dst: 'support.js', // `dst`는 프로젝트 `.nuxt` 디렉터리를 기준으로 합니다
      },
    ],
  },
})

transpile

특정 의존성을 Babel로 트랜스파일링하고 싶다면 여기 추가할 수 있습니다. transpile의 각 항목은 패키지 이름, 함수, 문자열 또는 의존성 파일 이름과 일치하는 정규식 객체가 될 수 있습니다.

또한 조건부로 트랜스파일하기 위해 함수를 사용할 수도 있습니다. 함수는 ({ isDev, isServer, isClient, isModern, isLegacy }) 객체를 인자로 받습니다.

  • 타입: array

예시:

export default defineNuxtConfig({
  build: {
    transpile: [({ isLegacy }) => isLegacy && 'ky'],
  },
})

buildDir

빌드된 Nuxt 파일이 배치될 디렉터리를 정의합니다.

많은 도구는 .nuxt가 .으로 시작하기 때문에 숨김 디렉터리라고 가정합니다. 이것이 문제가 된다면, 이 옵션을 사용하여 이를 방지할 수 있습니다.

  • 타입: string
  • 기본값: "/<rootDir>/.nuxt"

예시:

export default defineNuxtConfig({
  buildDir: 'nuxt-build',
})

buildId

빌드와 일치하는 고유 식별자입니다. 여기에는 프로젝트의 현재 상태에 대한 해시가 포함될 수 있습니다.

  • 타입: string
  • 기본값: "4a2e2d30-418f-41df-8e58-ed5df06de7fd"

builder

애플리케이션의 Vue 부분을 번들링하는 데 사용할 빌더입니다.

Nuxt는 클라이언트 측 애플리케이션을 위해 여러 빌더를 지원합니다. 기본적으로 Vite가 사용되지만, webpack, Rspack으로 전환하거나 커스텀 빌더 구현을 제공할 수도 있습니다.

  • 타입: 'vite' | 'webpack' | 'rspack' | string | { bundle: (nuxt: Nuxt) => Promise<void> }
  • 기본값: "@nuxt/vite-builder"

지원되는 빌더 사용:

export default defineNuxtConfig({
  // 기본값 - @nuxt/vite-builder 사용
  // builder: 'vite',

  // @nuxt/webpack-builder 사용
  // builder: 'webpack',

  // @nuxt/rspack-builder 사용
  builder: 'rspack',
})

webpack 또는 rspack을 사용하는 경우, 프로젝트에 @nuxt/webpack-builder 또는 @nuxt/rspack-builder가 명시적으로 설치되어 있어야 합니다.

커스텀 빌더 객체 사용:

bundle 함수를 가진 객체를 전달하여 커스텀 빌더를 제공할 수 있습니다:

export default defineNuxtConfig({
  builder: {
    async bundle (nuxt) {
      const entry = await resolvePath(resolve(nuxt.options.appDir, 'entry'))

      // 클라이언트와 서버 번들 빌드
      await buildClient(nuxt, entry)
      if (nuxt.options.ssr) {
        await buildServer(nuxt, entry)
      }

      // ... 실제로는 이보다 훨씬 더 복잡합니다!
    },
  },
})

커스텀 빌더 패키지 생성:

별도 패키지로 커스텀 빌더를 생성하려면 bundle 함수를 export해야 합니다. 그런 다음 nuxt.config.ts에서 패키지 이름을 지정할 수 있습니다:

export default defineNuxtConfig({
  builder: 'my-custom-builder',
})

compatibilityDate

앱에 대한 호환성 날짜를 지정합니다.

이는 Nitro, Nuxt Image 및 메이저 버전 업 없이 동작이 변경될 수 있는 기타 모듈에서 프리셋 동작을 제어하는 데 사용됩니다. 향후 이 기능을 위한 도구를 개선할 계획입니다.

components

Nuxt 컴포넌트 자동 등록을 설정합니다.

여기에 설정된 디렉터리 내의 모든 컴포넌트는 페이지, 레이아웃(및 기타 컴포넌트) 전체에서 명시적으로 import하지 않고도 사용할 수 있습니다.

  • 타입: object
  • 기본값
{
  "dirs": [
    {
      "path": "~/components/global",
      "global": true
    },
    "~/components"
  ]
}

참고: app/components/ 디렉터리 문서

css

모든 페이지에 전역으로 설정(포함)하고 싶은 CSS 파일/모듈/라이브러리를 정의할 수 있습니다.

Nuxt는 확장자를 통해 파일 타입을 자동으로 추론하고 적절한 전처리기를 사용합니다. 다만, 필요한 로더는 직접 설치해야 합니다.

  • 타입: array

예시:

export default defineNuxtConfig({
  css: [
  // Node.js 모듈을 직접 로드합니다(여기서는 Sass 파일).
    'bulma',
    // 프로젝트 내 CSS 파일
    '~/assets/css/main.css',
    // 프로젝트 내 SCSS 파일
    '~/assets/css/main.scss',
  ],
})

debug

true로 설정하면 디버그 모드를 활성화합니다.

현재는 서버에서 훅 이름과 타이밍을 출력하고, 브라우저에서도 훅 인자를 로그로 남깁니다. 또한 특정 디버그 옵션을 활성화하기 위해 객체로 설정할 수도 있습니다.

  • 타입: boolean
  • 기본값: false

dev

Nuxt가 개발 모드에서 실행 중인지 여부입니다.

일반적으로 이 값을 설정할 필요는 없습니다.

  • 타입: boolean
  • 기본값: false

devServer

cors

개발 서버의 CORS 옵션을 설정합니다.

origin

  • 타입: array
  • 기본값
[
  {}
]

host

개발 서버가 리스닝할 호스트

https

HTTPS 활성화 여부입니다.

  • 타입: boolean
  • 기본값: false

예시:

export default defineNuxtConfig({
  devServer: {
    https: {
      key: './server.key',
      cert: './server.crt',
    },
  },
})

loadingTemplate

로딩 화면을 표시할 템플릿

  • 타입: function

port

개발 서버가 리스닝할 포트

  • 타입: number
  • 기본값: 3000

url

리스닝 중인 개발 서버 URL입니다.

이는 항상 개발 서버에 의해 전체 URL로 덮어써지므로 직접 설정해서는 안 됩니다(모듈 및 내부 사용용).

  • 타입: string
  • 기본값: "http://localhost:3000"

devServerHandlers

Nitro 개발 전용 서버 핸들러입니다.

  • 타입: array

참고: Nitro 서버 라우트 문서

devtools

개발을 위해 Nuxt DevTools를 활성화합니다.

DevTools에 대한 변경 사항은 Nuxt 버전에 반영되지 않을 수 있습니다.

참고: 자세한 내용은 Nuxt DevTools를 참고하세요.

dir

Nuxt에서 사용하는 기본 디렉터리 구조를 커스터마이즈합니다.

필요한 경우가 아니라면 기본값을 사용하는 것이 좋습니다.

app

  • 타입: string
  • 기본값: "app"

assets

에셋 디렉터리입니다(빌드에서 ~assets로 별칭 처리됨).

  • 타입: string
  • 기본값: "app/assets"

layouts

레이아웃 디렉터리로, 각 파일은 Nuxt 레이아웃으로 자동 등록됩니다.

  • 타입: string
  • 기본값: "app/layouts"

middleware

미들웨어 디렉터리로, 각 파일은 Nuxt 미들웨어로 자동 등록됩니다.

  • 타입: string
  • 기본값: "app/middleware"

modules

모듈 디렉터리로, 각 파일은 Nuxt 모듈로 자동 등록됩니다.

  • 타입: string
  • 기본값: "modules"

pages

애플리케이션 페이지 라우트를 자동 생성하기 위해 처리될 디렉터리입니다.

  • 타입: string
  • 기본값: "app/pages"

plugins

플러그인 디렉터리로, 각 파일은 Nuxt 플러그인으로 자동 등록됩니다.

  • 타입: string
  • 기본값: "app/plugins"

public

정적 파일을 포함하는 디렉터리로, Nuxt 서버를 통해 직접 접근 가능하며 앱이 생성될 때 dist 폴더로 복사됩니다.

  • 타입: string
  • 기본값: "public"

shared

shared 디렉터리입니다. 이 디렉터리는 앱과 서버 간에 공유됩니다.

  • 타입: string
  • 기본값: "shared"

esbuild

options

Nuxt 내에서 사용되고 Vite 또는 webpack과 같은 다른 빌더에 전달되는 공유 esbuild 옵션을 설정합니다.

jsxFactory

  • 타입: string
  • 기본값: "h"

jsxFragment

  • 타입: string
  • 기본값: "Fragment"

target

  • 타입: string
  • 기본값: "esnext"

tsconfigRaw

  • 타입: object

experimental

Nuxt의 실험적 기능에 대해 더 알아보세요.

extends

여러 로컬 또는 원격 소스에서 프로젝트를 확장합니다.

값은 현재 설정을 기준으로 소스 디렉터리 또는 설정 경로를 가리키는 문자열 또는 문자열 배열이어야 합니다. github:, gh: gitlab: 또는 bitbucket:를 사용할 수 있습니다.

참고: 설정 레이어 확장에 대한 c12 문서

참고: giget 문서

extensions

Nuxt 리졸버가 해석해야 하는 확장자입니다.

  • 타입: array
  • 기본값
[
  ".js",
  ".jsx",
  ".mjs",
  ".ts",
  ".tsx",
  ".vue"
]

features

Nuxt의 옵트인 기능에 대해 더 알아보세요.

future

향후(메이저 버전일 수도 있는) 프레임워크 버전에서 기본값이 될 새로운 기능을 옵트인하는 방법에 대해 더 알아보세요.

hooks

훅은 일반적으로 모듈에서 사용되는 Nuxt 이벤트 리스너이지만, nuxt.config에서도 사용할 수 있습니다.

내부적으로 훅은 콜론을 사용하는 네이밍 패턴을 따릅니다(예: build:done). 설정을 쉽게 하기 위해, 아래와 같이 nuxt.config에서 계층적 객체로 구성할 수도 있습니다.

예시:

import fs from 'node:fs'
import path from 'node:path'

export default defineNuxtConfig({
  hooks: {
    build: {
      done (builder) {
        const extraFilePath = path.join(
          builder.nuxt.options.buildDir,
          'extra-file',
        )
        fs.writeFileSync(extraFilePath, 'Something extra')
      },
    },
  },
})

ignore

ignorePrefix보다 더 유연하게, ignore 배열에 지정된 glob 패턴과 일치하는 모든 파일은 빌드 시 무시됩니다.

  • 타입: array
  • 기본값
[
  "**/*.stories.{js,cts,mts,ts,jsx,tsx}",
  "**/*.{spec,test}.{js,cts,mts,ts,jsx,tsx}",
  "**/*.d.{cts,mts,ts}",
  "**/*.d.vue.{cts,mts,ts}",
  "**/.{pnpm-store,vercel,netlify,output,git,cache,data}",
  "**/*.sock",
  ".nuxt/analyze",
  ".nuxt",
  "**/-*.*"
]

ignoreOptions

Nuxt가 파일을 무시하는 데 사용하는 node-ignore에 옵션을 직접 전달합니다.

참고: node-ignore

예시:

export default defineNuxtConfig({
  ignoreOptions: {
    ignorecase: false,
  },
})

ignorePrefix

app/pages/, app/layouts/, app/middleware/, public/ 디렉터리 내의 파일 이름이 ignorePrefix로 지정된 접두사로 시작하면 빌드 과정에서 무시됩니다. 이는 특정 파일이 빌드된 애플리케이션에서 처리되거나 제공되지 않도록 하기 위한 것입니다. 기본적으로 ignorePrefix는 '-'로 설정되어, '-'로 시작하는 모든 파일을 무시합니다.

  • 타입: string
  • 기본값: "-"

imports

Nuxt가 애플리케이션에 컴포저블을 자동 import하는 방식을 설정합니다.

참고: Nuxt 문서

dirs

자동 import될 커스텀 디렉터리 배열입니다. 이 옵션은 기본 디렉터리(~/composables, ~/utils)를 덮어쓰지 않는다는 점에 유의하세요.

  • 타입: array

예시:

export default defineNuxtConfig({
  imports: {
  // `~/stores`에 정의된 pinia 스토어를 자동 import
    dirs: ['stores'],
  },
})

global

  • 타입: boolean
  • 기본값: false

scan

app/composables/ 및 app/utils/ 디렉터리에서 자동 import할 컴포저블을 스캔할지 여부입니다. vue 또는 nuxt에서의 import처럼 Nuxt 또는 다른 모듈에 의해 등록된 자동 import는 계속 활성화됩니다.

  • 타입: boolean
  • 기본값: true

logLevel

빌드 로그의 로그 레벨입니다.

CI에서 실행 중이거나 TTY를 사용할 수 없는 경우 기본값은 'silent'입니다. 이 옵션은 Vite에서는 'silent', webpack에서는 'none'으로 사용됩니다.

  • 타입: string
  • 기본값: "info"

modules

모듈은 Nuxt의 핵심 기능을 확장하고 무한한 통합을 추가할 수 있는 Nuxt 확장입니다.

각 모듈은 문자열(패키지를 가리키거나 파일 경로일 수 있음), 첫 번째 문자열로 모듈, 두 번째 객체로 옵션을 가지는 튜플, 또는 인라인 모듈 함수일 수 있습니다. Nuxt는 modules 배열의 각 항목을 node require 경로(node_modules 내)를 사용하여 해석하려 시도하고, ~ 별칭이 사용된 경우 프로젝트 srcDir에서 해석합니다.

  • 타입: array
참고: 모듈은 순차적으로 실행되므로 순서가 중요합니다. 먼저 nuxt.config.ts에 정의된 모듈이 로드됩니다. 그 다음 modules/ 디렉터리에서 발견된 모듈이 알파벳 순으로 로드됩니다.

예시:

export default defineNuxtConfig({
  modules: [
  // 패키지 이름 사용
    '@nuxt/scripts',
    // 프로젝트 srcDir 기준 상대 경로
    '~/custom-modules/awesome.js',
    // 옵션 제공
    ['@nuxtjs/google-analytics', { ua: 'X1234567' }],
    // 인라인 정의
    function () {},
  ],
})

modulesDir

경로 해석(예: webpack의 resolveLoading, nodeExternals, postcss)을 위한 모듈 디렉터리를 설정하는 데 사용됩니다.

설정 경로는 options.rootDir(기본값은 현재 작업 디렉터리)을 기준으로 합니다. 프로젝트가 yarn workspace 스타일의 모노레포로 구성된 경우 이 필드를 설정해야 할 수 있습니다.

  • 타입: array
  • 기본값
[
  "/<rootDir>/node_modules"
]

예시:

export default defineNuxtConfig({
  modulesDir: ['../../node_modules'],
})

nitro

Nitro 설정.

참고: Nitro 설정 문서

routeRules

  • 타입: object

runtimeConfig

  • 타입: object
  • 기본값
{
  "public": {},
  "app": {
    "buildId": "4a2e2d30-418f-41df-8e58-ed5df06de7fd",
    "baseURL": "/",
    "buildAssetsDir": "/_nuxt/",
    "cdnURL": ""
  },
  "nitro": {
    "envPrefix": "NUXT_"
  }
}

optimization

빌드 시간 최적화 설정.

asyncTransforms

await 이후에도 비동기 컨텍스트를 유지하는 unctx의 트랜스포머에 직접 전달되는 옵션입니다.

asyncFunctions

  • 타입: array
  • 기본값
[
  "defineNuxtPlugin",
  "defineNuxtRouteMiddleware"
]

objectDefinitions

defineNuxtComponent
  • 타입: array
  • 기본값
[
  "asyncData",
  "setup"
]
defineNuxtPlugin
  • 타입: array
  • 기본값
[
  "setup"
]
definePageMeta
  • 타입: array
  • 기본값
[
  "middleware",
  "validate"
]

keyedComposables

키를 주입할 함수들입니다.

함수에 전달되는 인자의 수가 argumentLength보다 적은 한, 서버와 클라이언트 간 요청을 중복 제거하는 데 사용할 수 있는 추가 매직 문자열이 주입됩니다. 이 추가 키를 처리하기 위한 조치를 취해야 합니다. 키는 파일 내에서 함수가 호출되는 위치를 기준으로 고유하게 생성됩니다.

  • 타입: array
  • 기본값
[
  {
    "name": "callOnce",
    "argumentLength": 3
  },
  {
    "name": "defineNuxtComponent",
    "argumentLength": 2
  },
  {
    "name": "useState",
    "argumentLength": 2
  },
  {
    "name": "useFetch",
    "argumentLength": 3
  },
  {
    "name": "useAsyncData",
    "argumentLength": 3
  },
  {
    "name": "useLazyAsyncData",
    "argumentLength": 3
  },
  {
    "name": "useLazyFetch",
    "argumentLength": 3
  }
]

treeShake

특정 빌드에서 코드를 트리 셰이킹합니다.

composables

서버 또는 클라이언트 빌드에서 컴포저블을 트리 셰이킹합니다.

예시:

export default defineNuxtConfig({
  optimization: {
    treeShake: {
      composables: {
        client: { vue: ['onMounted'] },
        server: { vue: ['onServerPrefetch'] },
      },
    },
  },
})
client
  • 타입: object
  • 기본값
{
  "vue": [
    "onRenderTracked",
    "onRenderTriggered",
    "onServerPrefetch"
  ],
  "#app": [
    "definePayloadReducer",
    "definePageMeta",
    "onPrehydrate"
  ]
}
server
  • 타입: object
  • 기본값
{
  "vue": [
    "onMounted",
    "onUpdated",
    "onUnmounted",
    "onBeforeMount",
    "onBeforeUpdate",
    "onBeforeUnmount",
    "onRenderTracked",
    "onRenderTriggered",
    "onActivated",
    "onDeactivated"
  ],
  "#app": [
    "definePayloadReviver",
    "definePageMeta"
  ]
}

pages

Nuxt 3에서 vue-router 통합을 사용할지 여부입니다. 값을 제공하지 않으면 소스 폴더에 app/pages/ 디렉터리가 있는 경우 자동으로 활성화됩니다.

또한 특정 파일만 페이지로 스캔하기 위해 glob 패턴 또는 패턴 배열을 제공할 수 있습니다.

예시:

export default defineNuxtConfig({
  pages: {
    pattern: ['**/*/*.vue', '!**/*.spec.*'],
  },
})

plugins

Nuxt 앱 플러그인 배열입니다.

각 플러그인은 문자열(파일에 대한 절대 또는 상대 경로일 수 있음)일 수 있습니다. .client 또는 .server로 끝나는 경우, 해당 컨텍스트에서만 자동으로 로드됩니다. 또는 src와 mode 키를 가진 객체일 수도 있습니다.

  • 타입: array
참고: 플러그인은 ~/plugins 디렉터리에서도 자동 등록되며, 이 플러그인들은 순서를 커스터마이즈해야 하는 경우가 아니라면 nuxt.config에 나열할 필요가 없습니다. 모든 플러그인은 src 경로를 기준으로 중복 제거됩니다.

참고: app/plugins/ 디렉터리 문서

예시:

export default defineNuxtConfig({
  plugins: [
    '~/custom-plugins/foo.client.js', // 클라이언트 사이드에서만
    '~/custom-plugins/bar.server.js', // 서버 사이드에서만
    '~/custom-plugins/baz.js', // 클라이언트 & 서버 모두
    { src: '~/custom-plugins/both-sides.js' },
    { src: '~/custom-plugins/client-only.js', mode: 'client' }, // 클라이언트 사이드에서만
    { src: '~/custom-plugins/server-only.js', mode: 'server' }, // 서버 사이드에서만
  ],
})

postcss

order

PostCSS 플러그인 순서를 정하는 전략입니다.

  • 타입: function

plugins

PostCSS 플러그인 설정 옵션입니다.

참고: PostCSS 문서

autoprefixer

CSS를 파싱하고 CSS 규칙에 벤더 프리픽스를 추가하는 플러그인입니다.

참고: autoprefixer

cssnano

  • 타입: object

참고: cssnano 설정 옵션

rootDir

애플리케이션의 루트 디렉터리를 정의합니다.

이 속성은 덮어쓸 수 있습니다(예: nuxt ./my-app/을 실행하면 현재/작업 디렉터리에서 ./my-app/의 절대 경로가 rootDir로 설정됩니다). 일반적으로 이 옵션을 설정할 필요는 없습니다.

  • 타입: string
  • 기본값: "/<rootDir>"

routeRules

일치하는 서버 라우트에 적용되는 전역 라우트 옵션입니다.

실험적: 이는 실험적 기능이며 API는 향후 변경될 수 있습니다.

참고: Nitro route rules 문서

router

options

vue-router에 전달되는 추가 라우터 옵션입니다. vue-router 옵션 외에도, Nuxt는 라우터를 커스터마이즈하기 위한 추가 옵션을 제공합니다(아래 참조).

참고: Nuxt 설정에서는 JSON으로 직렬화 가능한 옵션만 전달해야 합니다. 더 많은 제어가 필요하다면 router.options.ts 파일을 사용할 수 있습니다.

참고: Vue Router 문서

hashMode

SPA 모드에서 해시 히스토리를 활성화할 수 있습니다. 이 모드에서는 라우터가 실제 URL 앞에 해시 문자(#)를 사용하며, 내부적으로 전달됩니다. 활성화되면 URL은 서버로 전송되지 않으며 SSR은 지원되지 않습니다.

  • 타입: boolean
  • 기본값: false

기본값: false

scrollBehaviorType

해시 링크에 대한 스크롤 동작을 커스터마이즈합니다.

  • 타입: string
  • 기본값: "auto"

기본값: 'auto'

runtimeConfig

런타임 설정은 동적 설정과 환경 변수를 Nuxt 앱 컨텍스트에 전달할 수 있게 해줍니다.

이 객체의 값은 서버에서만 useRuntimeConfig를 사용하여 접근할 수 있습니다. 주로 프론트엔드에 노출되지 않는 비공개 설정을 포함해야 합니다. 여기에는 API 시크릿 토큰에 대한 참조가 포함될 수 있습니다. public 및 app 아래의 모든 값은 프론트엔드에도 노출됩니다. 값은 런타임에 일치하는 환경 변수로 자동 대체됩니다. 예를 들어, NUXT_API_KEY=my-api-key NUXT_PUBLIC_BASE_URL=/foo/ 환경 변수를 설정하면 아래 예시의 두 값이 덮어써집니다.

  • 타입: object
  • 기본값
{
  "public": {},
  "app": {
    "buildId": "4a2e2d30-418f-41df-8e58-ed5df06de7fd",
    "baseURL": "/",
    "buildAssetsDir": "/_nuxt/",
    "cdnURL": ""
  }
}

예시:

export default defineNuxtConfig({
  runtimeConfig: {
    apiKey: '', // 기본값은 빈 문자열이며, 런타임에 process.env.NUXT_API_KEY를 사용해 자동 설정됩니다
    public: {
      baseURL: '', // 프론트엔드에도 노출됩니다.
    },
  },
})

server

Nuxt의 서버 빌더 설정입니다.

builder

애플리케이션의 서버 부분을 번들링하는 데 사용할 서버 빌더를 지정합니다.

기본적으로 Nuxt는 독립형 Nitro 통합을 제공하는 @nuxt/nitro-server를 사용합니다. 이 아키텍처는 Vite Environment API를 사용하는 Vite 플러그인으로 Nitro를 사용하는 것과 같은 다양한 Nitro 통합 패턴을 허용합니다.

  • 타입: string | { bundle: (nuxt: Nuxt) => Promise<void> }
  • 기본값: "@nuxt/nitro-server"
이 옵션은 내부 사용을 위한 것이며 API는 아직 확정되지 않았습니다. 현재 구현에 의존하기 전에 이슈를 열어주세요.

serverDir

Nitro 라우트, 미들웨어 및 플러그인이 위치하는 Nuxt 애플리케이션의 서버 디렉터리를 정의합니다.

상대 경로를 지정하면 rootDir을 기준으로 합니다.

  • 타입: string
  • 기본값: "/<srcDir>/server"

serverHandlers

Nitro 서버 핸들러입니다.

각 핸들러는 다음 옵션을 받습니다:

  • handler: 핸들러를 정의하는 파일의 경로입니다. - route: 핸들러가 사용 가능한 라우트입니다. 이는 rou3의 규칙을 따릅니다. - method: 처리해야 하는 요청의 HTTP 메서드입니다. - middleware: 미들웨어 핸들러인지 여부를 지정합니다. - lazy: 핸들러를 import할 때 지연 로딩을 사용할지 여부를 지정합니다.
  • 타입: array

참고: server/ 디렉터리 문서

참고: server/api, server/middleware, server/routes의 파일은 Nuxt에 의해 자동으로 등록됩니다.

예시:

export default defineNuxtConfig({
  serverHandlers: [
    { route: '/path/foo/**:name', handler: '~/server/foohandler.ts' },
  ],
})

sourcemap

서버 및/또는 클라이언트 번들에 대해 소스맵을 생성할지, 그리고 어떻게 생성할지를 설정합니다.

단일 boolean으로 설정하면 해당 값이 서버와 클라이언트 모두에 적용됩니다. 추가로, 서버와 클라이언트 모두에 대해 'hidden' 옵션도 사용할 수 있습니다. 서버와 클라이언트 모두에 사용할 수 있는 옵션: - true: 소스맵을 생성하고 최종 번들에 소스 참조를 포함합니다. - false: 소스맵을 생성하지 않습니다. - 'hidden': 소스맵을 생성하지만 최종 번들에 참조를 포함하지 않습니다.

  • 타입: object
  • 기본값
{
  "server": true,
  "client": false
}

spaLoadingTemplate

Boolean 또는 HTML 파일의 경로로, 해당 내용이 ssr: false로 렌더링되는 모든 HTML 페이지에 삽입됩니다.

  • 설정되지 않은 경우, 레이어 중 하나에 존재한다면 ~/spa-loading-template.html 파일을 사용합니다. - false인 경우, SPA 로딩 인디케이터가 로드되지 않습니다. - true인 경우, Nuxt는 레이어 중 하나에서 ~/spa-loading-template.html 파일을 찾거나, 기본 Nuxt 이미지를 사용합니다. 스피너의 좋은 소스로는 SpinKit 또는 SVG Spinners가 있습니다.
  • 기본값: null

예시: ~/spa-loading-template.html

<!-- https://github.com/barelyhuman/snips/blob/dev/pages/css-loader.md -->
<div class="loader"></div>
<style>
.loader {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: solid 2px transparent;
  border-top-color: #000;
  border-left-color: #000;
  border-bottom-color: #efefef;
  border-right-color: #efefef;
  border-radius: 50%;
  -webkit-animation: loader 400ms linear infinite;
  animation: loader 400ms linear infinite;
}

@-webkit-keyframes loader {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes loader {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
</style>

srcDir

Nuxt 애플리케이션의 소스 디렉터리를 정의합니다.

상대 경로를 지정하면 rootDir을 기준으로 합니다.

  • 타입: string
  • 기본값: "app" (Nuxt 4), "." (compatibilityMode: 3인 Nuxt 3)

예시:

export default defineNuxtConfig({
  srcDir: 'app/',
})

다음과 같은 폴더 구조를 기대합니다:

-| app/
---| assets/
---| components/
---| layouts/
---| middleware/
---| pages/
---| plugins/
---| app.config.ts
---| app.vue
---| error.vue
-| server/
-| public/
-| modules/
-| nuxt.config.js
-| package.json

ssr

HTML 렌더링을 활성화할지 여부입니다 - 서버 모드에서 동적으로 또는 generate 시점에 렌더링합니다. false로 설정하면 생성된 페이지에는 콘텐츠가 없습니다.

  • 타입: boolean
  • 기본값: true

telemetry

Nuxt telemetry를 수동으로 비활성화합니다.

참고: 자세한 내용은 Nuxt Telemetry를 참고하세요.

test

앱이 유닛 테스트 중인지 여부입니다.

  • 타입: boolean
  • 기본값: false

theme

로컬 또는 원격 소스에서 프로젝트를 확장합니다.

값은 현재 설정을 기준으로 소스 디렉터리 또는 설정 경로를 가리키는 문자열이어야 합니다. 원격 git 리포지토리에서 확장하기 위해 github:, gitlab:, bitbucket: 또는 https://를 사용할 수 있습니다.

  • 타입: string

typescript

Nuxt의 TypeScript 통합 설정입니다.

builder

프로젝트에 포함할 빌더 타입입니다.

기본적으로 Nuxt는 builder 옵션(기본값은 'vite')을 기반으로 이를 추론하지만, 빌더 환경 타입을 완전히 직접 처리하기 위해(false로 설정) 끌 수 있거나, 'shared' 옵션을 선택할 수 있습니다. 'shared' 옵션은 여러 빌더를 지원해야 하는 모듈 작성자에게 권장됩니다.

  • 기본값: null

hoist

compilerOptions.paths 내에서 깊은 별칭을 생성할 모듈입니다. 아직 서브패스를 지원하지 않습니다. shamefully-hoist=false인 pnpm 모노레포 내에서 Nuxt를 사용할 때 필요할 수 있습니다.

  • 타입: array
  • 기본값
[
  "nitropack/types",
  "nitropack/runtime",
  "nitropack",
  "defu",
  "h3",
  "consola",
  "ofetch",
  "@unhead/vue",
  "@nuxt/devtools",
  "vue",
  "@vue/runtime-core",
  "@vue/compiler-sfc",
  "vue-router",
  "vue-router/auto-routes",
  "unplugin-vue-router/client",
  "@nuxt/schema",
  "nuxt"
]

includeWorkspace

Nuxt 프로젝트에 상위 워크스페이스를 포함합니다. 주로 테마 및 모듈 작성자에게 유용합니다.

  • 타입: boolean
  • 기본값: false

shim

*.vue shim을 생성합니다.

대신 공식 Vue 확장이 컴포넌트에 대한 정확한 타입을 생성하도록 하는 것을 권장합니다. ESLint와 같이 .vue 파일의 타입을 이해하지 못하는 다른 라이브러리를 사용하는 경우, 이를 true로 설정하고 싶을 수 있습니다.

  • 타입: boolean
  • 기본값: false

strict

TypeScript에는 프로그램에 더 많은 안전성과 분석을 제공하는 특정 검사 기능이 있습니다. 코드베이스를 TypeScript로 변환한 후에는 더 높은 안전성을 위해 이러한 검사를 활성화할 수 있습니다. 더 읽어보기

  • 타입: boolean
  • 기본값: true

tsConfig

이 옵션을 사용하여 생성된 TypeScript 설정(.nuxt/tsconfig.app.json, .nuxt/tsconfig.server.json 등)을 확장할 수 있습니다.

typeCheck

빌드 시 타입 체크를 활성화합니다.

true로 설정하면 개발 중에 타입 체크를 수행합니다. build로 설정하여 빌드 시 타입 체크로 제한할 수 있습니다. typescript와 vue-tsc를 dev 의존성으로 설치해야 합니다.

  • 타입: boolean
  • 기본값: false

참고: Nuxt TypeScript 문서

unhead

unhead nuxt 모듈을 설정할 수 있는 객체입니다.

legacy

unhead 모듈에 대한 레거시 호환 모드를 활성화합니다. 이는 다음 변경 사항을 적용합니다: - Capo.js 정렬 비활성화 - DeprecationsPlugin 추가: hid, vmid, children, body 지원 - PromisesPlugin 추가: 입력으로서의 promise 지원

  • 타입: boolean
  • 기본값: false

참고: unhead 마이그레이션 문서

예시:

export default defineNuxtConfig({
  unhead: {
    legacy: true,
  },
})

renderSSRHeadOptions

출력을 커스터마이즈하기 위해 renderSSRHead에 전달될 객체입니다.

  • 타입: object
  • 기본값
{
  "omitLineBreaks": false
}

예시:

export default defineNuxtConfig({
  unhead: {
    renderSSRHeadOptions: {
      omitLineBreaks: true,
    },
  },
})

vite

Vite에 직접 전달될 설정입니다.

참고: 자세한 내용은 Vite 설정 문서를 참고하세요. Nuxt에서는 모든 vite 옵션이 지원되는 것은 아니라는 점에 유의하세요.

build

assetsDir

  • 타입: string
  • 기본값: "_nuxt/"

emptyOutDir

  • 타입: boolean
  • 기본값: false

cacheDir

  • 타입: string
  • 기본값: "/<rootDir>/node_modules/.cache/vite"

clearScreen

  • 타입: boolean
  • 기본값: true

define

  • 타입: object
  • 기본값
{
  "__VUE_PROD_HYDRATION_MISMATCH_DETAILS__": false,
  "process.dev": false,
  "import.meta.dev": false,
  "process.test": false,
  "import.meta.test": false
}

esbuild

  • 타입: object
  • 기본값
{
  "target": "esnext",
  "jsxFactory": "h",
  "jsxFragment": "Fragment",
  "tsconfigRaw": {}
}

mode

  • 타입: string
  • 기본값: "production"

optimizeDeps

esbuildOptions

  • 타입: object
  • 기본값
{
  "target": "esnext",
  "jsxFactory": "h",
  "jsxFragment": "Fragment",
  "tsconfigRaw": {}
}

exclude

  • 타입: array
  • 기본값
[
  "vue-demi"
]

publicDir

resolve

extensions

  • 타입: array
  • 기본값
[
  ".mjs",
  ".js",
  ".ts",
  ".jsx",
  ".tsx",
  ".json",
  ".vue"
]

root

  • 타입: string
  • 기본값: "/<srcDir>"

server

fs

allow
  • 타입: array
  • 기본값
[
  "/<rootDir>/.nuxt",
  "/<srcDir>",
  "/<rootDir>",
  "/<workspaceDir>"
]

vue

features

propsDestructure
  • 타입: boolean
  • 기본값: true

isProduction

  • 타입: boolean
  • 기본값: true

script

hoistStatic

template

compilerOptions
  • 타입: object
transformAssetUrls
  • 타입: object
  • 기본값
{
  "video": [
    "src",
    "poster"
  ],
  "source": [
    "src"
  ],
  "img": [
    "src"
  ],
  "image": [
    "xlink:href",
    "href"
  ],
  "use": [
    "xlink:href",
    "href"
  ]
}

vueJsx

  • 타입: object
  • 기본값
{
  "isCustomElement": {
    "$schema": {
      "title": "",
      "description": "",
      "tags": []
    }
  }
}

vue

Vue.js 설정

compilerOptions

빌드 시 전달될 Vue 컴파일러 옵션입니다.

참고: Vue 문서

config

전역적으로 Vue 앱을 설정할 수 있습니다. nuxt.config에서는 직렬화 가능한 옵션만 설정할 수 있습니다. 그 외의 옵션은 Nuxt 플러그인에서 런타임에 설정해야 합니다.

참고: Vue 앱 설정 문서

propsDestructure

defineProps에 대한 반응형 구조 분해를 활성화합니다.

  • 타입: boolean
  • 기본값: true

runtimeCompiler

런타임 번들에 Vue 컴파일러를 포함합니다.

  • 타입: boolean
  • 기본값: false

transformAssetUrls

image

  • 타입: array
  • 기본값
[
  "xlink:href",
  "href"
]

img

  • 타입: array
  • 기본값
[
  "src"
]

source

  • 타입: array
  • 기본값
[
  "src"
]

use

  • 타입: array
  • 기본값
[
  "xlink:href",
  "href"
]

video

  • 타입: array
  • 기본값
[
  "src",
  "poster"
]

watch

watch 속성을 사용하면 변경 시 Nuxt 개발 서버를 재시작할 패턴을 정의할 수 있습니다.

문자열 또는 정규식의 배열입니다. 문자열은 절대 경로이거나 srcDir(및 레이어의 srcDir)을 기준으로 한 상대 경로여야 합니다. 정규식은 프로젝트 srcDir(및 레이어의 srcDir)을 기준으로 한 경로와 매칭됩니다.

  • 타입: array

watchers

watchers 속성을 사용하면 nuxt.config에서 watcher 설정을 덮어쓸 수 있습니다.

chokidar

chokidar에 직접 전달할 옵션입니다.

참고: chokidar

ignoreInitial

  • 타입: boolean
  • 기본값: true

ignorePermissionErrors

  • 타입: boolean
  • 기본값: true

rewatchOnRawEvents

수신 시 watcher를 재시작하게 할 이벤트 타입 배열입니다.

webpack

webpack에 직접 전달할 watchOptions입니다.

참고: webpack@4 watch 옵션.

aggregateTimeout

  • 타입: number
  • 기본값: 1000

webpack

aggressiveCodeRemoval

번들을 트리 셰이킹하기 위해 typeof process, typeof window, typeof document를 하드하게 대체합니다.

  • 타입: boolean
  • 기본값: false

analyze

webpack을 사용하는 경우, Nuxt는 webpack-bundle-analyzer를 사용하여 번들을 시각화하고 최적화 방법을 파악합니다.

true로 설정하여 번들 분석을 활성화하거나, 옵션이 포함된 객체를 전달하세요: webpack용 또는 vite용.

  • 타입: object
  • 기본값
{
  "template": "treemap",
  "projectRoot": "/<rootDir>",
  "filename": "/<rootDir>/.nuxt/analyze/{name}.html"
}

예시:

export default defineNuxtConfig({
  webpack: {
    analyze: {
      analyzerMode: 'static',
    },
  },
})

cssSourceMap

CSS 소스맵 지원을 활성화합니다(개발 환경에서는 기본값이 true입니다).

  • 타입: boolean
  • 기본값: false

devMiddleware

사용 가능한 옵션은 webpack-dev-middleware를 참고하세요.

stats

  • 타입: string
  • 기본값: "none"

experiments

webpack experiments를 설정합니다.

extractCSS

공통 CSS 추출을 활성화합니다.

내부적으로 mini-css-extract-plugin을 사용하여 CSS를 별도 파일(일반적으로 컴포넌트당 하나)로 추출합니다. 이를 통해 CSS와 JavaScript를 별도로 캐싱할 수 있습니다.

  • 타입: boolean
  • 기본값: true

예시:

export default defineNuxtConfig({
  webpack: {
    extractCSS: true,
    // 또는
    extractCSS: {
      ignoreOrder: true,
    },
  },
})

모든 CSS를 단일 파일로 추출하려면 이를 위한 우회 방법이 있습니다. 하지만 모든 것을 단일 파일로 추출하는 것은 권장되지 않습니다. 여러 CSS 파일로 추출하는 것이 캐싱 및 preload 분리 측면에서 더 좋습니다. 또한 필요한 리소스만 다운로드하고 해석함으로써 페이지 성능을 향상시킬 수 있습니다.

예시:

export default defineNuxtConfig({
  webpack: {
    extractCSS: true,
    optimization: {
      splitChunks: {
        cacheGroups: {
          styles: {
            name: 'styles',
            test: /\.(css|vue)$/,
            chunks: 'all',
            enforce: true,
          },
        },
      },
    },
  },
})

filenames

번들 파일 이름을 커스터마이즈합니다.

매니페스트 사용에 대해 좀 더 이해하려면 webpack 문서를 참고하세요.

참고: 프로덕션에서 해시 기반이 아닌 파일 이름을 사용할 때는 주의해야 합니다. 대부분의 브라우저는 에셋을 캐시하고 첫 로드 시 변경 사항을 감지하지 못할 수 있습니다.

이 예시는 화려한 청크 이름을 숫자 id로 변경합니다:

예시:

export default defineNuxtConfig({
  webpack: {
    filenames: {
      chunk: ({ isDev }) => (isDev ? '[name].js' : '[id].[contenthash].js'),
    },
  },
})

app

  • 타입: function

chunk

  • 타입: function

css

  • 타입: function

font

  • 타입: function

img

  • 타입: function

video

  • 타입: function

friendlyErrors

FriendlyErrorsWebpackPlugin이 제공하는 오버레이를 비활성화하려면 false로 설정합니다.

  • 타입: boolean
  • 기본값: true

hotMiddleware

사용 가능한 옵션은 webpack-hot-middleware를 참고하세요.

loaders

Nuxt에 통합된 webpack 로더의 옵션을 커스터마이즈합니다.

css

사용 가능한 옵션은 css-loader를 참고하세요.

esModule
  • 타입: boolean
  • 기본값: false
importLoaders
  • 타입: number
  • 기본값: 0
url
filter
  • 타입: function

cssModules

사용 가능한 옵션은 css-loader를 참고하세요.

esModule
  • 타입: boolean
  • 기본값: false
importLoaders
  • 타입: number
  • 기본값: 0
modules
localIdentName
  • 타입: string
  • 기본값: "[local]_[hash:base64:5]"
url
filter
  • 타입: function

esbuild

  • 타입: object
  • 기본값
{
  "target": "esnext",
  "jsxFactory": "h",
  "jsxFragment": "Fragment",
  "tsconfigRaw": {}
}

참고: esbuild loader

file

참고: file-loader 옵션

기본값:

{ "esModule": false }
esModule
  • 타입: boolean
  • 기본값: false
limit
  • 타입: number
  • 기본값: 1000

fontUrl

참고: file-loader 옵션

기본값:

{ "esModule": false }
esModule
  • 타입: boolean
  • 기본값: false
limit
  • 타입: number
  • 기본값: 1000

imgUrl

참고: file-loader 옵션

기본값:

{ "esModule": false }
esModule
  • 타입: boolean
  • 기본값: false
limit
  • 타입: number
  • 기본값: 1000

less

  • 기본값
{
  "sourceMap": false
}

참고: less-loader 옵션

pugPlain

참고: pug 옵션

sass

참고: sass-loader 옵션

기본값:

{
  "sassOptions": {
    "indentedSyntax": true
  }
}
sassOptions
indentedSyntax
  • 타입: boolean
  • 기본값: true

scss

  • 기본값
{
  "sourceMap": false
}

참고: sass-loader 옵션

stylus

  • 기본값
{
  "sourceMap": false
}

참고: stylus-loader 옵션

vue

사용 가능한 옵션은 vue-loader를 참고하세요.

compilerOptions
  • 타입: object
propsDestructure
  • 타입: boolean
  • 기본값: true
transformAssetUrls
  • 타입: object
  • 기본값
{
  "video": [
    "src",
    "poster"
  ],
  "source": [
    "src"
  ],
  "img": [
    "src"
  ],
  "image": [
    "xlink:href",
    "href"
  ],
  "use": [
    "xlink:href",
    "href"
  ]
}

vueStyle

  • 기본값
{
  "sourceMap": false
}

optimization

webpack optimization을 설정합니다.

minimize

모든 최소화 도구를 비활성화하려면 minimize를 false로 설정합니다(개발 환경에서는 기본적으로 비활성화되어 있습니다).

  • 타입: boolean
  • 기본값: true

minimizer

플러그인 배열로 minimizer를 커스터마이즈할 수 있습니다.

runtimeChunk

  • 타입: string
  • 기본값: "single"

splitChunks

automaticNameDelimiter
  • 타입: string
  • 기본값: "/"
cacheGroups
chunks
  • 타입: string
  • 기본값: "all"

optimizeCSS

OptimizeCSSAssets 플러그인 옵션입니다.

extractCSS가 활성화된 경우 기본값은 true입니다.

  • 타입: boolean
  • 기본값: false

참고: css-minimizer-webpack-plugin 문서.

plugins

webpack 플러그인을 추가합니다.

  • 타입: array

예시:

import webpack from 'webpack'
import { version } from './package.json'

export default defineNuxtConfig({
  webpack: {
    plugins: [
      // ...
      new webpack.DefinePlugin({
        'process.VERSION': version,
      }),
    ],
  },
})

postcss

PostCSS Loader를 커스터마이즈합니다. postcss-loader 옵션과 동일한 옵션입니다.

postcssOptions

plugins
  • 타입: object
  • 기본값
{
  "autoprefixer": {},
  "cssnano": {}
}

profile

webpackbar에서 프로파일러를 활성화합니다.

일반적으로 CLI 인자 --profile로 활성화됩니다.

  • 타입: boolean
  • 기본값: false

참고: webpackbar.

serverURLPolyfill

URL 및 URLSearchParams를 제공하기 위해 로드할 폴리필 라이브러리입니다.

기본값은 'url'입니다(패키지 보기).

  • 타입: string
  • 기본값: "url"

warningIgnoreFilters

빌드 경고를 숨기기 위한 필터입니다.

  • 타입: array

workspaceDir

애플리케이션의 워크스페이스 디렉터리를 정의합니다.

이는 종종 모노레포 설정에서 사용됩니다. Nuxt는 워크스페이스 디렉터리를 자동으로 감지하려고 시도하지만, 여기에서 이를 덮어쓸 수 있습니다. 일반적으로 이 옵션을 설정할 필요는 없습니다.

  • 타입: string
  • 기본값: "/<workspaceDir>"