Nuxt3 프로젝트 이동 하기 - 1️⃣ Nuxt3란? (Nuxt2와 달라진 점)

진짜 오랜만에 시작하는 블로그 😎

확실히 공부를 하려면 블로그에 기록하는 게 가장 동기부여가 잘되어서,

다시 시작해보려고 한다.

 

 

 

---

개발자 생활이 오래되다보니, 이제 내가 만든 코드로 레거시가 되는 경험도 하게 됨.

바쁘다는 핑계로 미뤄뒀던 Nuxt2에서 Nuxt3 이동을 2025년에는 꼭 이루겠다는 다짐과 함께 

오늘부터 Nuxt3에 대한 스터디 기록을 하려고 한다.

지치지 않게 힘빼고 시작해 볼 예정

 

😎 Nuxt3란?

🔗 Nuxt 3 공식 소개 페이지

 

Nuxt는 Vue 기반 프레임워크로 서버랜더링(SSR) / 정적 사이트 생성 (SSG)  등 SEO 최적화를 제공한다.

Nuxt3는 Vue 3와 Vite를 기본적으로 사용하여 빠른 개발 환경을 제공하고 있다.

 

 

🧐Nuxt3로 오면서 Nuxt2와 달라진 점은?

 

1️⃣ 파일기반 라우팅 시스템은 동일

/pages 디렉토리에 Vue 파일 생성 시 자동으로 라우트 등록

 

 

 

2️⃣ 자동임포트 기능 추가

composables / compoents/ store 등에서 직접 import 없이 사용가능

해당 폴더에 파일 생성 시 자동으로 인식하고 불러와서 사용할 수 있다.

 

기존 nuxt2버전에서는 compoents 폴더에 파일을 추가하면 

import MyButton from '@/components/MyButton.vue'

위와 같은 코드를 넣어서 import 해서 사용했다면 Nuxt3부터는 별도 import 없이 사용가능하다.

 

 

 

3️⃣ Vite 기본 제공 

Vite는 프론트앤드 개발환경을 제공하는 빠르고 가벼운 빌드 도구로,

Nuxt3부터는 기본 빌드 도구로 채택됨

Vite 도입으로 기존보다 개발 서버가 빠르게 실행되며, 최적화된 빌드를 제공한다.

 

 

 

4️⃣TypeScirpt 지원

완벽한 Typescript 지원으로 안정적인 개발이 가능해졌다.

 

 

 

5️⃣ 서버엔진 변경 (Nitro 도입)

서버리스, Edge Computing, APIRoute 제공

별도 설정 없이 API 생성 가능

 

 

 

6️⃣ Compositon API 기본 지원

Nuxt2에서 Options  API  기반으로 작성되었다면

Nuxt3에서는 Composition API를 기본으로 설정하면서 setup()을 활용하는 걸 기본적으로 이용하게 되었다

<script setup>
//Composition API 예시
const message = ref("Hello, Nuxt 3!");
</script>

<template>
  <p>{{ message }}</p>
</template>

 

 

 

7️⃣ Vuex → Pinia로 대체

기존 상태라이브러리를 Vuex를 이용하던걸 Nuxt3부터는 Pinia가 기본 상태관리라이브러리로 사용 중이다.

Nuxt3에서도 Vuex 이용이 가능하다, 별도 설치 후 사용이 가능하다.

//Pinia 예시코드
import { defineStore } from 'pinia';

export const useAuthStore = defineStore('auth', {
  state: () => ({
    user: null,
  }),
  actions: {
    setUser(user: any) {
      this.user = user;
    },
  },
});

 

 

 

이제 위와 같은 내용들을 반영하여, 차근차근 Nuxt3로 프로젝트 이동을 시작해보려고 한다. :)