Nuxt JS - Vue + SSR (быстрый курс за 70 минут)

Подписаться 308 тыс.

Просмотров 158 тыс.

50% 1

Подробнее узнать об обучении в 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

Опубликовано:

4 мар 2019

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 243

@user-nc6pd4lp1j 4 года назад

Вы очень помогли немного разобраться в работе nuxt, спасибо!

@user-di6nf2rr3g Год назад

Владилен, огромное спасибо за ролики! Уже год как пытаюсь разобраться в динамических роутах. Посмотрел это видео, и всё стало понятно, разложилось по полочкам. И главное, никакой воды!!! Всё чётко, кратко, по существу и с учётом новичков.

@user-gl4sd6io4b 5 лет назад

Очень информативный ролик, много нового узнал! Спасибо Вам!

@Kristina-xe7ql 4 года назад

Спасибо большое за информацию) Много чего организовалось в голове :)

@dmitryblinov8401 Год назад

Видео супер, спасибо большое!! Буду ждать еще видео по Nuxt, круто объясняешь))

@anastasiiabardyuzha3303 4 года назад

Спасибо! Очень доступно и понятно!

@user-vj1yg6mj2f 3 года назад

Спасибо. Как всегда качественный контент и все понятно.

@Idontreallycareatall 3 года назад

Лайк, подписка, колокольчик. Очень душевный туториал! Спасибо за работу!

@namax6634 4 года назад

16:00 Вот эта тема с просмотром кода это просто гениально! Сразу понятно стало отличие SPA от SSR

@popov654 2 года назад

SSR - это, строго говоря, элемент классического сайта в контексте SPA, то есть мы заставляем наше SPA при первой загрузке вести себя как классический вебсайт, получая HTML с сервера. Ну и имхо, термин SPA тут вообще не корректен, SPA как правило имеют всего один роут (например, веб-чат или видеоконференция), максимум 2-3, потому что иногда есть роуты для просмотра профилей пользователей, страницы логина и так далее. Обычный же сайт с множеством разделов и страниц с загрузкой всех или почти всех данных по AJAX и обновлением URL через History API при каждом навигационном переходе я не знаю как правильно называть, я это называю это просто full AJAX подходом.И Nuxt - он скорее для создания таких сайтов, чем для создания классических SPA.

@alexperemey6046 Год назад

@@popov654 SPA - это технически одна страница, куда сначала грузится весь исполняемый код, создающий разнообразное поведение. С количеством добавленных роутов это никак не связано.

@zergzerg4844 Год назад

@@alexperemey6046 А как тогда опраделяется многостраничный сайт? Если дело не больших количествах роутингов и кучей вьюшек? Где эта грань когда SPA превращается в MPA?

@nurbekismoilov8865 3 года назад

Бро от души спасибо) Как долго искал как вообще на nuxt-е приложение стартует чтобы токен уловить. Очень сильно помог! С меня жирный лойс

@alibekbaiseiit9335 4 года назад

Спасибо! Хорошо объясняете!

@frankielamps2474 3 года назад

просто и круто, спасибо тебе за твой нелегкий труд

@urakovaliaskar4731 4 года назад

Спасибо за видео, этот крашкурс был очень полезен для меня, давно хотел попробовать накст и о боже какой он офигенный, теперь буду его использовать в своих проектах и дальше изучать его возможности.

@pauldudich 2 года назад

Next js one love

@serhii3328 2 года назад

Просто охренительно полезный обзор, спасибо!

@hgl-pk4wl 4 года назад

Я обожаю тебя, все очень круто)

@user-zm2jm4gb5b 5 месяцев назад

В nuxt 3, конечно, многое поменялось: например, axios модуль не используется, а используется fetch. Также при создании custom layout, нужно писать не , а . Страница с динамическим id называется не через нижнее подчёркивание, а через квадратные скобки, вот так: [id], ну и в целом, много вот таких отличий.

@bpospanov 2 года назад

спасибо за информативный туториал, Владилен

@peterpetechkin9842 Год назад

Полезно! Благодарю!

@leotechlife 5 лет назад

Просто спасибо, ты красавчик, чувак!)

