최근에는 nextjs만 사용하다보니
저희 팀에서는 nuxt 3버전 이상부터는 사용하지 않고 있어요 ...

하지만 아무래도 개발자라면, 이런저런 기술을 다룰 수 있어야되니까
오늘은 한번 nuxt 3 버전을 사용해볼게요.

nuxt 3 설치하기

nuxt 3버전 부터는 기존의 2버전과 다른 점이 많다보니
아예 라이브러리를 따로 npm으로 말았더라구요.

언제나 그렇듯. 쉽게 설치할 수 있습니다.
또한 nuxi라는 명령어도 쓸 수 있어요.

아래는 예제예요.

  npx nuxi@latest init <project-name>

이렇게 CRA처럼도 가능하구요.

bun도 사용 가능합니다!

bunx nuxi@latest init <project-name>

그 후 사용중인 패키지 매니저에서 install 명령어 실행 해주시면 돼요.

nuxt 3 예제

간단한 화면을 만들 땐, vue나 nuxt만한 게 없는 것 같네요.

<script setup lang="ts">
const version = 2 + 1
</script>

<template>
  <div class="hello">Hello Nuxt {{ version }}!</div>
</template>

<style scoped>
.hello {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 3rem;
  padding: 2rem;
}
</style>

예제코드를 보면, 한눈에 딱 들어오지 않나요?
이게 바로 ... 싱글 파일 컴포넌트의 위력 ...

확실히 비트를 사용하다보니 ... 컴파일 속도도 빠르답니다 !

[오전 3:07:05] ℹ Vite client warmed up in 1664ms

이후 저희의 베타 서비스 예약하기 페이지를 nuxt로 만들어봤는데,
달라진 생산성이 돋보이더라구요.

다음에는 조금 더 강력한 기능을 가진 nuxt 3의 주요 컨셉에 대해 알아봅시다!