Nuxt 시작하기

 

Nuxt는 Vue 프레임워크에서 SSR 컴포넌트를 쓸 수 있게 해주는 풀스택 프레임워크다. Vue의 Next.js인 셈이다.

 

디렉토리 구조

(root)/
  components
    └ 컴포넌트.vue
  layouts
    └ default.vue
  pages
    └ index.vue
    └ page1.vue
    └ page2.vue
  app.vue

 

Nuxt는 root 디렉토리에 있는 app.vue나 pages 폴더의 index.vue 파일을 기준으로 기본 주소인 "/"의 메인 페이지를 생성한다. app.vue 파일과 pages 폴더를 함께 쓰려면 app.vue 안에 <NuxtPage /> 컴포넌트를 추가하고 /pages/index.vue 파일을 메인으로 써야 하지만, app.vue 파일을 삭제하고 /pages/index.vue 파일만 사용할 수도 있다.

 

Nuxt 플러그인

Vue 앱에 쓰이는 main.js 파일은 Nuxt가 백단에서 처리해준다고 한다. main.js 파일을 수동으로 관리하진 않아서, 일반적으로 main.js에서 해결하는 app.component() 등의 설정은 /plugins 디렉토리를 만들어서 처리한다. (/plugins 디렉토리 사용법 참고)

 

Nuxt 프레임워크에서 공식적으로 지원하는 오픈소스 라이브러리는 Nuxt Modules 페이지에서 설치하면 되지만, Oh, Vue Icons!처럼 Nuxt Modules에 등록돼있지 않은 라이브러리는 플러그인으로 설치해야 한다. 패키지를 설치한 다음에 /plugins 디렉토리에 .js/ts 파일을 만들어 defineNextPlugin() 함수를 통해 컴포넌트를 등록한다.

// /plugins/oh-vue-icons.js

import { OhVueIcon, addIcons } from "oh-vue-icons";
import { FaFlag } from "oh-vue-icons/icons";

addIcons(FaFlag);

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component("v-icon", OhVueIcon); // app.component() 메소드와 동일
});

 

plugin 파일명은 따로 양식 없이 자유롭게 지어주면 되지만, 공식 문서에서는 만약 다른 plugin에 의존하는 plugin이 있으면 파일명에 순번을 달아 plugin의 설치 순서를 정할 수 있다고 한다.

 

컴포넌트

Nuxt에서는 /components 폴더에 컴포넌트를 저장하면 import 구문 없이 컴포넌트를 바로 가져다 쓸 수 있다.

 

다만 중첩된 폴더 안에 있는 컴포넌트는 네이밍에 특별히 신경써야 한다. 중첩된 모든 폴더명을 파스칼표기법으로 컴포넌트명에 추가해야 하기 때문이다.

(root)/
  components
    └ header
       └ Bar.vue
    └ footer
       └ Bar.vue
    └ foo
       └ bar
          └ Baz.vue

 

 

위 폴더 구조로 파일이 정리돼있다면,

• /header 폴더에 있는 Bar.vue 컴포넌트는 <HeaderBar /> 사용
• /footer 폴더에 있는 Bar.vue 컴포넌트는 <FooterBar /> 사용
• /foo/bar 폴더에 있는 Baz.vue 컴포넌트는 <FooBarBaz /> 사용

Nuxt 공식 문서에는 컴포넌트 파일명과 컴포넌트 이름을 통일시키는 것을 추천한다고 한다. 예를 들어 /components/header 폴더에 있는 Bar 컴포넌트면 파일명을 HeaderBar.vue로 짓는 편이 더 명확할 것이다.

 

레이아웃

Nuxt에서는 레이아웃 컴포넌트도 디렉토리의 전용 폴더(/layouts)에 저장해 사용한다. 파일명을 default.vue로 저장하면 모든 페이지에 자동으로 적용된다.

(root)/
  layouts
    └ default.vue
    └ dashboard.vue

 

만약 특정 페이지에만 다른 레이아웃을 적용해야 할 경우 해당 페이지 안에서 definePageMeta()를 호출해서 레이아웃의 파일명을 전달한다.

<script setup>
definePageMeta({
  layout: "dashboard"
})
</script>