@VladilenMinin 5 лет назад

Благодарю за отзыв, рад, что ценно)

@shurik8252 2 года назад

Очень круто! Спасибо! Сейчас, спустя 2 года запустил Nuxt, он стал ещё круче. Предлагаю новое видео по изменениям в Nuxt.

@ddrdeveloper 2 года назад

Да, структура изменилась и данный видеоурок уже не совсем актуален. При том, я так понял, нет поддержки Composition API и конкретно

@user-gp1tr4kr4d 4 года назад

Спасибо , было очень полезно

@rah_emil 2 года назад

Пушка!☄️🚀

@user-vz5wj9rg3d 4 года назад

Потрясающе!!!!!

@efimovmaksim 4 года назад

Все просто и понятно, спасибо.

@a.osethkin55 3 года назад

Спасибо большое! Очень полезно

@justlstn 5 лет назад

Большое спасибо урок!

@onefinal1535 3 года назад

спасибо, очень доходчиво :)

@lawcsan 4 года назад

прекрасный курс!

@DrTopk 3 года назад

класс, спасибо за видео!

@LeCoolCroco 3 года назад

Топ туториал, полноценно и понятно.

@ode2877 3 года назад

О май гад, как же много информации))

@user-bp3vk3uj8h 3 года назад

Думал просто вью это магия и радовался каждый день. Вот что действительно чертова магия.

@_Ivan_B_ 2 года назад

Чем больше магии, тем больше непонятного.

@Vlad-em1bx 4 года назад

Отличный урок!

@zhuniskarimov3822 2 года назад

Круто! Ясно! Четко! Лайк!

@user-fo8fl5wx6x 2 года назад

Спасибо, очень понравилось видео как и масса других +1

@itoorgenev 4 года назад

Владилен, дай бог тебе здоровья и далларов.

@artemPUCKIN 5 лет назад

Спасибо большое!

@VladilenMinin 5 лет назад

Пожалуйста Скоро будет много подобного, более качественного контента )

@artemPUCKIN 5 лет назад

@@VladilenMinin будем ждать!)

@michaelcorleone3741 4 года назад

Владилен молодец! Почерпнул несколько полезных алгоритмов Жду курсы за 2020 :)

@VladilenMinin 4 года назад

Ссылки в описании на новые Курсы)

@user-vg1it8cq6w 3 года назад

Отлично. После изучения Vue долго боялся юзать его на продакшне из-за потенциальных проблем с SEO. Теперь не боюсь.

@alimuradov 3 года назад

Смотрю второй раз. Чел ты гений

@user-xn8iw5to1o Год назад

Спасибо огромное

@nwuno 3 года назад

Отдельный чанг лейзилоадит))) Спасибо, многое не понятно, но начало положено

@artasheshovesyan4423 4 года назад

Спасибо за видео

@VladimirShaitan 4 года назад

Thanks a lot :)

@user-xl1pv8fn9r 3 года назад

Вообще круто чувак желаю тебе удачи 👍👍👍👍👍😎😎😎😎😎😎👏👏👏👏👏👏👏

@capstanfearless 3 года назад

Владилен, супер-подача материала! Спасибо) А отключение prefetch (для скорости) можно делать всем ссылкам?

@alimuradov 4 года назад

Лайкос!!!

@kumaranv7006 2 года назад

Спасибо!

@user-og5lw8jf6s 3 года назад

Владилен, выпусти по nuxt новое видео. А то столько изменений! Это видео уже во многом потеряло актуальность.

@Indy_660 3 года назад

Черт, я только собрался изучать его

@flapjack1379 3 года назад

Ничего оно не потеряло. Структура папок, способ подключения модулей, создание навигации, всё осталось так же.

@mioegalaxy4816 4 года назад

спасибо за видео, наконец-то кто-то по простому объяснил nuxt ssr)) случайно не практикуешь nuxt+ts ?

@VladilenMinin 5 лет назад

Мой ВК: 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

@ergostone8543 4 года назад

подскажите, как в этом примере генерировать SSR для страницы каждого отдельного пользователя?

@user-iq7tr5qk7b 4 года назад

