Nuxt: структура, file-based routing, auto-imports

↑ 7.5 SSR и Nuxt · ← Предыдущая · → Следующая

Желательно~3 мин чтенияУровень: senior

Зачем это на собесе

Nuxt — стандартный SSR-фреймворк Vue; спрашивают структуру проекта и «магию» соглашений.

Структура

├─ app/
│  ├─ pages/           # маршруты по файлам
│  ├─ components/      # авто-импорт компонентов
│  ├─ composables/     # авто-импорт composables
│  ├─ layouts/         # обёртки страниц
│  ├─ middleware/      # route middleware
│  ├─ plugins/         # плагины приложения
│  └─ app.vue
├─ server/
│  ├─ api/             # API-маршруты (/api/*)
│  ├─ routes/, middleware/, utils/
├─ public/             # статика
└─ nuxt.config.ts

Маршрутизация

Файл	URL
pages/index.vue	/
pages/users/index.vue	/users
pages/users/[id].vue	/users/:id
pages/[...slug].vue	catch-all
pages/users.vue + users/	родитель с <NuxtPage /> для вложенных

<script setup lang="ts">
definePageMeta({ layout: 'admin', middleware: 'auth' })
const route = useRoute()
</script>

Auto-imports

Компоненты из components/, composables из composables/, утилиты Vue (ref, computed) и Nuxt (useFetch, useRoute) доступны без import. Типы генерируются в .nuxt/.

Режимы рендеринга по маршрутам

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },              // SSG
    '/blog/**': { isr: 3600 },             // ISR
    '/admin/**': { ssr: false },           // CSR (SPA)
    '/api/**': { cors: true },
  },
})

Модули

@nuxt/image, @nuxt/content, @pinia/nuxt, @nuxtjs/i18n, nuxt-auth-utils, @vueuse/nuxt.

Nitro

Серверный движок Nuxt: универсальный, деплой на Node, serverless, edge (Cloudflare, Vercel).

Вопросы с ответами

Как в Nuxt задать разные режимы рендеринга?

Через routeRules в nuxt.config.ts: prerender, isr, swr, ssr: false для групп маршрутов.

Недостатки auto-imports?

Меньше явности, IDE и линтер нужны типы .nuxt; при конфликте имён сложнее понять источник.