Основы 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

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

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

Роутинг и pages в Nuxt

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

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

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

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

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

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

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 проекта