Pages and routing

<script setup lang="ts">
definePageMeta({
  layout: 'public',
})

useSeoMeta({
  title: 'About',
  description: 'Learn more about our application',
})
</script>

<template>
  <div class="base-container py-8">
    <h1 class="text-4xl font-bold mb-4">About us</h1>
    <p class="text-lg text-muted-foreground">
      This is a simple about page created with Nuxt's file-based routing.
    </p>
  </div>
</template>

<script setup lang="ts">
// This page is automatically protected by the global auth middleware
// Only authenticated users can access routes that aren't in the public list

const userStore = useUserStore()
const { user } = storeToRefs(userStore)

useSeoMeta({
  title: 'Team',
  description: 'Manage your team',
})
</script>

<template>
  <div class="base-container py-8">
    <h1 class="text-4xl font-bold mb-2">Team</h1>
    <p class="text-muted-foreground mb-8">Manage your team members</p>

    <Card v-if="user" class="max-w-2xl">
      <CardHeader>
        <CardTitle>Team owner</CardTitle>
        <CardDescription>Current account information</CardDescription>
      </CardHeader>
      <CardContent>
        <div class="space-y-2">
          <p><strong>Name:</strong> {{ user.name }}</p>
          <p><strong>Email:</strong> {{ user.email }}</p>
        </div>
      </CardContent>
    </Card>
  </div>
</template>

import { User, Home, Users /* other icons */ } from 'lucide-vue-next'

const navigationItems = [
  {
    label: 'Dashboard',
    icon: Home,
    to: '/app/dashboard',
    requiresAuth: true,
  },
  {
    label: 'Team',
    icon: Users,
    to: '/team',
    requiresAuth: true,
  },
  {
    label: 'About',
    icon: Info,
    to: '/about',
    requiresAuth: false,
  },
  // ... other items
]

<script setup lang="ts">
const route = useRoute()
const slug = route.params.slug

// Fetch post data using the slug
// const post = await fetchPost(slug)

useSeoMeta({
  title: `Blog post: ${slug}`,
})
</script>

<template>
  <div class="base-container py-8">
    <h1 class="text-4xl font-bold mb-4">Blog post: {{ slug }}</h1>
    <p>Content for slug: {{ slug }}</p>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'public',
})

useSeoMeta({
  title: 'Pricing',
  description: 'View our pricing plans',
})
</script>

<template>
  <div class="base-container py-12">
    <h1 class="text-4xl font-bold text-center mb-8">Pricing plans</h1>
    <!-- Pricing content -->
  </div>
</template>

<script setup lang="ts">
const userStore = useUserStore()
const { user } = storeToRefs(userStore)

// Fetch user-specific data
const { data: stats } = await useFetch('/api/user/stats')

useSeoMeta({
  title: 'Dashboard',
  description: 'Your personal dashboard',
})
</script>

<template>
  <div class="base-container py-8">
    <h1 class="text-4xl font-bold mb-2">Welcome back, {{ user?.name }}!</h1>
    <p class="text-muted-foreground mb-8">Here's your activity overview</p>

    <!-- Dashboard content -->
    <div class="grid grid-cols-3 gap-4">
      <!-- Stats cards -->
    </div>
  </div>
</template>

<script setup lang="ts">
const route = useRoute()
const productId = route.params.id

// Fetch product data
const { data: product } = await useFetch(`/api/products/${productId}`)

// Handle not found
if (!product.value) {
  throw createError({ statusCode: 404, statusMessage: 'Product not found' })
}

useSeoMeta({
  title: product.value.name,
  description: product.value.description,
})
</script>

<template>
  <div class="base-container py-8">
    <h1 class="text-4xl font-bold mb-4">{{ product.name }}</h1>
    <p class="text-lg text-muted-foreground mb-8">{{ product.description }}</p>
    <!-- Product details -->
  </div>
</template>