Размести тайминги в описании, пожалуйста.

@olesmx 4 года назад

Спасибо большое! Скажите пожалуйста, почему авторизация (логин токен) слетает после полного рефреша любой страницы?

@user-iq7tr5qk7b 4 года назад

@@olesmx Где хранишь логин и токен?

@agrostj2184 2 года назад

Класс!!!!!

@Kalinkin88 4 года назад

Благодарю

@1mikheeff 3 года назад

Спасибо! очень хотелось бы видео как подружить накст с ts

@billshifer7652 2 года назад

спасибо!

@user-di6nf2rr3g Год назад

Очень жалею, что раньше не изучал разработку самостоятельно по твоим видео. А воспользовался платным ресурсом, отучился полтора года, и всё вылетело быстро как и залетело.

@dm1annem 3 года назад

Очень доступно, спасибо! А можете показать, как реализовать в nuxt размещение метатегов на каждой странице для SEO?

@dmitry5154 4 года назад

Спасибо

@user-lq4ms6bk8n 2 года назад

огонь

@nizom333 3 года назад

а и спасибо за урок))

@mikurrey416 5 лет назад

Огромное спасибо за проделанную работу! Очень рад был найти такой качественный контент. Осталось несколько вопросов: 1) как "заставить" nuxt подгружать стили через , чтобы не пихать в шапку всю эту бутстраповскую колбасу? 2) как правильно и "технично" обработать ситуацию, когда axios вернул 404? Как при этом отобразить страничку error.vue? 3) показанный вами способ авторизации, он безопасен для прода? store (и токен соответственно) ведь хранится исключительно на клиенте, я правильно понимаю?

@VladilenMinin 5 лет назад

Привет, благодарю за отзыв) 1. Не всегда такой подход эффективный, но если хочешь, то в nuxt.config.js в секции head это можно сделать, добавив новый элемент в массив link 2. nuxtjs.org/api/context/ параметр error, который можно получить из контекста 3. Да, держать токен на клиенте в сторе нормальный подход, но учите, что он должен улетать в каждом запросе на сервер, где будет валидироваться, если он не пройдет валидацию, то тоже необходимо добавить на фронтенд проверки

@mikurrey416 5 лет назад

@@VladilenMinin , спасибо за ответы! По 1. тогда еще такой вот вопрос: как все настроить в Nuxt таким образом, чтобы из scss собирался css файл и ложился в определенную папку, как это можно сделать в обычном проекте vue-webpack? (я честно искал, но не нашел об этом ничего в документации nuxt:) или не всё пока не понимаю).

@VladilenMinin 5 лет назад

@@mikurrey416 Я сам не пробовал, но ребята тут решили проблему: github.com/nuxt/nuxt.js/issues/1533

@mikurrey416 5 лет назад

@@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";_ и пользоваться всеми возможностями его кастомизации.

@user-dk1ru3yx9i 4 года назад

круть спс

@dbehterev 4 года назад

Владилен, спасибо за крутой обучающий ролик. Когда начал писать свой первый сайт с использованием Vue для фронта и Laravel для бека столкнулся с проблемой генерации статического кода для SEO. Отложил,а тут как раз этот вектор, по которому можно двигаться. Правильно ли понимаю, что если бэкенд на Laravel (PHP), то в качестве веб-сервера для Лары делаем nginx, а для статической генерации html кода поднимаем nodeJS + Nuxt ? Или какой курс посмотреть? Не ради рекламы, но смотрю ресурс ларакастс, собственно там автор очень доходчиво излагает приемы разработки Vue + Laravel, собственно оттуда начал делать попытки разработки. Но тема SSR, когда бэк не на ноде, а на пхп, не раскрыта.

@TheZeyura 3 года назад

Спасибо огромное! Я тащусь от Накста :) Есть вопрос: подскажите плиз, где и как теперь подключать Firebase ? В курсе про CRM мы без проблем подключали её в main.js

@darkcrusaderzxc Год назад

Спасибо за ролик, ещё бы ссылочку в описании на плагины для vs code, тоже хочу такие иконки для папок.

@kostikovmu 2 года назад

