Что такое Nuxt?

Nuxt: фреймворк на основе Vue.js

Nuxt — это мощный фреймворк, построенный на Vue.js, который упрощает разработку универсальных (Universal/SSR) и статических веб-приложений. Он решает множество типичных проблем, которые возникают при разработке полнофункциональных SPA приложений.

Основные концепции

Nuxt предоставляет структурированный подход к разработке, аналогично Next.js для React. Он включает:

• Автоматическую маршрутизацию — routes генерируются из структуры файлов в папке pages/
• Server-Side Rendering (SSR) — рендер на сервере для лучшего SEO
• Static Site Generation (SSG) — генерация статических файлов
• API Routes — встроенная поддержка backend'а
• Middleware — обработка запросов до загрузки страницы

Версии Nuxt

Nuxt 2 (на Vue 2):

• Стабильная версия, широко используется в production
• Боле зрелая экосистема
• Медленнее чем Nuxt 3

Nuxt 3 (на Vue 3):

• Современная версия с лучшей производительностью
• Использует Composition API
• TypeScript out-of-the-box
• Лучше оптимизирована для production

Структура проекта

my-nuxt-app/
├── app.vue           # Корневой компонент
├── nuxt.config.ts    # Конфигурация
├── pages/
│   ├── index.vue     # /
│   ├── about.vue     # /about
│   └── posts/
│       ├── index.vue # /posts
│       └── [id].vue  # /posts/:id (динамический)
├── components/       # Глобальные компоненты
├── layouts/          # Layouts
├── middleware/       # Middleware
├── server/
│   ├── api/          # API routes
│   └── routes/       # Server routes
├── public/           # Статические файлы
└── package.json

Маршрутизация (Router)

Файловая маршрутизация — файлы в pages/ автоматически становятся routes:

<!-- pages/index.vue -->
<template>
  <h1>Home page</h1>
</template>

Динамические routes:

<!-- pages/posts/[id].vue -->
<template>
  <div>
    <h1>Post {{ $route.params.id }}</h1>
  </div>
</template>

<script setup>
const route = useRoute();
const id = route.params.id;
</script>

Навигация:

<template>
  <div>
    <!-- Используем компонент NuxtLink вместо a -->
    <NuxtLink to="/about">About</NuxtLink>
    <NuxtLink to="/posts/123">Post 123</NuxtLink>
  </div>
</template>

Server-Side Rendering (SSR)

Nuxt автоматически рендерит компоненты на сервере, что даёт преимущества:

// Код выполняется и на сервере, и в браузере
export default defineNuxtComponent({
  setup() {
    const title = ref('Hello');
    
    // Этот код выполнится на сервере
    onMounted(() => {
      console.log('Mounted in browser');
    });

    return { title };
  }
});

Fetching Data

useFetch — хук для загрузки данных, работает и на сервере, и в браузере:

<script setup>
const { data: posts, pending, error } = await useFetch('/api/posts');
</script>

<template>
  <div>
    <div v-if="pending">Loading...</div>
    <div v-else-if="error">Error: {{ error }}</div>
    <ul v-else>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>

useAsyncData — более низкоуровневый хук с большей гибкостью:

<script setup>
const { data: user } = await useAsyncData('user', () => 
  $fetch('/api/user')
);
</script>

Middleware

Middleware выполняется перед загрузкой страницы:

// middleware/auth.ts
export default defineRouteMiddleware((to, from) => {
  const user = useAuthStore().user;
  
  if (!user && to.path === '/dashboard') {
    return navigateTo('/login');
  }
});

Использование в компоненте:

<script setup>
defineRouteMiddleware('auth');
</script>

Layouts

Layouts — шаблоны для страниц:

<!-- layouts/default.vue -->
<template>
  <div>
    <header>Header</header>
    <main>
      <slot /> <!-- Содержимое страницы -->
    </main>
    <footer>Footer</footer>
  </div>
</template>

Использование:

<!-- pages/about.vue -->
<script setup>
definePageMeta({
  layout: 'default'
});
</script>

<template>
  <h1>About page</h1>
</template>

API Routes

Создание backend endpoints прямо в Nuxt:

// server/api/posts.ts
export default defineEventHandler(async (event) => {
  const query = getQuery(event);
  
  // Можно использовать базу данных
  const posts = await db.posts.findMany();
  
  return posts;
});

Они доступны по GET /api/posts.

Плюсы Nuxt

• SEO friendly — SSR помогает с индексацией поисковиками
• Быстро — автоматическая оптимизация производительности
• DX (Developer Experience) — удобный API и документация
• Полнофункциональность — SSR, SSG, API routes, middleware в одном пакете
• Zero-config — работает из коробки с хорошими дефолтами

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

• Когда нужен SEO — блог, новости, e-commerce
• Когда нужны API routes — как простой backend
• Когда хочется Vue.js + Next.js удобство — разработчикам, которые привыкли к Vue
• Когда нужна быстрая разработка — благодаря file-based routing

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

• Чисто SPA приложение — лучше просто Vue.js или другой фреймворк
• Если команде незнаком Vue — кривая обучения выше
• Очень простые сайты — может быть избыточен

Nuxt — отличный выбор для современной веб-разработки, особенно если вы работаете с Vue.js и нужна полнофункциональная платформа для создания приложений производственного уровня.