Основы Nuxt

Что такое Nuxt и зачем он нужен

Что такое Nuxt.js? Это JavaScript-фреймворк, использующий возможности Vue.js для упрощения разработки современных веб-приложений и сайтов. Он идеально подходит для создания Single Page Applications (SPA) с плавной навигацией, предоставляя мощные инструменты для сервер-сайд рендеринга (SSR) и автоматического подключения компонентов. Благодаря встроенной системе маршрутизации и удобному управлению мета-тегами, Nuxt.js обеспечивает отличную SEO-оптимизацию и ускоряет процесс разработки. Этот фреймворк является отличным выбором для крупных проектов, где важна производительность и видимость в поисковых системах.

Установка Nuxt проекта

Установку Nuxt 3 приложения можно выполнить достаточно легко. На старте важно проверить, что ваша версия Node.js не ниже 18, а затем выбрать удобный редактор кода, такой как Visual Studio Code или другие. С помощью командной строки через npm можно развернуть новый проект и установить все нужные зависимости, а инициализация Git облегчит управление версиями. После установки достаточно запустить локальный сервер, чтобы увидеть ваш проект в действии.

О входной точке в Nuxt

Описание файла app.vue как входной точки проекта Nuxt, его роль в рендеринге контента и отличие от стандартного подхода Vue с файлом main.js.

Nuxt компоненты (components)

В Nuxt фреймворке выделение отдельных директорий для различных типов файлов упрощает структуру проекта. Рассматривается создание папки components для хранения переиспользуемых Vue компонентов, что способствует упорядоченной организации кода и его удобству в использовании. Вы изучите, как создать и подключить простой компонент без необходимости явного импорта, что автоматизирует работу и упрощает разработку приложения. Эта структура делает все компоненты из директории components доступными сразу во всём приложении.

Роутинг и pages в Nuxt

Описание структуры директории `pages` в Nuxt и принципов файлового роутинга: создание страниц, компонент `NuxtPage`, автоматическое формирование маршрутов на основе файловой структуры проекта.

Передача параметра в роуте Nuxt

Передача и получение параметров маршрута в Nuxt.js: создание динамических роутов через файловую структуру с использованием `[id].vue` и доступ к параметрам через `$route.params` в шаблоне и `useRoute()` в скрипте.

Директория public Nuxt

Описание директории public в Symfony — хранение статичных файлов (изображений, PDF, CSS, JS), особенности размещения и пример вывода картинки в шаблоне.

Директория assets в Nuxt

Директория assets в Nuxt.js предназначена для хранения статических файлов, которые обрабатываются системой сборки и недоступны публично. Рассмотрен пример подключения SCSS-файлов: установка необходимых пакетов и настройка nuxt.config.js.

Подключаем файл css в Nuxt

Обзор способов подключения CSS стилей в Nuxt.js — через тег link, директиву @import и глобальное подключение в nuxt.config.js.

Знакомство с макетами layouts Nuxt

Директория layouts в Nuxt используется для создания макетов с повторяющимися элементами страниц — шапкой, подвалом, боковой колонкой. Рассмотрен процесс создания макета default.vue и его подключение через компоненты NuxtLayout и NuxtPage.

Как в Nuxt добавлять мета тэги и тэги в область head страниц

Способы добавления метатегов в Nuxt: глобальная настройка через nuxt.config.ts и локальное добавление на отдельных страницах с помощью useHead.

Nuxt dev tools. Панель разработчика.

Погрузитесь в возможности Nuxt DevTools для упрощения разработки и отладки ваших Nuxt.js приложений. Узнайте, как включить эту полезную панель инструментов в своей среде и насладитесь удобным анализом структуры проекта и событий. С Nuxt DevTools вы сможете легко находить маршруты, компоненты и модули, а также просматривать время, затраченное на рендеринг страниц. Благодаря функции интерактивного просмотра компонентов, вы сможете быстро находить и править код на странице.

Знакомство с Server и Client site rendering Nuxt

Как выполнять код только на клиенте или сервере

Пример ошибки client rendering и особенность хука onMounted

Что такое плагины в Nuxt. Создаем простой плагин.

Рассмотрены основы создания и использования плагинов в новой версии Nuxt.js. Узнайте, как с помощью nuxt plugin можно расширить функциональность своего приложения, добавляя кастомные методы и интеграции с различными библиотеками. Рассматривается пошаговый процесс создания и активации плагинов с использованием функции defineNuxtPlugin и конфигурационного файла nuxt.config.ts. Пример включает добавление тестового плагина и демонстрацию его вызова в компоненте, что позволяет использовать расширения на глобальном уровне.

Заставляем Nuxt плагин работать только на сервере или только на клиенте

Создание плагина Nuxt через объектный подход

Как глобально на всех страницах вызывать функцию плагина

Как работать с настройками плагина при composition структуре плагина

Пример клиентского плагина на примере счетчика аналитики Яндекс.Метрика

Переменные окружения в настройках Nuxt

Создание ключей конфигурации Nuxt проекта