[vue/nuxt] nuxt3 기본 사용법

0. 들어가기

-. vue3에 적용 가능한 nuxt3 기본 사용법 연습

-. 와.. 벌써 8개월이 지났어.

1. nuxt3 설치

-. 항상 그렇듯이, 설치는 쉽다. 아래 한 줄 입력하면 nuxt 기본 package.json 파일이 포함된 폴더가 생성된다.

npx nuxi init 폴더명

-. 이후 해당 폴더에 들어가서 패키지 설치를 해주면 끝.

cd invit_nuxt
npm install

-. 나는 invit_nuxt 폴더에 기본 세팅을 했고, 그 결과로 아래와 같은 폴더 구조가 생성된다.

-. 이후, vue3의 기본 서버 패키지인 vite를 실행하면 nuxt3의 기본 페이지를 확인할 수 있다.

npm run dev

2. Page Routing

-. Route 파일을 따로 설정해줘야 하는 바닐라 vue 대비 nuxt를 사용할 경우 paging 처리가 매우 쉽다. 

1) Static routing

-. 코드 root 디렉토리에 'pages' 디렉토리를 만들어주면 해당 디렉토리 내의 트리를 따라 라우팅이 적용된다. 

pages
│  index.vue
│  subpage.vue
│  
├─cards
│      index.vue
│      subpage.vue
│
└─home
        index.vue
        subpage.vue

2) Dynamic routing

-. 당연히, 모든 페이지에 대한 vue file을 모두 만들어 둘 순 없고, 입력 uri 단말에 따라 동적으로 (dynamically) 페이지가 생성되어야 한다. 이를 위해 vue에서는 dynamic routing 기능을 제공하고, 마찬가지로 nuxt에서도 제공한다. nuxt에서는 대괄호 ([~~])로 해당 변수를 받는다.

• 바닐라 vue: :param
• nuxt2: _param
• nuxt3: [param]

│  index.vue
│  subpage.vue
│
├─cards
│      index.vue
│      subpage.vue
│      [cardNm].vue  <-- 추가
│
└─home
        index.vue
        subpage.vue
        
--
[cardNm].vue

<script setup>

</script>

<template>
    <h1>pages/cards/cardNm</h1>
    <h2>Card Name: {{$route.params.cardNm}}</h2>
</template>

3. Nuxt Link

-. Nuxt 프레임웍을 사용하면 바닐라 vue에서의 RouterLink 대신, NuxtLink 컴포넌트를 사용하게 된다.

    <NuxtLink to="/">/</NuxtLink> | <NuxtLink to="/home">home</NuxtLink> |

 

4. 다음엔

-. flask에서 다뤘던 jinja2와 같은 page template을 이용해서 코드 간소화 하는걸 좀 해봐야겠다....