파일 기반 라우팅과 자동 가져오기

Nuxt 3 — Vue의 SSR 프레임워크

pages/ 디렉터리

pages/
  index.vue        // route: /
  about.vue        // route: /about
  blog/
    index.vue      // route: /blog
    [slug].vue     // route: /blog/:slug
  users/
    [id]/
      profile.vue  // route: /users/:id/profile

[param]을 사용한 동적 라우트

<!-- pages/blog/[slug].vue -->
<script setup>
const route = useRoute();
const { data: post } = await useFetch(`/api/posts/${route.params.slug}`);
</script>

<template>
  <article>
    <h1>{{ post.title }}</h1>
    <div v-html="post.body" />
  </article>
</template>

모든 경로와 일치하는 라우트

// pages/docs/[...slug].vue
// matches /docs/getting-started, /docs/api/auth, etc.

<script setup>
const route = useRoute();
console.log(route.params.slug); // ['api', 'auth']
</script>

레이아웃

<!-- layouts/dashboard.vue -->
<template>
  <div class="dashboard">
    <Sidebar />
    <main><slot /></main>
  </div>
</template>

<!-- pages/dashboard/index.vue -->
<script setup>
definePageMeta({ layout: 'dashboard' });
</script>

기본 레이아웃

NuxtLink를 사용한 탐색

<template>
  <nav>
    <NuxtLink to="/">Home</NuxtLink>
    <NuxtLink to="/blog">Blog</NuxtLink>
    <NuxtLink :to="`/users/${userId}`">Profile</NuxtLink>
  </nav>
</template>

프로그래밍 방식 탐색

<script setup>
async function onLogin() {
  await login(form);
  await navigateTo('/dashboard');
}
</script>

자동 가져오기 — 컴포넌트

components/
  AppHeader.vue
  UserCard.vue

<!-- any page or component: -->
<template>
  <AppHeader />
  <UserCard :user="user" />
</template>

자동 가져오기 — 컴포저블

// composables/useCounter.ts
export const useCounter = () => {
  const count = ref(0);
  const increment = () => count.value++;
  return { count, increment };
};

<!-- any component: -->
<script setup>
const { count, increment } = useCounter(); // no import needed!
</script>

자동 가져오기 — 유틸리티

자동 가져오기 비활성화

export default defineNuxtConfig({
  imports: {
    autoImport: false // disable all auto-imports
  }
});

빠른 확인

복습: 라우팅과 자동 가져오기