0Pricing
Vue Academy · Lezione

Struttura dei progetti Nuxt 3 e routing basato sui file

Import automatico di pages/, layouts/ e components/, denominazione dei file per le route nidificate, route catch-all.

Struttura dei progetti Nuxt 3 e routing basato sui file è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Che cos'è Nuxt 3

Nuxt 3 è un meta-framework basato su Vue 3. Aggiunge il rendering lato server, il routing basato sui file, gli import automatici e un motore server, permettendovi di creare app Vue full-stack con quasi nessuna configurazione.

La directory pages

La directory pages/ definisce il routing. Ogni file .vue diventa automaticamente una route, senza bisogno di una configurazione manuale del router. pages/about.vue corrisponde a /about.

pages/
  index.vue      ->  /
  about.vue      ->  /about
  contact.vue    ->  /contact

Abilitare il router

Il router si attiva non appena esiste una directory pages/. Aggiungete <NuxtPage /> in app.vue per visualizzare la pagina corrispondente.

<!-- app.vue -->
<template>
  <NuxtPage />
</template>

Route annidate

Le cartelle creano percorsi annidati. pages/blog/index.vue gestisce /blog e pages/blog/archive.vue gestisce /blog/archive.

pages/
  blog/
    index.vue    ->  /blog
    archive.vue  ->  /blog/archive

Segmenti dinamici con [id]

Racchiudete un nome di file tra parentesi quadre per creare un segmento dinamico. pages/users/[id].vue corrisponde a /users/42, esponendo l'id come parametro della route.

// pages/users/[id].vue
const route = useRoute()
const id = route.params.id // "42"

Catch-all con [...slug]

La forma spread [...slug].vue è un catch-all. Corrisponde a percorsi di qualsiasi profondità ed è ideale per i contenuti CMS o per gestire pagine 404 personalizzate.

pages/
  [...slug].vue  ->  /a, /a/b, /a/b/c ...

Directory layouts

La cartella layouts/ contiene componenti wrapper condivisi tra le pagine, come intestazioni, barre laterali e piè di pagina. layouts/default.vue avvolge ogni pagina, salvo sovrascrittura.

<!-- layouts/default.vue -->
<template>
  <header>My Site</header>
  <slot />
</template>

Scegliere un layout

Una pagina sceglie un layout con definePageMeta. Lo slot nel layout visualizza il contenuto della pagina.

<script setup>
definePageMeta({ layout: 'admin' })
</script>

Componenti importati automaticamente

Tutto ciò che si trova in components/ viene importato automaticamente: non serve alcuna istruzione import. Le sottocartelle aggiungono un prefisso al nome: components/base/Button.vue diventa <BaseButton />.

components/
  TheHeader.vue   ->  <TheHeader />
  base/Button.vue ->  <BaseButton />

Composable importati automaticamente

Anche la directory composables/ viene importata automaticamente. Le funzioni esportate al suo interno e le funzionalità integrate di Nuxt, come useFetch, possono essere usate ovunque senza import.

// composables/useCounter.ts
export const useCounter = () => useState("c", () => 0)
// usable in any component without importing

Altre directory importanti

Nuxt definisce anche plugins/ (eseguiti all'avvio), middleware/ (guardie delle route), server/ (API e logica lato server) e public/ (risorse statiche servite così come sono).

Verifica rapida

Verificate la vostra conoscenza della struttura e del routing di Nuxt.

Riepilogo

Avete imparato la struttura di Nuxt:

  • pages/ fornisce il routing basato sui file; le cartelle annidano le route.
  • [id] è un segmento dinamico, mentre [...slug] è un catch-all.
  • layouts/ avvolge le pagine; il layout viene scelto tramite definePageMeta.
  • components/ e composables/ vengono importati automaticamente.

Domande Frequenti

La lezione «Struttura dei progetti Nuxt 3 e routing basato sui file» è gratuita?

Sì — il testo completo di «Struttura dei progetti Nuxt 3 e routing basato sui file» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Struttura dei progetti Nuxt 3 e routing basato sui file»?

Import automatico di pages/, layouts/ e components/, denominazione dei file per le route nidificate, route catch-all. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Struttura dei progetti Nuxt 3 e routing basato sui file»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Struttura dei progetti Nuxt 3 e routing basato sui file
  2. Recupero dei dati: useFetch e useAsyncData
  3. Route server e endpoint API di Nuxt
  4. Modalità SSR, SSG e SPA a confronto
← Torna a Vue Academy