Что такое 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