Спасибо понял что нужно получать данные в fetch через context. В остальном разобрался пока делал проект.

@kostikovmu 2 года назад

Хотя есть вопрос если меню не внутри тега nuxt то оно уже не будет генерироваться на сервере? Как тогда header footer sidebar сгенерировать на сервере?

@alexwong7367 4 года назад

Про nuxtServerInit в конце Влад сказал неспроста, на этом тригере будет происходить валидация куки авторизации по хедеру, это типа домашнее задание. (см Nuxt Auth External API (JWT) Учимся вместе )) Спасибо

@windcrack8404 3 года назад

Это очень круто, прям после native Vuejs, бомба. Есть вопросы, а вот есть бд на mysql, то понадобиться писать бэк, чтобы получить из бд данные, или nuxt уже это умеет? На нем можно сделать приложение, я правильно понял? За видео и курс, спасибо большое.

@popov654 2 года назад

Классный фреймворк, только жаль, что ты не объяснил, как осуществляется синхронизация стора на клиенте и на сервере (а ведь это важно для того, чтобы авторизация работала, я уверен, что Nuxt как-то должен поддерживать принудительный пуш данных в стор на сервере по требованию, когда на клиенте что-то произошло типа логина или разлогина, либо смены языка, темы и так далее). Короче, про работу с сессиями хочется больше узнать :)

@muhamadaminibragimov5096 4 года назад

для гуард правильнее использовать middleware или метод validate? если через middleware не загрузится ли лишние байти даже если нету прав?

@cobwowcobwow6331 5 лет назад

Спасибо за видео! а что нужно сделать чтобы можно было в layout делать ssr? Я так понял что метод асинкдата впринципе только в page работает, а в компонентах и layout выдает ошибку(но с компонентами понятно можно пробросить данные, а вот как в лайоуте это сделать непонятно), а асинк фетч у меня вообще ничего не выводит. К примеру я хочу в лайоуте меню категорий вывести из базы.

@alexeleave4551 4 года назад

Супер! А есть ли в Nuxt система хранения роутов? Чтобы они хранились в одном месте. Предположим, мы захотели изменить роут с "about" на "aboutus", тогда тут придётся везде искать и менять значения, файл переименовывать, а иначе было бы в одном месте, поменял и везде автоматом изменилось?

@dispeltr1183 5 лет назад

Спасибо за отличный курс! А не могли бы вы снять такое же видео но про Next.js? Спасибо!

@VladilenMinin 5 лет назад

Да, вероятно будет

@taran_dm 3 года назад

Есть смысл к всем ссылкам на странице добавлять атрибут "no-prefetch" для быстродействия? Или каким ссылкам на страницы давать этот атрибут, а каким нет? Спасибо!

@azizkudaikulov993 3 года назад

Спасибо, у меня вопрос, а можно ли axios подгружать по мере необходимости?

@demons_123 5 лет назад

Отличное видео! Узнал много нового, хотя пересмотрел по этой теме кучу видео. Возник вопрос: Смутил тот момент, когда происходит проверка и наполнение стора пользователями, потому что эта проверка сделана на самой странице. Если страниц, отображающих пользователей, будет несколько, то получается этот кусок кода будет дублироваться. Возможна ли эта проверка и наполнение в самом сторе, чтобы логика была в одном месте или где ее лучше разместить?

@_Ivan_B_ 2 года назад

Спасибо за работу. Возник такой вопрос: как по нужному урлу вызывать другую страницу из папке pages например? Чтоб по урлу / рекваерился не index.vue, а другой файл в этой папке.

@lessons3141 2 года назад

мощь

@kentforthable 3 года назад

