Урок 01

Введение в Nuxt

Что такое Nuxt

Nuxt — фреймворк поверх Vue. Даёт:

SSR — рендер на сервере
SSG — статические сайты
Файловый роутинг
Auto-imports
SEO из коробки

Аналогия: Nuxt для Vue = Next.js для React.

Зачем Nuxt

Проблемы обычного Vue SPA:

Плохое SEO
Медленный первый рендер
Нет серверной логики

Nuxt решает всё это.

Режимы рендеринга

SSR — рендер на сервере (динамика, SEO)
SSG — статика при сборке (блог, доки)
SPA — только клиент (админки)
ISR — инкрементальная регенерация

Установка

npx nuxi@latest init my-app
cd my-app
npm install
npm run dev

nuxi — CLI Nuxt.

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

my-app/
├── app.vue              # корневой компонент
├── pages/               # страницы (роутинг)
├── components/          # компоненты (auto-import)
├── composables/         # composables (auto-import)
├── layouts/             # лейауты
├── middleware/          # middleware
├── plugins/             # плагины
├── server/              # API-роуты
├── public/              # статика
├── assets/              # ресурсы
├── nuxt.config.ts       # конфиг
└── package.json

app.vue

Корневой компонент:

<template>
    <div>
        <NuxtLayout>
            <NuxtPage />
        </NuxtLayout>
    </div>
</template>

<NuxtPage> — рендер текущей страницы из pages/.

<NuxtLayout> — лейаут.

pages/index.vue

<template>
    <div>
        <h1>Главная</h1>
        <p>Добро пожаловать в Nuxt!</p>
    </div>
</template>

Файл автоматически становится роутом /.

Auto-imports

Не нужно импортировать:

ref, computed, watch
Компоненты из components/
Composables из composables/
useRoute, useRouter, useFetch

<script setup lang="ts">
// Не нужно: import { ref } from 'vue'
const count = ref(0);

// Не нужно: import { useMyButton } ...
</script>

<template>
    <MyButton />
    <p>{{ count }}</p>
</template>

Отличия от Vue

	Vue	Nuxt
Роутинг	Vue Router	Файловый
Data fetch	fetch/axios	useFetch/useAsyncData
SSR	Настройка	Из коробки
Auto-import	Нет	Да
Layouts	Вручную	Встроено

nuxt.config.ts

export default defineNuxtConfig({
    devtools: { enabled: true },
    modules: ['@nuxtjs/tailwindcss'],
    runtimeConfig: {
        apiSecret: '',    // только сервер
        public: {
            apiBase: 'https://api.example.com',
        },
    },
    app: {
        head: {
            title: 'My App',
            meta: [
                { name: 'description', content: 'Description' },
            ],
        },
    },
});

Script setup

Тот же синтаксис, что в Vue 3:

<script setup lang="ts">
const count = ref(0);
const doubled = computed(() => count.value * 2);

function increment() {
    count.value++;
}
</script>

<template>
    <button @click="increment">
        {{ count }} — {{ doubled }}
    </button>
</template>

Команды

npx nuxi dev           # dev-сервер
npx nuxi build         # сборка
npx nuxi generate      # SSG
npx nuxi preview       # превью прода
npx nuxi typecheck     # проверка типов

Что дальше

Файловый роутинг
Динамические маршруты
Layouts
Middleware
Компоненты и auto-imports
Состояние
Server Routes
Метаданные и SEO
Конфигурация

Итог

Nuxt — фреймворк для Vue
SSR/SSG/SPA/ISR — режимы
Файловый роутинг
Auto-imports
SEO из коробки

Дальше — файловый роутинг.