Nuxt JS - Vue + SSR (быстрый курс за 70 минут)
HTML-код
- Опубликовано: 4 мар 2019
- Подробнее узнать об обучении в Result School -
bit.ly/3A61amv
Получить профессию Frontend разработчика -
bit.ly/48MU5F7
Бесплатный курс HTML & CSS - bit.ly/3wz4sik
Сделать 5 проектов на JavaScript - bit.ly/3wx1YAT
Я в соц сетях:
Telegram: t.me/js_by_vladilen
VK: vladilen.minin
Instagram: / vladilen.minin
Мои паблики по JavaScript:
Telegram: t.me/result_school_it
VK: result.school
Instagram: / result.scho. .
JavaScript cообщества:
Discord: / discord
Telegram: t.me/js_by_vladilen_chat
Roadmap по каналу:
vladilen.notion.site/Roadmap-...
В этом видео вы узнаете про технологию NuxtJS, с помощью которого вы можете очень просто создавать приложения на Vue JS с технологией Server Side Rendering.
Код лежит тут:
github.com/vladilenm/youtube-...
Nuxt JS 2019 - Vue + SSR (быстрый курс за 70 минут)
#nuxt #nuxtjs #vue
Владилен, огромное спасибо за ролики! Уже год как пытаюсь разобраться в динамических роутах. Посмотрел это видео, и всё стало понятно, разложилось по полочкам. И главное, никакой воды!!! Всё чётко, кратко, по существу и с учётом новичков.
Вы очень помогли немного разобраться в работе nuxt, спасибо!
Видео супер, спасибо большое!! Буду ждать еще видео по Nuxt, круто объясняешь))
Очень информативный ролик, много нового узнал! Спасибо Вам!
Спасибо большое за информацию) Много чего организовалось в голове :)
Лайк, подписка, колокольчик. Очень душевный туториал! Спасибо за работу!
Спасибо. Как всегда качественный контент и все понятно.
В nuxt 3, конечно, многое поменялось: например, axios модуль не используется, а используется fetch. Также при создании custom layout, нужно писать не , а . Страница с динамическим id называется не через нижнее подчёркивание, а через квадратные скобки, вот так: [id], ну и в целом, много вот таких отличий.
Спасибо! Очень доступно и понятно!
Бро от души спасибо) Как долго искал как вообще на nuxt-е приложение стартует чтобы токен уловить. Очень сильно помог! С меня жирный лойс
16:00 Вот эта тема с просмотром кода это просто гениально! Сразу понятно стало отличие SPA от SSR
SSR - это, строго говоря, элемент классического сайта в контексте SPA, то есть мы заставляем наше SPA при первой загрузке вести себя как классический вебсайт, получая HTML с сервера.
Ну и имхо, термин SPA тут вообще не корректен, SPA как правило имеют всего один роут (например, веб-чат или видеоконференция), максимум 2-3, потому что иногда есть роуты для просмотра профилей пользователей, страницы логина и так далее. Обычный же сайт с множеством разделов и страниц с загрузкой всех или почти всех данных по AJAX и обновлением URL через History API при каждом навигационном переходе я не знаю как правильно называть, я это называю это просто full AJAX подходом.И Nuxt - он скорее для создания таких сайтов, чем для создания классических SPA.
@@popov654 SPA - это технически одна страница, куда сначала грузится весь исполняемый код, создающий разнообразное поведение. С количеством добавленных роутов это никак не связано.
@@alexperemey6046 А как тогда опраделяется многостраничный сайт? Если дело не больших количествах роутингов и кучей вьюшек? Где эта грань когда SPA превращается в MPA?
просто и круто, спасибо тебе за твой нелегкий труд
спасибо за информативный туториал, Владилен
Спасибо! Хорошо объясняете!
Спасибо за видео, этот крашкурс был очень полезен для меня, давно хотел попробовать накст и о боже какой он офигенный, теперь буду его использовать в своих проектах и дальше изучать его возможности.
Next js one love
Я обожаю тебя, все очень круто)
Просто охренительно полезный обзор, спасибо!
Мой ВК: vk.com/vladilen.minin
Код к уроку: github.com/vladilenm/youtube-nuxt-crash-course
Основные моменты:
0:45 Установка Nuxt
6:00 Обзор приложения
15:00 Как работает SSR
20:13 Создание роутов
32:28 Создание динамических роутов
33:46 Валидация параметров
37:14 Обработка 404 ошибки
38:20 Создание layout
42:05 Модули (axios)
47:38 asyncData
52:55 vuex
56:20 fetch
1:01:02 middleware
1:07:40 nuxtServerInit
подскажите, как в этом примере генерировать SSR для страницы каждого отдельного пользователя?
Размести тайминги в описании, пожалуйста.
Спасибо большое!
Скажите пожалуйста, почему авторизация (логин токен) слетает после полного рефреша любой страницы?
@@olesmx Где хранишь логин и токен?
Пушка!☄️🚀
Просто спасибо, ты красавчик, чувак!)
Благодарю за отзыв, рад, что ценно)
Полезно! Благодарю!
Очень круто! Спасибо! Сейчас, спустя 2 года запустил Nuxt, он стал ещё круче. Предлагаю новое видео по изменениям в Nuxt.
Да, структура изменилась и данный видеоурок уже не совсем актуален. При том, я так понял, нет поддержки Composition API и конкретно
О май гад, как же много информации))
Потрясающе!!!!!
Топ туториал, полноценно и понятно.
Владилен молодец! Почерпнул несколько полезных алгоритмов
Жду курсы за 2020 :)
Ссылки в описании на новые Курсы)
Спасибо , было очень полезно
Думал просто вью это магия и радовался каждый день. Вот что действительно чертова магия.
Чем больше магии, тем больше непонятного.
Владилен, дай бог тебе здоровья и далларов.
прекрасный курс!
Все просто и понятно, спасибо.
спасибо, очень доходчиво :)
Спасибо большое! Очень полезно
Большое спасибо урок!
класс, спасибо за видео!
Смотрю второй раз. Чел ты гений
Отличный урок!
Отдельный чанг лейзилоадит))) Спасибо, многое не понятно, но начало положено
Круто! Ясно! Четко! Лайк!
Владилен, выпусти по nuxt новое видео. А то столько изменений! Это видео уже во многом потеряло актуальность.
Черт, я только собрался изучать его
Ничего оно не потеряло. Структура папок, способ подключения модулей, создание навигации, всё осталось так же.
Спасибо, очень понравилось видео как и масса других +1
Вообще круто чувак желаю тебе удачи
👍👍👍👍👍😎😎😎😎😎😎👏👏👏👏👏👏👏
спасибо за видео, наконец-то кто-то по простому объяснил nuxt ssr)) случайно не практикуешь nuxt+ts ?
Спасибо большое!
Пожалуйста
Скоро будет много подобного, более качественного контента )
@@VladilenMinin будем ждать!)
Владилен, супер-подача материала! Спасибо) А отключение prefetch (для скорости) можно делать всем ссылкам?
Лайкос!!!
Отлично. После изучения Vue долго боялся юзать его на продакшне из-за потенциальных проблем с SEO. Теперь не боюсь.
Спасибо за видео
Thanks a lot :)
Спасибо огромное
Очень доступно, спасибо! А можете показать, как реализовать в nuxt размещение метатегов на каждой странице для SEO?
Класс!!!!!
Спасибо! очень хотелось бы видео как подружить накст с ts
Спасибо!
Владилен, спасибо за крутой обучающий ролик. Когда начал писать свой первый сайт с использованием Vue для фронта и Laravel для бека столкнулся с проблемой генерации статического кода для SEO. Отложил,а тут как раз этот вектор, по которому можно двигаться. Правильно ли понимаю, что если бэкенд на Laravel (PHP), то в качестве веб-сервера для Лары делаем nginx, а для статической генерации html кода поднимаем nodeJS + Nuxt ? Или какой курс посмотреть? Не ради рекламы, но смотрю ресурс ларакастс, собственно там автор очень доходчиво излагает приемы разработки Vue + Laravel, собственно оттуда начал делать попытки разработки. Но тема SSR, когда бэк не на ноде, а на пхп, не раскрыта.
Классный фреймворк, только жаль, что ты не объяснил, как осуществляется синхронизация стора на клиенте и на сервере (а ведь это важно для того, чтобы авторизация работала, я уверен, что Nuxt как-то должен поддерживать принудительный пуш данных в стор на сервере по требованию, когда на клиенте что-то произошло типа логина или разлогина, либо смены языка, темы и так далее). Короче, про работу с сессиями хочется больше узнать :)
Спасибо огромное! Я тащусь от Накста :)
Есть вопрос: подскажите плиз, где и как теперь подключать Firebase ?
В курсе про CRM мы без проблем подключали её в main.js
Очень жалею, что раньше не изучал разработку самостоятельно по твоим видео. А воспользовался платным ресурсом, отучился полтора года, и всё вылетело быстро как и залетело.
Отличное видео! Узнал много нового, хотя пересмотрел по этой теме кучу видео.
Возник вопрос:
Смутил тот момент, когда происходит проверка и наполнение стора пользователями, потому что эта проверка сделана на самой странице. Если страниц, отображающих пользователей, будет несколько, то получается этот кусок кода будет дублироваться. Возможна ли эта проверка и наполнение в самом сторе, чтобы логика была в одном месте или где ее лучше разместить?
Благодарю
великолепное видео, я его прошел 10 раз где-то, помнил наизусть и мне на собеседование попала задача такая и я ее сделал и теперь я middle, а до этого я вообще не работал в frontend разработке, взяли за то что отвечал на все вопросы, спасибо за видео
Спасибо за ролик, ещё бы ссылочку в описании на плагины для vs code, тоже хочу такие иконки для папок.
Это очень круто, прям после native Vuejs, бомба. Есть вопросы, а вот есть бд на mysql, то понадобиться писать бэк, чтобы получить из бд данные, или nuxt уже это умеет? На нем можно сделать приложение, я правильно понял? За видео и курс, спасибо большое.
а и спасибо за урок))
спасибо!
огонь
Про nuxtServerInit в конце Влад сказал неспроста, на этом тригере будет происходить валидация куки авторизации по хедеру, это типа домашнее задание. (см Nuxt Auth External API (JWT) Учимся вместе )) Спасибо
Спасибо понял что нужно получать данные в fetch через context. В остальном разобрался пока делал проект.
Хотя есть вопрос если меню не внутри тега nuxt то оно уже не будет генерироваться на сервере? Как тогда header footer sidebar сгенерировать на сервере?
круть спс
Спасибо
Спасибо за отличный курс! А не могли бы вы снять такое же видео но про Next.js? Спасибо!
Да, вероятно будет
Супер! А есть ли в Nuxt система хранения роутов? Чтобы они хранились в одном месте. Предположим, мы захотели изменить роут с "about" на "aboutus", тогда тут придётся везде искать и менять значения, файл переименовывать, а иначе было бы в одном месте, поменял и везде автоматом изменилось?
Огромное спасибо за проделанную работу! Очень рад был найти такой качественный контент.
Осталось несколько вопросов:
1) как "заставить" nuxt подгружать стили через , чтобы не пихать в шапку всю эту бутстраповскую колбасу?
2) как правильно и "технично" обработать ситуацию, когда axios вернул 404? Как при этом отобразить страничку error.vue?
3) показанный вами способ авторизации, он безопасен для прода? store (и токен соответственно) ведь хранится исключительно на клиенте, я правильно понимаю?
Привет, благодарю за отзыв)
1. Не всегда такой подход эффективный, но если хочешь, то в nuxt.config.js в секции head это можно сделать, добавив новый элемент в массив link
2. nuxtjs.org/api/context/ параметр error, который можно получить из контекста
3. Да, держать токен на клиенте в сторе нормальный подход, но учите, что он должен улетать в каждом запросе на сервер, где будет валидироваться, если он не пройдет валидацию, то тоже необходимо добавить на фронтенд проверки
@@VladilenMinin , спасибо за ответы! По 1. тогда еще такой вот вопрос: как все настроить в Nuxt таким образом, чтобы из scss собирался css файл и ложился в определенную папку, как это можно сделать в обычном проекте vue-webpack? (я честно искал, но не нашел об этом ничего в документации nuxt:) или не всё пока не понимаю).
@@mikurrey416 Я сам не пробовал, но ребята тут решили проблему:
github.com/nuxt/nuxt.js/issues/1533
@@VladilenMinin спасибо, получилось!)
Для тех, кто захочет повторить:
1) ставим в дев необходимые зависимости: _npm install --save-dev node-sass sass-loader_
2) в _nuxt.config.js_ прописываем scss/sass как обычный css: _css: ["~assets/styles/style.scss"],_
3) в секцию _build_ можно добавить _extractCSS: true_ , тогда стиль будет подгружаться через __
4) теперь в style.scss можно подключить любой предустановленный css-фреймворк, в данном случае bootstrap: _@import "~bootstrap/scss/bootstrap";_ и пользоваться всеми возможностями его кастомизации.
Можно дополнение к видео? Сейчас многое в том числе переходят на использование ts в своей работе, я буду весьма благодарен вам за видео где вы будете рассказывать как работать с подобными технологиями в контексте ts. Я понимаю что это курс больше базовый и поэтому js, поэтому это просто предложение к рассмотрению. Спасибо и хорошего дня.
@@eugenenovikov671 ТС отлично используется с vue, точно так же, как с любым другим фреймворком.
для гуард правильнее использовать middleware или метод validate? если через middleware не загрузится ли лишние байти даже если нету прав?
Спасибо за видео! а что нужно сделать чтобы можно было в layout делать ssr? Я так понял что метод асинкдата впринципе только в page работает, а в компонентах и layout выдает ошибку(но с компонентами понятно можно пробросить данные, а вот как в лайоуте это сделать непонятно), а асинк фетч у меня вообще ничего не выводит. К примеру я хочу в лайоуте меню категорий вывести из базы.
мощь
Спасибо за работу. Возник такой вопрос: как по нужному урлу вызывать другую страницу из папке pages например? Чтоб по урлу / рекваерился не index.vue, а другой файл в этой папке.
Спасибо, у меня вопрос, а можно ли axios подгружать по мере необходимости?
27:45 prefetch указывать можно на любой ссылке? Почему указано на одной ссылке, а работает для всех?
Нужно сделать продолжение с nuxt и показать как сделать PAW (прогрессивная веб приложение).
а есть какая-то причина, почему нам нужно было создать getter users чтобы получить данные, а не брать на прямую users из state? Спасибо!
На практике не очень рекомендую использовать стейт, тк в теории можно ошибок наловить с этим
Но в целом подобное возможно
@@VladilenMinin геттеры кешируются потому что
@@VladilenMinin Нашел статью как раз про это: codeburst.io/vuex-getters-are-great-but-dont-overuse-them-9c946689b414
@@user-zy5ww2oj7k Так и state не вычисляется, а как бы статичен. Поэтому зачем его кэшировать?
Если вы используете стейт напрямую - user: state => state.user, то проще сразу получить стейт в компоненте через mapState, если нужно значение на основе двух стейтов, или стейт с преобразование (filter, reduce), то можно использовать геттер, по сути геттер это computed.. также в него можно передавать агрументы
Владилен, у меня webstorm ругается на метод dispatch('unresolved method or function dispatch()') для vuex. (Не подскажешь в чем может быть беда? Может vuex нужно как-то отдельно ещё где-то указывать?
Магическая магия
идеально. единственное не понял как локализовать рутинг для интернациональных сайтов, т.е. мы сделали страницу about но в адресной строке надо ее видеть по разному в зависимости от выбранного языка.
Есть смысл к всем ссылкам на странице добавлять атрибут "no-prefetch" для быстродействия? Или каким ссылкам на страницы давать этот атрибут, а каким нет? Спасибо!
Действительно ли на практике server side rendering быстрее рисует страницу, чем spa, или это только в теории?
интересно, а как с этой технолгией сделать магазины, к примеру магазин кейсов к игре CS:GO(чисто для вашего уровня, просто если дам легче скорее всего вы обидитесь). Обожаю ваши нарезки, обучился к node.js, vue.js, react.js(знания успешно утеряны), всё было предельно ясно, так же данное видео про nuxt.js классная, смотрю уже в пятый раз, до этого чисто из интереса поглядывал, но сейчас действительно нужно, комментарий закидываю заранее перед видео, я уже уверен о лёгкости материала, который преподнесёте вы.
70 минут как сказка. Меня месяц в онлайн школе учили какой-то срани бесполезной )))
Импорт компонентов делать не надо(если в конфиге установлен components на true). Сейчас уже так из коробки. Возможно раннее не было такой возможности.
Cпасибо! Может есть у вас ссылка на инфо как тут делать кастомные модули? )
Впервые слышу про тег main, загуглил "Элемент предназначен для основного содержимого документа. Содержимое должно быть уникальным и не включать типовые блоки вроде шапки сайта, подвала, навигации, боковой панели, формы поиска и т. п" ... По-моему тут противоречие с уроком, так как мы навигацию вставили в тег main.
господи... давай еще про верстку поговорим
Есть очень большой вопрос, на который ответа пока что найти не удалось. Есть docker контейнер. В этом контейнере поднят nuxt js менеджер пакетов yarl, и все окружение необходимое для работы.
Появилась задача внести изменение в работающий сервер.
Изменения внеслись. Файлы теперь нужено перебилдить и стартануть.
Есть какая то команда, типа yarl restart?
Владилен, добрый день!
Как защитить данные которые получаем как JSON?
Они в открытом виде просто
Спасибо. А как выполняется реализация django на беке + nuxt ssr на фронте?
Мои личные заметки
25:00 подсветка активных ссылок
можно просто прописать компонент в layout и все будет работать без импортов
Как обычно на высоте))) Подскажите плиз, как эту всю красоту развернуть, не на локальном сервере, а на реальном хостинге. Обгуглился сил нет, выручайте чем сможете, хотя бы в каком направлении смотреть. Заранее спасибо)))
VPS и ставь туда, что хочешь. Тут в принципе нужна только нода с зависимостями.
как роботы Google и Яндекс индексируют страницы полностью сгенерированные js?
Здравствуйте, подскажите пожалуйста, я попробовал закинуть листинг users в компонент, но почему-то постоянно массив пустой. через components это реализовать нельзя ? Буду очень признателен за ответ, а то я уже запутался совсем