Владилен, у меня webstorm ругается на метод dispatch('unresolved method or function dispatch()') для vuex. (Не подскажешь в чем может быть беда? Может vuex нужно как-то отдельно ещё где-то указывать?

@Neron768 4 года назад

27:45 prefetch указывать можно на любой ссылке? Почему указано на одной ссылке, а работает для всех?

@domovikx_by 4 года назад

Можно дополнение к видео? Сейчас многое в том числе переходят на использование ts в своей работе, я буду весьма благодарен вам за видео где вы будете рассказывать как работать с подобными технологиями в контексте ts. Я понимаю что это курс больше базовый и поэтому js, поэтому это просто предложение к рассмотрению. Спасибо и хорошего дня.

@alexperemey6046 Год назад

@@eugenenovikov671 ТС отлично используется с vue, точно так же, как с любым другим фреймворком.

@user-vd2yv2qs3o 4 года назад

Мои личные заметки 25:00 подсветка активных ссылок

@user-hr8gc1dc6r 2 года назад

Нужно сделать продолжение с nuxt и показать как сделать PAW (прогрессивная веб приложение).

@semen083 4 года назад

Действительно ли на практике server side rendering быстрее рисует страницу, чем spa, или это только в теории?

@TheZeyura 3 года назад

Cпасибо! Может есть у вас ссылка на инфо как тут делать кастомные модули? )

@MrTenedanya 3 года назад

Есть очень большой вопрос, на который ответа пока что найти не удалось. Есть docker контейнер. В этом контейнере поднят nuxt js менеджер пакетов yarl, и все окружение необходимое для работы. Появилась задача внести изменение в работающий сервер. Изменения внеслись. Файлы теперь нужено перебилдить и стартануть. Есть какая то команда, типа yarl restart?

@almazrt 3 года назад

Магическая магия

@hoolivuli 2 года назад

идеально. единственное не понял как локализовать рутинг для интернациональных сайтов, т.е. мы сделали страницу about но в адресной строке надо ее видеть по разному в зависимости от выбранного языка.

@ericraudy 4 года назад

как роботы Google и Яндекс индексируют страницы полностью сгенерированные js?

@picvs_ 3 года назад

Владилен, добрый день! Как защитить данные которые получаем как JSON? Они в открытом виде просто

@MrAlexMetall 3 года назад

Спасибо. А как выполняется реализация django на беке + nuxt ssr на фронте?

@user-bp3vk3uj8h 3 года назад

Импорт компонентов делать не надо(если в конфиге установлен components на true). Сейчас уже так из коробки. Возможно раннее не было такой возможности.

@arturlauhin4992 5 лет назад

Впервые слышу про тег main, загуглил "Элемент предназначен для основного содержимого документа. Содержимое должно быть уникальным и не включать типовые блоки вроде шапки сайта, подвала, навигации, боковой панели, формы поиска и т. п" ... По-моему тут противоречие с уроком, так как мы навигацию вставили в тег main.

@user-er5ux4xv7e 4 года назад

господи... давай еще про верстку поговорим

@AntonioMick 6 месяцев назад

Здравствуйте, подскажите пожалуйста, я попробовал закинуть листинг users в компонент, но почему-то постоянно массив пустой. через components это реализовать нельзя ? Буду очень признателен за ответ, а то я уже запутался совсем

@upsystmill 4 года назад

похоже на конструктор сайта, есть хоть один пример сайта на nuxt который дружит с сео и нормальные позиции занимает?

@Zanozin 4 года назад

Как на 48:46 ушёл аякс запрос за пределы текущего домена?

@voltenko88 4 года назад

Скажите пожалуйста, для чего служит выбираемый при установке server side фреймворк? Для написания АПИ, или он как-то участвует в рендере? Можно ли с none в продакшен? Где об этом почитать? Спасибо!

@VladilenMinin 4 года назад

Фреймворк отвечает за серверный рендеринг

@vasya8441 2 года назад

великолепное видео, я его прошел 10 раз где-то, помнил наизусть и мне на собеседование попала задача такая и я ее сделал и теперь я middle, а до этого я вообще не работал в frontend разработке, взяли за то что отвечал на все вопросы, спасибо за видео

@webmobiledev 2 года назад

Владилен, спасибо за урок, но вот у меня что-то не взлетело... Во первых, (это для тех кто будет все ставить по новой) установка Nuxt уже происходит по другому (такого визарда как в уроке вы не увидите), во вторых - все установилось, и запустилось, базовые файлы я удалил, поставил свой, новый заголовок отображается, а в исходном коде все из старых файлов, пересобирал проект после всех изменений - та же реакция. В чем может быть проблема?