Nuxt 3 study memo

my-nuxt-app/
├── app.vue
├── package.json
├── node_modules/
└── html/　　　　　 <-- Contains: your static HTML/CSS files)

Enable Routing with the pages/ Directory
Create a folder:
pages/
└── index.vue　　　　　 <-- homepage route "/"

Use <NuxtPage /> to Activate Routing

<template>
  <nav>Navigation Bar</nav>
  <NuxtPage />       <!-- THIS loads the correct page -->
  <footer>Footer</footer>
</template>

This renders the correct component depending on the route:
/ 　　　　　--> loads pages/index.vue
/cars　　　　--> 404 (until you create pages/cars.vue)

Resulting Structure

my-nuxt-app/
├── app.vue 　　　　<-- Global layout (Nav + + Footer)
├── pages/
│ └── index.vue 　　　　<-- Home page
├── html/ 　　　　　　<-- Old static HTML files (for reference)
├── package.json
└── node_modules/

Problem with <a href="/">
<a href="/">Home</a>
・Triggers a full page reload
・Breaks the SPA behavior
・Slower and less smooth

<NuxtLink>
<NuxtLink to="/">Home</NuxtLink>
・Client-side navigation
・No full page reload
・Auto-imported by Nuxt (no need to import NuxtLink)

Component Example

<template>
  <nav>
    <NuxtLink to="/">Home</NuxtLink>
  </nav>
</template>

Flat Route Structure
pages/
└── city/
　　　└── [city]/
　　　　　　└── car/
　　　　　　　　　└── [[make]].vue <-- This handles everything

Nested Route Structure Example

pages/
└── city/
　　└── [city]/
　　　　　　└── car/
　　　　　　　　├── index.vue <-- /city/:city/car
　　　　　　　　└── [[make]].vue <-- /city/:city/car/:make? (optional)