Начало работы с Nuxt.js

Если вы Vue-разработчик, стремящийся создавать production-ready приложения с современным рабочим процессом, Nuxt 4 предоставляет вам самый быстрый путь вперёд. Nuxt строится на основе Vue 3 с рендерингом на стороне сервера, гибридным рендерингом, файловой маршрутизацией и унифицированной моделью развёртывания, которая работает в средах Node, статических хостингов, serverless и edge.

Это руководство для начинающих проведёт вас через создание вашего первого приложения на Nuxt 4 с использованием актуальных настроек по умолчанию, таких как Vue 3, Vite, TypeScript, composables и Nitro.

Что такое Nuxt 4 и почему вам стоит его использовать?

Nuxt 4 — это текущий мажорный релиз фреймворка Nuxt и рекомендуемый выбор для новых Vue-приложений в конце 2025 года. Он использует Vue 3, Vite и серверный движок Nitro для обеспечения быстрой разработки и гибкой производственной архитектуры.

В отличие от обычных Vue-приложений, Nuxt 4 предоставляет SSR из коробки, автоматически управляет маршрутизацией, обрабатывает загрузку данных как на сервере, так и на клиенте, и поставляется с предсказуемой, основанной на соглашениях структурой проекта.

Vue 3 + Vite по умолчанию

Nuxt 4 использует Vite для dev-сервера и конвейера сборки. Это даёт вам практически мгновенную горячую замену модулей, быстрый холодный старт и высоко оптимизированные выходные бандлы.

Composition API Vue 3 и TypeScript-first дизайн обеспечивают строгий вывод типов, лучшую организацию кода и предсказуемое поведение компонентов.

TypeScript без необходимости настройки

Поддержка TypeScript встроена. Nuxt автоматически генерирует типы на основе директорий вашего проекта, API-маршрутов, middleware и компонентов. Ваша IDE понимает весь ваш проект с момента сохранения.

Настройка вашего первого проекта на Nuxt 4

Установка с помощью npm create nuxt@latest

Создайте новый проект с использованием современного CLI Nuxt 4:

npm create nuxt@latest my-app
cd my-app
npm install
npm run dev

Это настраивает проект Nuxt 4 с TypeScript, Vite, Nitro и автоимпортируемыми composables, готовыми к работе.

Обзор структуры директорий

Свежий проект Nuxt 4 включает:

• pages/ — Файловая маршрутизация
• components/ — Автоимпортируемые компоненты
• composables/ — Переиспользуемая логика с автоматическим импортом
• server/api/ — Серверные эндпоинты на основе Nitro
• public/ — Статические ресурсы
• nuxt.config.ts — TypeScript-first конфигурация

Эта структура устраняет накладные расходы на настройку и делает всё предсказуемым.

Основные концепции: Pages, Layouts, Composables, Auto-Imports

Файловая маршрутизация в Nuxt 4

Добавьте Vue-файл в pages/, и Nuxt автоматически создаст маршрут:

<!-- pages/products/[id].vue -->
<script setup lang="ts">
const route = useRoute()
const id = route.params.id
</script>

<template>
  <h1>Product {{ id }}</h1>
</template>

Динамические параметры маршрута используют квадратные скобки.

Layouts для общего UI

Layouts позволяют создавать общие обёртки вокруг страниц:

<!-- layouts/default.vue -->
<template>
  <AppHeader />
  <main><slot /></main>
  <AppFooter />
</template>

Страницы автоматически используют layout по умолчанию. Вы можете переключать layouts с помощью definePageMeta.

Composables и автоимпорты

Composables внутри composables/ автоматически импортируются везде:

// composables/useCounter.ts
export const useCounter = () => {
  const count = useState('count', () => 0)
  const inc = () => count.value++
  return { count, inc }
}

Никаких операторов импорта, никакого шаблонного кода — Nuxt обрабатывает всё это.

Загрузка данных в Nuxt 4

useFetch для SSR-совместимых запросов

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

<script setup lang="ts">
const { data: posts } = await useFetch('/api/posts')
</script>

Это избегает двойной загрузки между сервером и клиентом и бесшовно работает с Nitro.

API-маршруты через Nitro

Создавайте серверные эндпоинты в server/api/:

// server/api/posts.get.ts
export default defineEventHandler(async () => {
  const posts = await $fetch('https://jsonplaceholder.typicode.com/posts')
  return posts.slice(0, 5)
})

Nitro автоматически оптимизирует эти эндпоинты для развёртывания в Node, статических, serverless или edge окружениях.

useAsyncData для пользовательской логики

Если вам нужен больший контроль:

<script setup lang="ts">
const { data } = await useAsyncData('posts', () =>
  $fetch('/api/posts', { query: { limit: 5 } })
)
</script>

Управление состоянием с Pinia

Для состояния на уровне приложения Nuxt 4 использует Pinia:

npm install @pinia/nuxt

Включите его:

export default defineNuxtConfig({
  modules: ['@pinia/nuxt']
})

Создайте store:

// stores/user.ts
export const useUserStore = defineStore('user', () => {
  const profile = ref(null)
  async function load() {
    profile.value = await $fetch('/api/user')
  }
  return { profile, load }
})

Pinia напрямую интегрируется с автоимпортами Nuxt и поведением SSR.

Режимы рендеринга в Nuxt 4

Рендеринг на стороне сервера по умолчанию

Nuxt 4 рендерит страницы на сервере для SEO и производительности. Вы можете настроить рендеринг для каждого маршрута:

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/admin/**': { ssr: false },
    '/blog/**': { isr: 3600 }
  }
})

Это позволяет создавать гибридные приложения, которые сочетают SSR, предварительно отрендеренные статические страницы и динамические секции только для клиента.

Статическая генерация и гибридное развёртывание

Генерируйте статический вывод при необходимости:

npm run generate

Вы можете предварительно рендерить маркетинговые страницы, сохранять дашборды динамическими и запускать всё через Nitro.

Развёртывание вашего приложения на Nuxt 4

Сборка для production

npm run build

Nuxt выводит директорию .output/, содержащую серверный код, клиентские ресурсы и пресеты для каждой основной платформы хостинга.

Платформо-независимое развёртывание

Развёртывайте на:

• Node-серверах
• Статических хостингах
• Serverless платформах (AWS, Vercel, Netlify)
• Edge-сетях (Cloudflare Workers, Vercel Edge)

Nitro автоматически выбирает правильный пресет.

Заключение

Начать работу с Nuxt.js сегодня означает использовать Nuxt 4.
С SSR по умолчанию, гибридным рендерингом, автоимпортами, composables и Nitro, обеспечивающим развёртывание, Nuxt 4 даёт вам всё необходимое для создания быстрых, современных, поддерживаемых Vue-приложений.

Начните с:

npm create nuxt@latest

— и вы уже на правильном фундаменте.

Часто задаваемые вопросы

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.