Разработка фронтенда сайта на Nuxt.js
Nuxt.js — мета-фреймворк для Vue 3 с SSR, SSG, файловой маршрутизацией и серверными возможностями. Для Vue то же, что Next.js для React. Nuxt 3 использует Nitro как server engine — он деплоится на Node.js, Vercel, Netlify Edge Functions, Cloudflare Workers.
Файловая маршрутизация
pages/
├── index.vue → /
├── about.vue → /about
├── blog/
│ ├── index.vue → /blog
│ └── [slug].vue → /blog/:slug
└── [...slug].vue → catch-all маршрут
Каждый файл в pages/ — маршрут. Никакой конфигурации роутера.
useAsyncData и useFetch
<script setup>
const { data: posts, pending, error } = await useFetch('/api/posts', {
query: { page: 1, limit: 10 },
lazy: false, // ждём данные до рендера (SSR)
});
// Или с трансформацией
const { data } = await useAsyncData('posts', () =>
$fetch('/api/posts').then(r => r.items)
);
</script>
useFetch и useAsyncData на сервере выполняются один раз, результат передаётся клиенту через useNuxtApp().payload — без повторного запроса на клиенте (deduplication).
Server Routes (Nitro)
Nuxt 3 позволяет писать серверную логику рядом с UI:
// server/api/posts/[id].get.ts
export default defineEventHandler(async (event) => {
const id = getRouterParam(event, 'id');
const post = await db.post.findUnique({ where: { id: Number(id) } });
if (!post) throw createError({ statusCode: 404 });
return post;
});
Файлы в server/api/ становятся API-эндпоинтами. .get.ts, .post.ts — HTTP-метод определяется именем файла.
Nuxt Content
Плагин @nuxt/content превращает Markdown/YAML файлы в базу данных:
<script setup>
const { data: post } = await useAsyncData(() =>
queryContent('/blog').where({ _path: '/blog/my-post' }).findOne()
);
</script>
<template>
<ContentRenderer :value="post" />
</template>
Идеально для документационных сайтов, блогов, контент-сайтов.
SEO и useHead
<script setup>
useHead({
title: 'Заголовок страницы | Сайт',
meta: [
{ name: 'description', content: 'Описание' },
{ property: 'og:image', content: '/og.jpg' },
],
link: [{ rel: 'canonical', href: 'https://example.com/page' }],
});
</script>
Или через useSeoMeta composable:
useSeoMeta({ title: 'Title', ogTitle: 'OG Title', description: 'Desc' });
Nuxt Modules
Экосистема ready-to-use модулей:
-
@nuxt/image— оптимизация изображений (аналог Next Image) -
@nuxtjs/tailwindcss— Tailwind CSS -
@pinia/nuxt— Pinia SSR-совместимо -
nuxt-auth-utils— упрощённая авторизация -
@nuxt/ui— UI-компоненты от команды Nuxt
Деплой
Команда nuxt build + node .output/server/index.mjs — Node.js сервер. nuxt generate — статический сайт. Vercel/Netlify определяют Nuxt автоматически. Docker: стандартный Node.js образ.
Сроки
Сайт на Nuxt.js с SSR/SSG, Nuxt Content, SEO: 1–3 недели. SPA с бэкенд-интеграцией, авторизацией, сложным UI: 2–5 недель.