Nuxt JS - Vue + SSR (быстрый курс за 70 минут)
Vložit
- čas přidán 4. 03. 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-е приложение стартует чтобы токен уловить. Очень сильно помог! С меня жирный лойс
Спасибо. Как всегда качественный контент и все понятно.
Спасибо! Очень доступно и понятно!
просто и круто, спасибо тебе за твой нелегкий труд
Мой ВК: 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 Где хранишь логин и токен?
Спасибо за видео, этот крашкурс был очень полезен для меня, давно хотел попробовать накст и о боже какой он офигенный, теперь буду его использовать в своих проектах и дальше изучать его возможности.
Next js one love
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?
Спасибо! Хорошо объясняете!
Я обожаю тебя, все очень круто)
Просто охренительно полезный обзор, спасибо!
спасибо за информативный туториал, Владилен
Очень круто! Спасибо! Сейчас, спустя 2 года запустил Nuxt, он стал ещё круче. Предлагаю новое видео по изменениям в Nuxt.
Да, структура изменилась и данный видеоурок уже не совсем актуален. При том, я так понял, нет поддержки Composition API и конкретно
В nuxt 3, конечно, многое поменялось: например, axios модуль не используется, а используется fetch. Также при создании custom layout, нужно писать не , а . Страница с динамическим id называется не через нижнее подчёркивание, а через квадратные скобки, вот так: [id], ну и в целом, много вот таких отличий.
Спасибо , было очень полезно
Полезно! Благодарю!
Просто спасибо, ты красавчик, чувак!)
Благодарю за отзыв, рад, что ценно)
Все просто и понятно, спасибо.
Топ туториал, полноценно и понятно.
Спасибо большое! Очень полезно
О май гад, как же много информации))
Пушка!☄️🚀
спасибо, очень доходчиво :)
Потрясающе!!!!!
Владилен, супер-подача материала! Спасибо) А отключение prefetch (для скорости) можно делать всем ссылкам?
Владилен молодец! Почерпнул несколько полезных алгоритмов
Жду курсы за 2020 :)
Ссылки в описании на новые Курсы)
Думал просто вью это магия и радовался каждый день. Вот что действительно чертова магия.
Чем больше магии, тем больше непонятного.
прекрасный курс!
Владилен, дай бог тебе здоровья и далларов.
спасибо за видео, наконец-то кто-то по простому объяснил nuxt ssr)) случайно не практикуешь nuxt+ts ?
Большое спасибо урок!
класс, спасибо за видео!
Отдельный чанг лейзилоадит))) Спасибо, многое не понятно, но начало положено
Спасибо, очень понравилось видео как и масса других +1
Смотрю второй раз. Чел ты гений
Отличный урок!
Очень доступно, спасибо! А можете показать, как реализовать в nuxt размещение метатегов на каждой странице для SEO?
Круто! Ясно! Четко! Лайк!
Отлично. После изучения Vue долго боялся юзать его на продакшне из-за потенциальных проблем с SEO. Теперь не боюсь.
Владилен, выпусти по nuxt новое видео. А то столько изменений! Это видео уже во многом потеряло актуальность.
Черт, я только собрался изучать его
Ничего оно не потеряло. Структура папок, способ подключения модулей, создание навигации, всё осталось так же.
Вообще круто чувак желаю тебе удачи
👍👍👍👍👍😎😎😎😎😎😎👏👏👏👏👏👏👏
Спасибо большое!
Пожалуйста
Скоро будет много подобного, более качественного контента )
@@VladilenMinin будем ждать!)
Спасибо! очень хотелось бы видео как подружить накст с ts
Владилен, спасибо за крутой обучающий ролик. Когда начал писать свой первый сайт с использованием Vue для фронта и Laravel для бека столкнулся с проблемой генерации статического кода для SEO. Отложил,а тут как раз этот вектор, по которому можно двигаться. Правильно ли понимаю, что если бэкенд на Laravel (PHP), то в качестве веб-сервера для Лары делаем nginx, а для статической генерации html кода поднимаем nodeJS + Nuxt ? Или какой курс посмотреть? Не ради рекламы, но смотрю ресурс ларакастс, собственно там автор очень доходчиво излагает приемы разработки Vue + Laravel, собственно оттуда начал делать попытки разработки. Но тема SSR, когда бэк не на ноде, а на пхп, не раскрыта.
Спасибо огромное! Я тащусь от Накста :)
Есть вопрос: подскажите плиз, где и как теперь подключать Firebase ?
В курсе про CRM мы без проблем подключали её в main.js
Спасибо за видео
Thanks a lot :)
Спасибо за ролик, ещё бы ссылочку в описании на плагины для vs code, тоже хочу такие иконки для папок.
Спасибо огромное
Очень жалею, что раньше не изучал разработку самостоятельно по твоим видео. А воспользовался платным ресурсом, отучился полтора года, и всё вылетело быстро как и залетело.
Лайкос!!!
Классный фреймворк, только жаль, что ты не объяснил, как осуществляется синхронизация стора на клиенте и на сервере (а ведь это важно для того, чтобы авторизация работала, я уверен, что Nuxt как-то должен поддерживать принудительный пуш данных в стор на сервере по требованию, когда на клиенте что-то произошло типа логина или разлогина, либо смены языка, темы и так далее). Короче, про работу с сессиями хочется больше узнать :)
Это очень круто, прям после native Vuejs, бомба. Есть вопросы, а вот есть бд на mysql, то понадобиться писать бэк, чтобы получить из бд данные, или nuxt уже это умеет? На нем можно сделать приложение, я правильно понял? За видео и курс, спасибо большое.
Отличное видео! Узнал много нового, хотя пересмотрел по этой теме кучу видео.
Возник вопрос:
Смутил тот момент, когда происходит проверка и наполнение стора пользователями, потому что эта проверка сделана на самой странице. Если страниц, отображающих пользователей, будет несколько, то получается этот кусок кода будет дублироваться. Возможна ли эта проверка и наполнение в самом сторе, чтобы логика была в одном месте или где ее лучше разместить?
для гуард правильнее использовать middleware или метод validate? если через middleware не загрузится ли лишние байти даже если нету прав?
Спасибо за видео! а что нужно сделать чтобы можно было в layout делать ssr? Я так понял что метод асинкдата впринципе только в page работает, а в компонентах и layout выдает ошибку(но с компонентами понятно можно пробросить данные, а вот как в лайоуте это сделать непонятно), а асинк фетч у меня вообще ничего не выводит. К примеру я хочу в лайоуте меню категорий вывести из базы.
Спасибо!
Спасибо, у меня вопрос, а можно ли axios подгружать по мере необходимости?
Спасибо за отличный курс! А не могли бы вы снять такое же видео но про Next.js? Спасибо!
Да, вероятно будет
27:45 prefetch указывать можно на любой ссылке? Почему указано на одной ссылке, а работает для всех?
Супер! А есть ли в Nuxt система хранения роутов? Чтобы они хранились в одном месте. Предположим, мы захотели изменить роут с "about" на "aboutus", тогда тут придётся везде искать и менять значения, файл переименовывать, а иначе было бы в одном месте, поменял и везде автоматом изменилось?
Про nuxtServerInit в конце Влад сказал неспроста, на этом тригере будет происходить валидация куки авторизации по хедеру, это типа домашнее задание. (см Nuxt Auth External API (JWT) Учимся вместе )) Спасибо
Спасибо за работу. Возник такой вопрос: как по нужному урлу вызывать другую страницу из папке pages например? Чтоб по урлу / рекваерился не index.vue, а другой файл в этой папке.
Класс!!!!!
Можно дополнение к видео? Сейчас многое в том числе переходят на использование ts в своей работе, я буду весьма благодарен вам за видео где вы будете рассказывать как работать с подобными технологиями в контексте ts. Я понимаю что это курс больше базовый и поэтому js, поэтому это просто предложение к рассмотрению. Спасибо и хорошего дня.
@@eugenenovikov671 ТС отлично используется с vue, точно так же, как с любым другим фреймворком.
Благодарю
Огромное спасибо за проделанную работу! Очень рад был найти такой качественный контент.
Осталось несколько вопросов:
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";_ и пользоваться всеми возможностями его кастомизации.
Есть смысл к всем ссылкам на странице добавлять атрибут "no-prefetch" для быстродействия? Или каким ссылкам на страницы давать этот атрибут, а каким нет? Спасибо!
Владилен, у меня webstorm ругается на метод dispatch('unresolved method or function dispatch()') для vuex. (Не подскажешь в чем может быть беда? Может vuex нужно как-то отдельно ещё где-то указывать?
Действительно ли на практике server side rendering быстрее рисует страницу, чем spa, или это только в теории?
Спасибо понял что нужно получать данные в fetch через context. В остальном разобрался пока делал проект.
Хотя есть вопрос если меню не внутри тега nuxt то оно уже не будет генерироваться на сервере? Как тогда header footer sidebar сгенерировать на сервере?
спасибо!
Нужно сделать продолжение с nuxt и показать как сделать PAW (прогрессивная веб приложение).
Есть очень большой вопрос, на который ответа пока что найти не удалось. Есть docker контейнер. В этом контейнере поднят nuxt js менеджер пакетов yarl, и все окружение необходимое для работы.
Появилась задача внести изменение в работающий сервер.
Изменения внеслись. Файлы теперь нужено перебилдить и стартануть.
Есть какая то команда, типа yarl restart?
как роботы Google и Яндекс индексируют страницы полностью сгенерированные js?
Владилен, добрый день!
Как защитить данные которые получаем как JSON?
Они в открытом виде просто
Спасибо. А как выполняется реализация django на беке + nuxt ssr на фронте?
а и спасибо за урок))
похоже на конструктор сайта, есть хоть один пример сайта на nuxt который дружит с сео и нормальные позиции занимает?
Здравствуйте, подскажите пожалуйста, я попробовал закинуть листинг users в компонент, но почему-то постоянно массив пустой. через components это реализовать нельзя ? Буду очень признателен за ответ, а то я уже запутался совсем
Спасибо
Cпасибо! Может есть у вас ссылка на инфо как тут делать кастомные модули? )
огонь
круть спс
Впервые слышу про тег main, загуглил "Элемент предназначен для основного содержимого документа. Содержимое должно быть уникальным и не включать типовые блоки вроде шапки сайта, подвала, навигации, боковой панели, формы поиска и т. п" ... По-моему тут противоречие с уроком, так как мы навигацию вставили в тег main.
господи... давай еще про верстку поговорим
идеально. единственное не понял как локализовать рутинг для интернациональных сайтов, т.е. мы сделали страницу about но в адресной строке надо ее видеть по разному в зависимости от выбранного языка.
Импорт компонентов делать не надо(если в конфиге установлен components на true). Сейчас уже так из коробки. Возможно раннее не было такой возможности.
Как на 48:46 ушёл аякс запрос за пределы текущего домена?
интересно, а как с этой технолгией сделать магазины, к примеру магазин кейсов к игре CS:GO(чисто для вашего уровня, просто если дам легче скорее всего вы обидитесь). Обожаю ваши нарезки, обучился к node.js, vue.js, react.js(знания успешно утеряны), всё было предельно ясно, так же данное видео про nuxt.js классная, смотрю уже в пятый раз, до этого чисто из интереса поглядывал, но сейчас действительно нужно, комментарий закидываю заранее перед видео, я уже уверен о лёгкости материала, который преподнесёте вы.
Владилен, спасибо за урок, но вот у меня что-то не взлетело... Во первых, (это для тех кто будет все ставить по новой) установка Nuxt уже происходит по другому (такого визарда как в уроке вы не увидите), во вторых - все установилось, и запустилось, базовые файлы я удалил, поставил свой, новый заголовок отображается, а в исходном коде все из старых файлов, пересобирал проект после всех изменений - та же реакция. В чем может быть проблема?
Скажите пожалуйста, для чего служит выбираемый при установке server side фреймворк? Для написания АПИ, или он как-то участвует в рендере? Можно ли с none в продакшен? Где об этом почитать? Спасибо!
Фреймворк отвечает за серверный рендеринг
Не может найти компонент, сделал по видео .... пишет Cannot find module '@/components/Navbar' , у кого такая же проблем *??
Тоже было. Попробуйте относительный путь, как в обычном vue
А можно без Nuxt, используя только vue-server-renderer?
а есть какая-то причина, почему нам нужно было создать 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.. также в него можно передавать агрументы
Как же так? Если все так удобно с NUXT - зачем тогда на обычном VUE пишут?