[vue] Nuxt.js + Pinia + Vue.js 프로젝트 시작하기

⚛️ React.js (리액트)와 🍃 Vue.js (뷰) 비교

React.js	Vue.js
JSX(JavaScript XML) 자바스크립트 코드 내에서 HTML 구조 작성	단일 파일 컴포넌트(SFC) SFC에서 HTML, CSS, JavaScript를 통합하여 작성
JSX와 개념(Hooks 등) 익숙해지는 시간 필요	HTML, CSS, JS 기본 지식만 있다면 쉽게 시작 가능
공식적인 내장 솔루션이 없어 Redux, Zustand 등 외부 라이브러리 사용	Pinia (Vue 3 권장), Vuex 등 공식적인 상태 관리 라이브러리 제공
대규모의 복잡한 애플리케이션 및 모바일(React Native) 개발에 유리	소규모부터 중규모, 대규모 애플리케이션까지 모두 가능하며, 특히 빠르게 프로토타이핑할 때 유리
Next.js(프레임워크)를 통해 SSR 지원.	Nuxt.js(프레임워크)를 통해 SSR을 기본 지원.

준비물 : 
- Node.js (최신버전)

 

Nuxt.js 프로젝트 생성하기

1.  프로젝트를 만들고 싶은 상위 폴더로 터미널에서 cd 명령어로 이동

2. npx nuxi init <프로젝트명>

   - package manager 선택 (npm,yarn,pnpm 등)

↓ 모듈 선택 화면 

√ Would you like to install any of the official modules?
undefined Yes
undefined
> Pick the modules to install:
undefined [•] @nuxt/content – The file-based CMS with support for Markdown, YAML, JSON
undefined  [ ] @nuxt/eslint – Project-aware, easy-to-use, extensible and future-proof ESLint integration
undefined  [ ] @nuxt/fonts – Add custom web fonts with performance in mind
undefined  [ ] @nuxt/icon – Icon module for Nuxt with 200,000+ ready to use icons from Iconify
undefined  [ ] @nuxt/image – Add images with progressive processing, lazy-loading, resizing and providers
support
undefined  [ ] @nuxt/scripts – Add 3rd-party scripts without sacrificing performance
undefined  [ ] @nuxt/test-utils – Test utilities for Nuxt
undefined  [ ] @nuxt/ui – The Intuitive UI Library powered by Reka UI and Tailwind CSS
undefined

@nuxt/content: 마크다운, YAML, JSON 같은 파일들을 지원하는 파일 기반 CMS 모듈 ( 내부적으로 better-sqlite3라는 패키지가 필요)
@nuxt/eslint: Nuxt 프로젝트에 ESLint를 붙여주는 모듈(. 깔끔한 코드 스타일 유지에 도움)
@nuxt/fonts: 성능을 고려하여 커스텀 웹 폰트를 추가할 수 있게 해주는 모듈

@nuxt/icon: 200,000개 이상의 아이콘을 사용할 수 있게 해주는 모듈

@nuxt/image: 이미지 최적화(처리, 지연 로딩, 리사이징 등) 기능을 제공하는 모듈

@nuxt/scripts: 성능 저하 없이 써드파티 스크립트(외부 스크립트)를 추가할 수 있게 해주는 모듈

@nuxt/test-utils: Nuxt 프로젝트 테스트를 위한 유틸리티 모듈

@nuxt/ui: Tailwind CSS와 Vue 기반 UI 라이브러리인 Reka UI를 기반으로 한 직관적인 UI 라이브러리 모듈

 Pinia 설치 및 통합하기

1. 생성된 프로젝트 폴더로 이동
   cd <프로젝트명>
2. Pinia 패키지 설치
   

   npm install pinia
   # 또는 yarn add pinia
   # 또는 pnpm add pinia

3. Pinia Nuxt 플러그인 설정
    Nuxt 3는 plugins/ 폴더 안에 있는 파일들을 자동으로 로드하고 실행해줌 >  이 기능으로  Pinia를 Nuxt 애플리케이션에 연결
   <프로젝트명>/plugins/pinia.ts

// plugins/pinia.ts
import { defineNuxtPlugin } from 'nuxt/app';
import { createPinia } from 'pinia';

export default defineNuxtPlugin((nuxtApp) => {
  // Pinia 인스턴스 생성
  const pinia = createPinia();

  // Nuxt 앱에 Pinia 연결
  nuxtApp.vueApp.use(pinia);

  // (선택 사항) 필요한 경우 pinia 인스턴스를 주입하여 전역에서 접근 가능
  // return {
  //   provide: {
  //     pinia,
  //   },
  // };
});

• defineNuxtPlugin은 Nuxt 3에서 플러그인을 정의하는 함수
• nuxtApp.vueApp.use(pinia) 이 부분이 Vue 앱 인스턴스에 Pinia를 연결하는 핵심 코드

프로그램 실행 명령어

npm run dev

기본 설정 정의 

nuxt.config.json

Nuxt configuration file