Что такое Nuxt
Nuxt — фреймворк поверх Vue 3. Vue отвечает за компоненты и реактивность, а Nuxt добавляет всё, что нужно целому сайту: страницы из файлов, отрисовку на сервере, загрузку данных и собственный сервер для API. Курс написан для Nuxt 4 — текущей основной версии. Почти всё сказанное верно и для Nuxt 3; где версии различаются, это отмечено.
Что Nuxt добавляет к Vue
| Задача | Во Vue | В Nuxt |
|---|---|---|
| Маршруты | Подключить Vue Router и описать массив маршрутов | Файл в папке app/pages/ сразу становится страницей |
| Импорты | Импортировать каждый компонент и ref | Компоненты, composables и функции Vue подключаются сами |
| Отрисовка | Страница собирается в браузере | Страница собирается на сервере и приходит готовым HTML |
| Данные | fetch внутри onMounted | useFetch — данные приходят вместе с HTML |
| API | Отдельный бэкенд | Папка server/ в том же проекте |
| SEO | Вручную | useHead и useSeoMeta |
Отрисовка на сервере
Обычное приложение Vue присылает браузеру пустую страницу и скрипт, который строит интерфейс. Nuxt по умолчанию работает иначе: сервер выполняет компоненты, собирает HTML с текстом и отправляет его браузеру. Затем загружается JavaScript, и страница «оживает» — кнопки и формы начинают работать. Этот шаг называется гидратацией.
Пользователь быстрее видит содержимое, а поисковые системы получают готовый текст, а не пустой блок.
Как выглядит страница
<!-- app/pages/index.vue -->
<script setup lang="ts">
const { data: posts } = await useFetch('/api/posts')
</script>
<template>
<h1>Блог</h1>
<ul>
<li v-for="post in posts" :key="post.id">{{ post.title }}</li>
</ul>
</template>Это обычный компонент Vue с <script setup>, но в нём нет ни одного import: useFetch подключается автоматически. Файл лежит в app/pages/ и поэтому открывается по адресу /. Список статей приходит с сервера в том же ответе, что и HTML.
Пример курса
Через весь курс строится небольшой блог:
- главная страница и список статей;
- страница одной статьи с комментариями;
- форма добавления статьи;
- API в папке
server/, где статьи хранятся на диске.
Что нужно знать заранее
Курс опирается на курс по Vue: компоненты, ref, computed, свойства и события, идею маршрутизатора. Для работы нужен Node.js 20 или новее и редактор с поддержкой Vue, например VS Code с расширением Vue (Official).
Частая ошибка
Код в <script setup> страницы выполняется дважды: сначала на сервере, потом в браузере. На сервере нет объектов window, document и localStorage, поэтому строка вроде localStorage.getItem('theme') прямо в <script setup> падает с ошибкой localStorage is not defined. Обращайтесь к ним внутри onMounted — этот хук выполняется только в браузере.