[Nuxt] 🧪Nuxt 사용법 (v3)

▷ Nuxt Routing

🧪 Routing

Nuxt는 pages폴더를 기준으로 라우팅된다.
(src/pages/index.vue가 "/" 메인 경로임)

/ → pages/index.vue
/about → pages/about/index.vue

---

🧪 Dynamic Routing

pages/lesson/[title].vue

| pages/
---| lesson/
-----| [title].vue

/* pages/lesson/[title].vue */
<script setup lang="ts"></script>

<template>
  <div>
    <h2>Lesson</h2>
    <p>
      Chapter slug: <span>{{ $route.params.title }}🎵</span>
    </p>
  </div>
</template>

<style scoped></style>

/* pages/index.vue */
<script lang="ts" setup>
import { greeting } from '@app/ui';
const route = useRoute();
const lessonArr = [
  { id: 1, title: 'vocal' },
  { id: 2, title: 'piano' },
  { id: 3, title: 'rock' },
  { id: 4, title: 'drum' },
];
</script>

<template>
  <div>
    <p>{{ greeting }}</p>
    <br />

    <NuxtLink
      v-for="lesson in lessonArr"
      :key="lesson.id"
      :to="`/lesson/${lesson.title}`"
      class="text-blue-700"
      ><p>{{ lesson.title }}</p>
    </NuxtLink>
    <p>
      현재 경로: <code>{{ route.path }}</code>
    </p>
  </div>
</template>

<style lang="scss" scoped></style>

✚ 참고) 매개변수를 선택사항으로 지정하려면 매개변수를 이중 대괄호로 묶어야 한다.

pages/lesson/[[title]].vue
pages/[[slug]]/index.vue는 pages/[[slug]].vue와 같다.

---

🧪 Catch-all Route

특정 경로 하위의 모든 경로를 처리할 수 있는 라우팅 기법이다.
어떤 경로든 해당 라우트에서 처리할 수 있다.

[...slug].vue와 같은 페이지 컴포넌트 이름을 사용하여 경로를 만들면 된다.

pages/[...slug].vue

<template>
  <p>{{ $route.params.slug }}</p>
</template>

/bt21/tata로 이동하면 아래와 같이 보여진다.

<p>["bt21", "tata"]</p>

---

🧪 NuxtLink

경로 이동이 가능하다.

<NuxtLink to="/profile">my profile</NuxtLink>

---

🧪 useRouter

useRouter

경로 이동

<script setup>
const router = useRouter()
</script>

back() : 뒤로가기 router.go(-1)와 동일함.
forward() : 앞으로가기 router.go(1)와 동일함.
push() : 새 URL로 이동
replace() : 현재 경로 새 URL로 새로 고침

const router = useRouter()

router.addRoute({ name: 'home', path: '/home', component: Home })
router.removeRoute('home')
router.getRoutes()
router.hasRoute('home')
router.resolve({ name: 'home' })

템플릿 내에 라우터 인스턴스만 필요한 경우

<template>
  <button @click="$router.back()">Back</button>
</template>

---

🧪 NavigateTo

NavigateTo

경로 이동

<script setup lang="ts">
await navigateTo('/search')

await navigateTo({ path: '/search' })

await navigateTo({
  path: '/search',
  query: {
    page: 1,
    sort: 'asc'
  }
})
</script>

---

🧪 useRoute

useRoute

현재 경로를 반환

<script setup lang="ts">
const route = useRoute()
</script>

<template>
  <p>현재 경로: {{ route.path }}</p>
</template>

fullPath : 경로, 쿼리 및 해시를 포함하는 현재 경로와 연결된 인코딩된 URL
hash : #으로 시작하는 URL의 디코딩된 해시 섹션
matched : 현재 경로 위치와 일치하는 정규화된 경로 배열
meta : 레코드에 첨부된 사용자 정의 데이터
name : 경로 레코드의 고유 이름
path : URL의 인코딩된 경로 이름 섹션
redirectedFrom : 현재 경로 위치에 도달하기 전에 접근을 시도한 경로 위치

템플릿 내에 라우트 인스턴스만 필요한 경우

