Создание проекта

Проект на Nuxt создаётся официальной утилитой. Она скачивает заготовку, устанавливает зависимости и настраивает TypeScript, так что писать конфигурацию с нуля не нужно.

Создание

Откройте терминал в папке с проектами и выполните:

npm create nuxt@latest blog

Утилита задаст несколько вопросов: какой менеджер пакетов использовать (выберите npm), создавать ли git-репозиторий и какие официальные модули поставить. Модули пока не выбирайте — курс подключит нужные позже. Затем запустите сервер разработки:

cd blog
npm run dev

В терминале появится адрес http://localhost:3000. Откройте его — вы увидите приветственную страницу Nuxt. Внизу страницы есть кнопка Nuxt DevTools — панель, где видны страницы, компоненты и данные приложения.

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

blog/
├── app/
│   └── app.vue
├── public/
│   ├── favicon.ico
│   └── robots.txt
├── nuxt.config.ts
├── package.json
└── tsconfig.json

В Nuxt 4 весь код интерфейса лежит в папке app/. В Nuxt 3 те же папки лежали прямо в корне проекта — это главное отличие, которое вы встретите в старых статьях.

Папки, которые появятся позже

Папка	Что в ней
`app/pages/`	Страницы, каждая со своим адресом
`app/components/`	Компоненты
`app/layouts/`	Макеты — общая обёртка страниц
`app/composables/`	Composables, импортируются автоматически
`app/middleware/`	Проверки перед переходом на страницу
`app/plugins/`	Код, который выполняется при запуске приложения
`app/assets/`	Стили и картинки, которые обрабатывает сборщик
`server/`	Серверный код: API и обработчики
`public/`	Файлы, которые отдаются как есть

Nuxt сам создаёт служебные папки .nuxt/ (сгенерированные типы) и .output/ (результат сборки). Их не редактируют и не добавляют в git.

Файл настроек

// nuxt.config.ts
export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true }
})

compatibilityDate — дата, на поведение которой ориентируется фреймворк; у вас будет дата создания проекта. devtools включает панель разработчика. В этот файл вы будете добавлять модули и настройки.

Короткие пути

Запись	Куда указывает
`~`	Папка `app/`
`~~`	Корень проекта

Например, ~/components/PostCard.vue — это app/components/PostCard.vue.

Команды проекта

Команда	Что делает
`npm run dev`	Сервер разработки с автообновлением
`npm run build`	Сборка для публикации в папку `.output/`
`npm run preview`	Запуск собранной версии
`npm run generate`	Сборка статического сайта

Частая ошибка

Если создать папку pages или components в корне проекта, как советуют статьи про Nuxt 3, Nuxt 4 её не увидит: страницы не откроются, компоненты не найдутся. Кладите код интерфейса в app/, а в корне оставляйте только server/, public/ и файлы настроек.

Спасибо, что читаете!