Основы Nuxt

Получите доступ ко всему, что можно найти на этом сайте.

1 мес. 1 год
≈2000 руб. ≈7000 руб. (-80%)

Ссылки для оплаты доступны после регистрации и входа на сайт.

Нужна доработка вашего проекта на 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 вы сможете легко находить маршруты, компоненты и модули, а также просматривать время, затраченное на рендеринг страниц. Благодаря функции интерактивного просмотра компонентов, вы сможете быстро находить и править код на странице.

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

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

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

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

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

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

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

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

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

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

Что еще добавить в этот курс? Каких уроков вам не хватило?