Vue와 Nuxt 시작하기

이 장에서는 Node.js를 준비하고, create-vue로 Vue 프로젝트를, nuxi로 Nuxt 프로젝트를 만들어 개발 서버를 띄우는 과정까지 다룹니다. 편집기 설정도 함께 살펴봅니다. Vue는 화면을 만드는 프레임워크이고, Nuxt는 그 위에 라우팅·서버 렌더링·서버 API를 더한 풀스택 프레임워크라는 점을 기억해 두면 두 도구의 관계를 이해하기 쉽습니다.

Node.js 준비

Vue와 Nuxt의 개발 도구는 모두 Node.js 위에서 동작합니다. nodejs.org에서 LTS 버전을 설치한 뒤 버전을 확인합니다. npm은 Node.js와 함께 설치되며, pnpm이나 Yarn, Bun을 써도 됩니다.

node --version
npm --version

create-vue로 Vue 프로젝트 만들기

Vue 공식 프로젝트 생성 도구는 create-vue입니다. Vite를 빌드 도구로 쓰는 프로젝트를 만들며, 실행하면 몇 가지를 묻습니다.

npm create vue@latest

질문은 대략 다음과 같습니다. 처음이라면 TypeScript, Vue Router, Pinia, Vitest 정도를 고르고, 나머지는 필요할 때 추가해도 됩니다.

프로젝트가 만들어지면 의존성을 설치하고 개발 서버를 실행합니다.

cd my-vue-app
npm install
npm run dev

터미널에 표시되는 주소(기본값 http://localhost:5173)를 브라우저로 열면 첫 화면이 보입니다. Vite 개발 서버는 핫 모듈 교체(HMR)를 지원하므로, .vue 파일을 저장하면 페이지를 새로 고치지 않아도 바뀐 부분이 곧바로 반영되고 컴포넌트 상태도 대부분 유지됩니다.

첫 컴포넌트 고쳐 보기

src/App.vue를 열어 내용을 다음처럼 바꿔 봅니다. <script setup> 안에서 선언한 변수와 함수는 템플릿에서 바로 쓸 수 있습니다.

<script setup lang="ts">
import { ref } from "vue";

const name = ref("Vue");
const count = ref(0);
</script>

<template>
  <h1>Hello, {{ name }}!</h1>
  <input v-model="name" />
  <button @click="count++">클릭 {{ count }}회</button>
</template>

입력란에 글자를 치면 제목이 함께 바뀌고, 버튼을 누르면 숫자가 올라갑니다. 데이터만 바꿨을 뿐인데 화면이 따라 바뀌는 것이 Vue의 반응성입니다.

package.json의 스크립트

npm run 뒤에 붙이는 이름은 package.json의 scripts에 정의되어 있습니다. create-vue로 만든 TypeScript 프로젝트에는 대략 다음과 같은 스크립트가 들어 있으며, 고른 기능에 따라 test:unit, test:e2e, lint 등이 더해집니다.

{
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --build"
  }
}

dev는 개발 서버, build는 타입 검사와 프로덕션 빌드, preview는 빌드 결과를 로컬에서 확인하는 명령입니다. 스크립트 이름은 프로젝트마다 다를 수 있으니 처음 받은 프로젝트라면 이 부분부터 읽어 보는 것이 좋습니다.

nuxi로 Nuxt 프로젝트 만들기

서버 렌더링, 파일 기반 라우팅, 서버 API가 필요하다면 처음부터 Nuxt로 시작할 수 있습니다. Nuxt의 명령줄 도구 nuxi로 프로젝트를 만듭니다. npm create nuxt@latest도 같은 일을 합니다.

npx nuxi@latest init my-nuxt-app
cd my-nuxt-app
npm run dev

Nuxt 개발 서버는 기본적으로 http://localhost:3000에서 열립니다. 생성 과정에서 패키지 관리자를 고르면 의존성 설치까지 자동으로 진행됩니다. 자주 쓰는 nuxi 명령은 다음과 같습니다.

npx nuxi dev          # 개발 서버
npx nuxi build        # 프로덕션 빌드
npx nuxi generate     # 정적 사이트 생성
npx nuxi module add pinia   # 모듈 추가(Pinia 예시)

편집기 설정

VS Code를 쓴다면 공식 확장 Vue - Official(이전 이름 Volar)을 설치합니다. .vue 파일의 문법 강조, 자동 완성, 템플릿 안의 타입 검사를 제공합니다. 브라우저에는 Vue DevTools를 설치하면 컴포넌트 트리와 상태, Pinia 스토어를 살펴볼 수 있습니다. create-vue 프로젝트에서는 터미널에서 타입 검사를 따로 돌릴 수도 있습니다.

npm run type-check   # vue-tsc로 .vue 파일까지 타입 검사
npm run lint         # ESLint를 골랐다면

정리

• Vue와 Nuxt 도구는 Node.js LTS 위에서 동작합니다.
• npm create vue@latest로 Vite 기반 Vue 프로젝트를 만들고 npm run dev로 실행합니다.
• npx nuxi@latest init으로 Nuxt 프로젝트를 만들며, 개발 서버는 기본적으로 3000번 포트를 씁니다.
• 편집기에는 Vue - Official 확장, 브라우저에는 Vue DevTools를 갖추면 개발이 훨씬 편해집니다.