Vue + Nuxt: SSR, server routes, auto-imports

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

my-app/
├── app/
│   ├── components/     ← автоимпорт компонентов
│   ├── composables/    ← автоимпорт composables
│   ├── layouts/        ← шаблоны страниц
│   ├── pages/          ← файловая маршрутизация
│   └── app.vue         ← корневой компонент
├── server/
│   ├── api/            ← API-эндпоинты
│   ├── routes/         ← серверные роуты
│   └── middleware/     ← серверная middleware
├── content/            ← Markdown-контент
├── public/             ← статические файлы
├── nuxt.config.ts      ← конфигурация
└── package.json

pages/
├── index.vue              → /
├── about.vue              → /about
├── users/
│   ├── index.vue          → /users
│   ├── [id].vue           → /users/:id
│   └── [id]/
│       └── settings.vue   → /users/:id/settings
└── blog/
    ├── index.vue          → /blog
    └── [...slug].vue      → /blog/* (catch-all)

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

<template>
  <NuxtLink to="/about">О проекте</NuxtLink>
  <NuxtLink :to="`/users/${userId}`">Профиль</NuxtLink>
</template>

components/
├── AppHeader.vue      → <AppHeader>
├── AppFooter.vue      → <AppFooter>
└── user/
    └── UserCard.vue   → <UserCard>

// composables/useCounter.ts
export function useCounter(initial = 0) {
  const count = ref(initial)
  const increment = () => count.value++
  return { count, increment }
}

<script setup lang="ts">
// Без импорта!
const { count, increment } = useCounter()
</script>

<script setup lang="ts">
const { data: users, pending, error, refresh } = await useFetch<User[]>('/api/users')
</script>

<template>
  <div v-if="pending">Загрузка...</div>
  <div v-else-if="error">{{ error.message }}</div>
  <ul v-else>
    <li v-for="user in users" :key="user.id">{{ user.name }}</li>
  </ul>
  <button @click="refresh()">Обновить</button>
</template>

const { data } = await useAsyncData('users', () => $fetch<User[]>('/api/users'))

const route = useRoute()
const { data: user } = await useFetch<User>(`/api/users/${route.params.id}`)

// С query-параметрами
const { data: search } = await useFetch('/api/search', {
  query: { q: searchQuery },
})

// С watch — автоматический перезапрос
const { data } = await useFetch('/api/users', {
  query: { page },
  watch: [page],
})

// server/api/users/index.ts
export default defineEventHandler(async () => {
  const users = await db.users.findMany()
  return users
})

// server/api/users/[id].ts
export default defineEventHandler(async (event) => {
  const id = getRouterParam(event, 'id')
  const user = await db.users.findById(Number(id))

  if (!user) {
    throw createError({ statusCode: 404, message: 'Пользователь не найден' })
  }

  return user
})

// server/api/users/index.ts
export default defineEventHandler(async (event) => {
  const body = await readBody(event)

  if (!body.name || !body.email) {
    throw createError({ statusCode: 400, message: 'name и email обязательны' })
  }

  const user = await db.users.create(body)
  return user
})

// server/api/search.ts
export default defineEventHandler(async (event) => {
  const query = getQuery(event)
  const page = Number(query.page) || 1
  const limit = Number(query.limit) || 10

  const results = await db.users.search({
    q: query.q as string,
    page,
    limit,
  })

  return results
})

<!-- layouts/default.vue -->
<template>
  <div>
    <AppHeader />
    <main>
      <slot />
    </main>
    <AppFooter />
  </div>
</template>

<!-- pages/about.vue -->
<script setup lang="ts">
definePageMeta({
  layout: 'default',
})
</script>

<script setup lang="ts">
useHead({
  title: 'Главная страница',
  meta: [
    { name: 'description', content: 'Описание страницы' },
    { property: 'og:title', content: 'Главная' },
    { property: 'og:image', content: '/og-image.png' },
  ],
})
</script>

const { data: article } = await useFetch(`/api/articles/${slug}`)

useHead({
  title: () => article.value?.title ?? 'Загрузка...',
  meta: [
    { name: 'description', content: () => article.value?.excerpt ?? '' },
  ],
})

// nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true },

  modules: [
    '@nuxt/ui',
    '@nuxt/content',
    '@nuxtjs/tailwindcss',
  ],

  runtimeConfig: {
    // Серверные (не暴露 клиенту)
    apiSecret: process.env.API_SECRET,

    // Публичные (доступны на клиенте)
    public: {
      apiBase: process.env.API_BASE ?? 'http://localhost:3000',
    },
  },

  app: {
    head: {
      title: 'Моё приложение',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      ],
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      ],
    },
  },
})

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },         // SSG — статический HTML
    '/api/**': { cors: true },        // CORS для API
    '/admin/**': { ssr: false },      // SPA — без SSR
    '/blog/**': { swr: 3600 },        // ISR — кэш на 1 час
  },
})

const counter = useState('counter', () => 0)

// middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
  const auth = useAuthStore()

  if (!auth.isLoggedIn && to.path.startsWith('/dashboard')) {
    return navigateTo('/login')
  }
})

<script setup lang="ts">
definePageMeta({
  middleware: 'auth',
})
</script>

// middleware/Analytics.global.ts
export default defineNuxtRouteMiddleware((to) => {
  console.log('Переход:', to.path)
})