Розроблення фронтенду сайту на Nuxt.js
Nuxt.js — мета-фреймворк для Vue 3 з SSR, SSG, маршрутизацією на основі файлів та серверними можливостями. Для Vue це те, що Next.js для React. Nuxt 3 використовує Nitro як серверний двигун — розгортається на 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 — без повторного запиту на клієнті (дедуплікація).
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-endpoint'ами. .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>
Або через composable useSeoMeta:
useSeoMeta({ title: 'Title', ogTitle: 'OG Title', description: 'Desc' });
Nuxt Модулі
Екосистема готових до використання модулів:
-
@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 тижнів.