Nuxt

Nuxt — это фреймворк с открытым исходным кодом, созданный на основе Vue.js и использующий инструменты Nitro и Vite. Его концепция заимствована у Next.js, который работает на React, тогда как Nuxt ориентирован на экосистему Vue.

Ключевым отличием фреймворка от стандартного Vue является реализация универсального рендеринга. Nuxt позволяет создавать как одностраничные приложения (SPA), так и статические сайты с серверным рендерингом. После загрузки страницы происходит её гидратация, превращающая статический контент в полнофункциональное SPA. Это сочетает преимущества SEO-оптимизации и скорости начальной загрузки с интерактивностью клиентских приложений. Благодаря абстракции над серверным рендерингом, процесс разработки напоминает создание традиционных SPA с использованием однофайловых компонентов Vue.

Помимо универсального рендеринга, фреймворк предлагает автоматическую маршрутизацию, горячее обновление модулей (HMR), встроенную поддержку TypeScript, middleware и серверные API.

Функциональность[править | править код]

Автоматическая маршрутизация[править | править код]

В отличие от Vue.js, где маршруты часто настраиваются вручную, Nuxt автоматически генерирует маршруты на основе структуры папки `pages/`. Имена файлов соответствуют путям URL, а динамические параметры и catch-all маршруты задаются с помощью специального синтаксиса.

Примеры: - `pages/about.vue` → маршрут `/about` - `pages/user/[id].vue` → все пути вида `/user/*` - `pages/posts/[...slug].vue` → все вложенные пути `/posts/*` - `pages/admin/page.vue` → `/admin` и все подпути

Автоимпорт[править | править код]

Фреймворк автоматически импортирует функции Composition API из Vue, а также утилиты из папок `composables/` и `utils/`. Это сокращает количество явных импортов в коде.

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

</template> ```

Система макетов[править | править код]

Nuxt предоставляет готовую поддержку макетов, совместимых с SSR. Макеты определяются в папке `layouts/` и позволяют переиспользовать общие элементы, такие как шапка или подвал, на нескольких страницах.

Основной файл `app.vue` должен содержать компонент `NuxtLayout`: ```vue <template>

 <NuxtLayout>
   <NuxtPage />
 </NuxtLayout>

</template> ```

Макет по умолчанию (`layouts/default.vue`) включает слот для контента: ```vue <template>

 <CustomNavbar />
 <slot />
 <CustomFooter />

</template> ```

Для выбора макета страница использует `definePageMeta`: ```vue <script setup> definePageMeta({

 layout: 'custom'

}); </script> ```

Middleware[править | править код]

Middleware в Nuxt позволяет выполнять код перед переходом между страницами. Файлы middleware размещаются в одноимённой папке и могут быть глобальными или привязанными к конкретным страницам.

Пример middleware: ```javascript export default defineNuxtMiddleware((to, from) => {

 if (to.params.id === '0') {
   return abortNavigation();
 }
 return navigateTo(`/users/${to.params.id}`);

}); ```

Серверные API[править | править код]

Фреймворк позволяет создавать API-маршруты через папку `server/`. Файлы в `server/api/` становятся эндпоинтами с префиксом `/api`, а в `server/routes/` — прямыми маршрутами.

Пример обработчика API: ```typescript // server/api/hello.ts export default defineEventHandler(() => {

 return { message: 'Данные API' };

}); ```

Использование в компоненте: ```vue <script setup> const { data } = await useFetch('/api/hello'); </script>

</template> ```

См. также[править | править код]

Vue.js
Vite
Фреймворки JavaScript

Примечания[править | править код]

Ссылки[править | править код]

Официальный сайт (англ.)
Репозиторий на GitHub

Ссылки[править | править код]