3. 설치 및 구성

설치

각 패키지 관리자별로 설치 방법 정리한다. 터미널을 열고, 아래 명령 중 하나를 수행한다.

// npx
npx nuxi@latest init <project-name>

// pnpm
pnpm dlx nuxi@latest init <project-name>

// bun
bunx nuxi@latest init <project-name>

VSCode 를 통해 프로젝트를 연다.

code <project-name>

다시 터미널에서 프로젝트의 패키지 의존성을 해결한다. - VSCode, Intellij 에 내장된 터미널을 이용해도 된다.

// yarn
yarn install

// npm
npm install

// pnpm
pnpm install

// bun
bun install

기본 구성된 어플리케이션 서버 띄우기 - Development Server

// yarn
yarn dev --open

// npm
npm run dev -- -o

// pnpm
pnpm dev -o

// bun
bun run dev -o

 

구성

기본적으로 nuxt.config.ts 파일을 통해 기본 환경을 커스텀한다. nuxt.config.ts 파일은 프로젝트 루트 디렉토리에 위치하며

가장 미니멀한 형태는 아래와 같다.

// nuxt.config.ts

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

여기에서 전체 속성을 살펴볼 수 있다.

 

nuxt.config 에서 완전히 유형화된 환경별 정의를 재구성 할 수 있다.

// nuxt.config.ts

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

 

구성 및 프라이빗 토큰

runtimeConfig API 는 환경 변수와 같은 값을 애플리케이션에 노출한다. 기본적으로 이러한 키는 서버 측에서만 사용할 수 있다.  runtimeConfig.public 로 정의된 키는클라이언트 측에서도 사용할 수 있다.
이러한 값은 환경 변수에서 정의되어야 하며 nuxt.config환경 변수를 사용하여 재정의될 수 있다.

// nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    // The private keys which are only available server-side
    apiSecret: '123',
    // Keys within public are also exposed client-side
    public: {
      apiBase: '/api'
    }
  }
})

이러한 변수는 아래와 같이 useRuntimeConfig() 컴포저블을 사용하여 애플리케이션에 노출된다.

<script setup lang="ts">
const runtimeConfig = useRuntimeConfig()
</script>

runtimeConfig 관련한 상세한 사항은 여기에서

 

앱 구성 

소스 디렉터리(기본적으로 프로젝트의 루트)에 있는 app.config.ts 파일은 빌드 시 필요한 공용 변수를 노출 하는데 사용한다 . runtimeConfig 옵션과 달리 환경 변수를 사용하여 재정의할 수 없다.

최소 구성 파일은 defineAppConfig구성과 함께 객체가 포함된 함수를 내보낸다. defineAppConfig 헬퍼 함수는 임포트 없이 전역적으로 사용할 수 있다.

// app.config.ts

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

이러한 변수는 useAppConfig 컴포저블을 사용하여 애플리케이션에 노출된다.

<script setup lang="ts">
const appConfig = useAppConfig()
</script>

앱 구성과 관련된 상세한 내용은 여기에서

 

위에서 설명한 대로 runtimeConfig및 app.config둘 다 변수를 애플리케이션의 나머지 부분에 노출하는 데 사용된다. 둘 중 하나를 사용해야 하는지 결정하려면 다음 몇 지침을 참고하자.

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

runtimeConfig, app.config 비교

Feature	runtimeConfig	app.config
Client Side	Hydrated	Bundled
Environment Variables	✅ Yes	❌ No
Reactive	✅ Yes	✅ Yes
Types support	✅ Partial	✅ Yes
Configuration per Request	❌ No	✅ Yes
Hot Module Replacement	❌ No	✅ Yes
Non primitive JS types	❌ No	✅ Yes

 

Nuxt는 nuxt.config.ts 파일을 구성에 대한 단일 신뢰 소스로 사용 하고 외부 구성 파일 읽기를 건너뛴다. 하지만 프로젝트를 빌드하는 동안 이를 구성해야 할 수도 있다. 다음 표에는 일반적인 구성과 해당되는 경우 Nuxt로 구성할 수 있는 방법이 강조되어 있다.

 

NameConfig FileHow To Configure

Name	Config	How to Configure
Nitro	nitro.config.ts	Use nitro key in nuxt.config
PostCSS	postcss.config.js	Use postcss key in nuxt.config
Vite	vite.config.ts	Use vite key in nuxt.config
webpack	webpack.config.ts	Use webpack key in nuxt.config

Here is a list of other common config files:

NameConfig FileHow To Configure

Name	Config File	How to Configure
TypeScript	tsconfig.json	More Info
ESLint	.eslintrc.js	More Info
Prettier	.prettierrc.json	More Info
Stylelint	.stylelintrc.json	More Info
TailwindCSS	tailwind.config.js	More Info
Vitest	vitest.config.ts	More Info

 

Vue 구성

바이트와 ​​함께

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

• @vitejs/plugin-vue 을 위한 vite.vue : 사용가능 옵션은 여기에서
• @vitejs/plugin-vue-jsx 을 위한 vite.vueJsx : 사용가능 옵션은 여기에서

// nuxt.config.ts

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

 

웹팩 사용

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

// nuxt.config.ts

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

 

실험적인 Vue 기능 활성화

defineModel 또는 propsDestructure 와 같은 Vue의 실험적 기능을 활성화해야 할 수도 있다 . Nuxt는 어떤 빌더를 사용하든 관계없이 이를 수행하는 쉬운 방법을 nuxt.config.ts 에서 제공한다.

// nuxt.config.ts

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

실험적  reactivityTransform 의 Vue 3.4 또는 Nuxt 3.9 이후 마이그레이션
Nuxt 3.9 및 Vue 3.4부터 reactivityTransform  Nuxt 통합 기능이 있는 Vue Macros로 이동되었다.