Что такое Nuxt

Nuxt — это фреймворк поверх Vue, который упрощает разработку приложений и сайтов.

Если коротко:

Vue — это библиотека
Nuxt — это готовая архитектура + инструменты для Vue

---

Зачем нужен Nuxt

Nuxt решает типичные проблемы Vue-приложений:

✅ Роутинг из коробки

Не нужно настраивать vue-router.

📁

pages/index.vue   → /
pages/about.vue   → /about
pages/user/_id.vue → /user/:id

---

✅ Server-Side Rendering (SSR)

Страницы могут рендериться:

• на сервере (SEO 👍)

• на клиенте (SPA)

• гибридно

Это важно для:

• SEO

• быстрой первой загрузки

• соцсетей (preview)

---

✅ Автоимпорт

Не нужно вручную импортировать:

• компоненты

• composables

• хуки

<script setup>
const route = useRoute() // работает без import
</script>

---

✅ Работа с API

Встроенные:

• server routes

• middleware

• env переменные

// server/api/users.ts
export default () => {
  return [{ id: 1, name: 'Alex' }]
}

---

Чем Nuxt отличается от обычного Vue

Vue	Nuxt
Сам настраиваешь проект	Готовая структура
Роуты вручную	Роуты по папке pages
SPA по умолчанию	SPA / SSR / SSG
Больше конфигурации	Меньше рутины

---

Когда использовать Nuxt

✔ Лендинги
✔ SEO-проекты
✔ Интернет-магазины
✔ Корпоративные сайты
✔ Fullstack (frontend + backend)

---

Когда Nuxt не нужен

❌ Маленькие SPA
❌ Админки без SEO
❌ Если важен минимальный размер бандла

---

Версии

• Nuxt 2 → Vue 2 (устаревающий)

• Nuxt 3 → Vue 3 (Composition API, Nitro, Vite)

👉 В 2026 году актуален Nuxt 3

---

Пример структуры Nuxt 3

pages/
layouts/
components/
composables/
server/
nuxt.config.ts

---