[Nuxt] 🧪Nuxt 사용법 (v3)

▷ Nuxt Routing

🧪 Routing

🧪 Dynamic Routing

| 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>

🧪 Catch-all Route

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

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

🧪 NuxtLink

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

🧪 useRouter

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

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

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

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

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

🧪 useRoute

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

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

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

▷ Nuxt layouts

🧪 layouts

/* 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>

-| 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

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

▷ 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

🧪 useFetch

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

🧪 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

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

🧪 ClientOnly

<ClientOnly>
  <Comment />
</ClientOnly>

| components/
--| Comments.client.vue

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