<template>
  <p>현재 경로: {{ $route.path }}</p>
</template>

---

▷ Nuxt layouts

🧪 layouts

layouts
layouts 예제
layouts 잘 정리된 블로그

src/layouts/default.vue

/* src/layouts/default.vue */
<script lang="ts" setup></script>

<template>
  <div class="h-[50px] flex items-center justify-center w-full fixed bg-black">
    <p class="text-cyan-500">~기본 레이아웃~</p>
  </div>
  <div class="h-screen flex-col flex justify-center items-center">
    <slot /> // ⭐️ 꼭 추가
  </div>
</template>

<style scoped></style>

커스텀 layout

-| layouts/
---| default.vue
---| custom.vue

/* layouts/custom.vue */
<script setup lang="ts">
import Header from '@/components/Header/Header.vue';
</script>

<template>
  <div>
    // 헤더 => Header컴포넌트
    <Header />
    <slot></slot>
  </div>
</template>

/* pages/about/index.vue */
<script setup lang="ts">
definePageMeta({
  layout: 'custom'
})
</script>

---

▷ SEO and Meta

SEO and Meta

모바일에서 웹사이트 화면 확대 안 되게 하는 방법

export default defineNuxtConfig({
  app: {
    head: {
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no',
    },
  },

---

▷ useSeoMeta

useSeoMeta

<script setup lang="ts">
useSeoMeta({
  title: 'My Amazing Site',
  ogTitle: 'My Amazing Site',
  description: 'This is my amazing site, let me tell you all about it.',
  ogDescription: 'This is my amazing site, let me tell you all about it.',
  ogImage: 'https://example.com/image.png',
  twitterCard: 'summary_large_image',
})
</script>

반응형 태그일 경우

<script setup lang="ts">
const title = ref('My title')

useSeoMeta({
  title,
  description: () => `description: ${title.value}`
})
</script>

---

▷ Data fetching

Data fetching 예제

🧪 useFetch

useFetch

useAsyncData보다 사용법이 간단하다.

const { data: product, pending, error } = await useFetch(() => `https://dummyjson.com/products/${id.value}`)

🧪 useAsyncData

useAsyncData

const { data: product, pending, error } = await useAsyncData(() => {
  return $fetch(`https://dummyjson.com/products/${id.value}`)
}, {
  watch: [id]
})

---

🧪 Data fetching 예제 코드

<script setup>
const id = ref(1)
const { data: product, pending, error } = await useFetch(() => `https://dummyjson.com/products/${id.value}`)

/* Same as:
const { data: product, pending, error } = await useAsyncData(() => {
  return $fetch(`https://dummyjson.com/products/${id.value}`)
}, {
  watch: [id]
})
*/
</script>

<template>
  <div>
    <p>Result of <code>https://dummyjson.com/products/</code><input type="number" v-model="id" /></p>
    <p><button @click="id--">Previous</button> - <button @click="id++">Next</button></p>
    <p v-if="pending">Fetching...</p>
    <pre v-else-if="error">{{ error }}</pre>
    <pre v-else>{{ product }}</pre>
    <NuxtLink to="/">Back home</NuxtLink>
  </div>
</template>

---

🧪 Static Hosting - SSG

Static Hosting

defineNuxtConfig({
  ssr: false,
  nitro: {
    prerender: {
      routes: ['/', '/e-book'], // SSG 적용할 페이지 경로 적는 곳
    }
  }
})

---

🧪 ClientOnly

ClientOnly

컴포넌트를 클라이언트 측에서만 렌더링한다.

<ClientOnly>
  <Comment />
</ClientOnly>

또는 파일 이름에 .client를 붙여 클라이언트 측에서만 렌더링이 되도록 할 수 있다.

| components/
--| Comments.client.vue

/* Comments.client.vue */
<template>
  <div>
    // this component will only be rendered on client side
    <Comments />
  </div>
</template>

❗️주의) .client구성 요소는 마운트된 후에만 렌더링 된다. 렌더링된 템플릿에 사용하려면 onMounted()훅에 .await nextTick()을 추가하면 됨.

👉 Nuxt 예제(공식문서)