Nuxt

Nuxt — бесплатная с открытым исходным кодом библиотека JavaScript, основанная на Vue.js, Nitro и Vite. Nuxt вдохновлён Next.js^[1], который является схожим фреймворком, основанным на React, а не на Vue.

Главное преимущество Nuxt по сравнению с использованием только Vue — система универсального рендеринга. Фреймворк может работать как одностраничное приложение (SPA) в браузере, так и как статический веб-сайт, отрисованный на сервере, путём гидратации отрисованной на сервере страницы до полноценного SPA после её загрузки. Это позволяет веб-сайтам сочетать преимущества поисковой оптимизации (SEO) и производительности серверного рендеринга с интерактивностью клиентского приложения^[2][3]. Nuxt в значительной степени абстрагирует от разработчика особенности серверного рендеринга, благодаря чему опыт разработки становится похожим на создание традиционного SPA с использованием системы однофайловых компонентов (SFC) Vue^[4].

Помимо своей флагманской технологии универсального рендеринга, Nuxt также предоставляет множество других преимуществ и удобств для разработки, таких как маршрутизация на основе путей, горячая замена модулей (HMR), встроенная поддержка TypeScript, а также middleware и серверная логика^[5].

Возможности

Маршрутизация на основе путей

В отличие от обычного приложения на Vue.js, где, как правило, каждый маршрут необходимо регистрировать вручную, Nuxt использует маршрутизацию на основе путей для автоматической регистрации всех маршрутов в приложении^[6].

Страницы объявляются в папке pages/, где имя файла страницы становится именем маршрута. Динамические параметры можно добавлять с помощью квадратных скобок, а маршруты «catch-all» (перехватывающие все остальные пути) — с помощью трёх точек и квадратных скобок, подобно синтаксису spread-оператора в JavaScript^[7].

• /pages/about.vue — соответствует маршруту /about.
• /pages/user/[id].vue — соответствует всем маршрутам непосредственно под /user.
• /pages/posts/[...slug].vue — соответствует всем маршрутам под /posts.
• /pages/admin/[[page]].vue — соответствует /admin, а также всем маршрутам непосредственно под ним.

Автоматический импорт

Nuxt автоматически импортирует большинство функций Composition API из Vue, а также любые вспомогательные функции из папок composables/ и utils/^[8].

<script setup>
    // ref импортируется автоматически
    const count = ref(0);
    // useRoute также импортируется автоматически
    const route = useRoute();
</script>

<template>
    <span>{{ count }}</span>
</template>

Макеты

Nuxt из коробки поддерживает макеты (layouts), совместимые с SSR, что позволяет схожим страницам использовать одни и те же базовые шаблоны, например, для шапки и подвала сайта. Макеты объявляются в папке layouts/ и работают с использованием нативных слотов Vue.

Чтобы включить макеты в проекте Nuxt, точка входа приложения, app.vue, должна содержать компонент NuxtLayout для переключения между макетами для каждой страницы^[9].

<!-- пример содержимого файла app.vue -->
<template>
    <NuxtLayout>
        <NuxtPage />
    </NuxtLayout>
</template>

Макет по умолчанию находится в файле layouts/default.vue и должен содержать слот для контента страницы.

<!-- пример содержимого файла макета -->
<template>
    <CustomNavbar />
    <slot />
    <CustomFooter />
</template>

Страница может использовать пользовательский макет с помощью вспомогательной функции definePageMeta в функции или блоке `setup`^[10].

<script setup>
definePageMeta({
    layout: "custom",
});
</script>

<template>
    <!-- этот контент теперь заполнит слот пользовательского макета -->
</template>

Middleware

Nuxt добавляет в приложения поддержку middleware, что позволяет выполнять серверную логику между переходами по страницам. Поддерживаются как глобальные, так и специфичные для отдельных страниц файлы middleware^[11].

Middleware объявляется в папке middleware/ и представляет собой экспортируемую функцию, которая принимает в качестве параметров текущий и предыдущий маршруты. Из этой функции можно использовать глобально доступные вспомогательные функции, такие как abortNavigation и navigateTo, для управления навигацией^[12][13].

export default defineNuxtMiddleware((to, from) => {
    // логика навигации
    if (to.params.id === "0")
        return abortNavigation(); // прервать навигацию
    return navigateTo(`/users/${to.params.id}`); // перейти на другую страницу
});

Серверный API

Nuxt также может генерировать маршруты и обработчики для серверного API, используя папку server/. Любой файл, размещённый в server/api, станет маршрутом API, а любой файл в server/routes — файлом маршрута (разница в том, что server/api добавляет префикс `api` к пути)^[14].

// server/api/hello.ts
export default defineEventHandler((event) => {
    return {
        some: "data here",
    };
});

Теперь этот API можно вызывать из компонентов с помощью композиционной функции useFetch.

<script setup>
const { data } = await useFetch('/api/hello')
</script>

<template>
  <pre>{{ data }}</pre>
</template>

См. также

• Vue.js
• Vite
• JavaScript-фреймворк