nuxt

<!-- pages/index.vue — Auto-routed to / -->
<script setup lang="ts">
const { data: posts } = await useFetch('/api/posts')
</script>

<template>
  <div>
    <h1>Blog</h1>
    <div v-for="post in posts" :key="post.id" class="post-card">
      <NuxtLink :to="`/posts/${post.slug}`">
        <h2>{{ post.title }}</h2>
        <p>{{ post.excerpt }}</p>
      </NuxtLink>
    </div>
  </div>
</template>

<!-- pages/posts/[slug].vue — Dynamic route -->
<script setup lang="ts">
const route = useRoute()
const { data: post, error } = await useAsyncData(
  `post-${route.params.slug}`,
  () => $fetch(`/api/posts/${route.params.slug}`)
)

if (error.value) {
  throw createError({ statusCode: 404, message: 'Post not found' })
}

// SEO
useHead({
  title: post.value?.title,
  meta: [{ name: 'description', content: post.value?.excerpt }],
})

useSeoMeta({
  ogTitle: post.value?.title,
  ogImage: post.value?.coverImage,
})
</script>

<template>
  <article v-if="post">
    <h1>{{ post.title }}</h1>
    <div v-html="post.content" />
  </article>
</template>

// server/api/posts/index.get.ts
export default defineEventHandler(async () => {
  const posts = await db.posts.findMany({ orderBy: { createdAt: 'desc' } })
  return posts
})

// server/api/posts/[slug].get.ts
export default defineEventHandler(async (event) => {
  const slug = getRouterParam(event, 'slug')
  const post = await db.posts.findUnique({ where: { slug } })
  if (!post) throw createError({ statusCode: 404, message: 'Not found' })
  return post
})

// server/api/posts/index.post.ts
export default defineEventHandler(async (event) => {
  const body = await readBody(event)
  const session = await requireAuth(event)
  return db.posts.create({ data: { ...body, authorId: session.userId } })
})

// server/middleware/auth.ts
export default defineEventHandler(async (event) => {
  const path = getRequestURL(event).pathname
  if (!path.startsWith('/api/admin')) return
  const session = await getSession(event)
  if (!session) throw createError({ statusCode: 401 })
  event.context.user = session.user
})

// composables/useAuth.ts — Auto-imported everywhere
export function useAuth() {
  const user = useState<User | null>('user', () => null)
  const isLoggedIn = computed(() => !!user.value)

  async function login(email: string, password: string) {
    user.value = await $fetch('/api/auth/login', { method: 'POST', body: { email, password } })
  }

  async function logout() {
    await $fetch('/api/auth/logout', { method: 'POST' })
    user.value = null
    navigateTo('/login')
  }

  return { user, isLoggedIn, login, logout }
}

npx nuxi@latest init my-app
cd my-app && npm install
npm run dev