NUXT PRACTICAL 1: ROUTING IN NUXT AND SHARED LAYOUTS
=================================================================

================================================

AIM:
Create multiple pages and navigate between them using Nuxt file-based
routing. Use one shared layout for the pages.

PROJECT STRUCTURE:
nuxt-routing/
|
|-- app.vue
|-- layouts/
|   |-- default.vue
|-- pages/
    |-- index.vue
    |-- about.vue
    |-- contact.vue

STEP 1: Create the project
--------------------------
npx nuxi@latest init nuxt-routing
cd nuxt-routing
npm install

STEP 2: app.vue
---------------
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

STEP 3: layouts/default.vue
---------------------------
<template>
  <div>
    <header>
      <h1>My Nuxt Website</h1>

      <nav>
        <NuxtLink to="/">Home</NuxtLink>
        <NuxtLink to="/about">About</NuxtLink>
        <NuxtLink to="/contact">Contact</NuxtLink>
      </nav>
    </header>

    <main>
      <slot />
    </main>
  </div>
</template>

<style scoped>
header {
  padding: 20px;
  background: #eeeeee;
}

nav {
  display: flex;
  gap: 20px;
}

a {
  color: blue;
}

main {
  padding: 20px;
}
</style>

STEP 4: pages/index.vue
-----------------------
<template>
  <div>
    <h2>Home Page</h2>
    <p>Welcome to my Nuxt website.</p>
  </div>
</template>

STEP 5: pages/about.vue
-----------------------
<template>
  <div>
    <h2>About Page</h2>
    <p>This is the about page.</p>
  </div>
</template>

STEP 6: pages/contact.vue
-------------------------
<template>
  <div>
    <h2>Contact Page</h2>
    <p>Email: student@example.com</p>
  </div>
</template>

RUN:
npm run dev

Open the local URL shown in the terminal, usually:
http://localhost:3000

CONCEPT:
- Nuxt automatically creates routes from files inside pages/.
- index.vue represents the home page (/).
- about.vue represents /about.
- contact.vue represents /contact.
- NuxtLink navigates between pages.
- The default layout is shared by pages.
- <slot /> displays the current page inside the layout.


================================================
