# Что такое 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
- хуки

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

```

---

### ✅ Работа с API

Встроенные:

- server routes
- middleware
- env переменные

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

```

---

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

<table id="bkmrk-vue-nuxt-%D0%A1%D0%B0%D0%BC-%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%B0%D0%B8"><thead><tr><th>Vue</th><th>Nuxt</th></tr></thead><tbody><tr><td>Сам настраиваешь проект</td><td>Готовая структура</td></tr><tr><td>Роуты вручную</td><td>Роуты по папке `pages`</td></tr><tr><td>SPA по умолчанию</td><td>SPA / SSR / SSG</td></tr><tr><td>Больше конфигурации</td><td>Меньше рутины</td></tr></tbody></table>

---

## Когда использовать 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

```

---