Routage fondé sur les fichiers et imports automatiques

Nuxt 3 — Cadre SSR de Vue

Répertoire 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

Routes dynamiques avec [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>

Routes attrape-tout

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

Mises en page

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

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

Mise en page par défaut

Navigation avec NuxtLink

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

Navigation programmatique

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

Imports automatiques — Composants

components/
  AppHeader.vue
  UserCard.vue

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

Imports automatiques — Fonctions 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>

Imports automatiques — Utilitaires

Désactiver les imports automatiques

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

Vérification rapide

Récapitulatif : routage et imports automatiques