ファイルベースルーティングと自動インポート

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

// 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
  }
});

クイックチェック

振り返り：ルーティングと自動インポート