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

[@ЕленаБелая-ь9т]

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

[@namax6634]

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

[@popov654]

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

[@alexperemey6046]

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

[@zergzerg4844]

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

[@ПётрГлянцев]

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

[@VladilenMinin]

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

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

[@ИльяДёмин-ы3м]

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

[@olesmx]

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

[@ИльяДёмин-ы3м]

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

[@JohnDoe-p1y]

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

[@_Ivan_B_]

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

[@ИгорьДолгов-ы8я]

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

[@shurik8252]

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

[@ddrdeveloper]

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

[@РустамМирзаев-ш9я]

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

[@nurbekismoilov8865]

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

[@bpospanov]

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

[@urakovaliaskar4731]

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

[@pauldudich]

Next js one love

[@ВладимирБ-щ5д]

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

[@peterpetechkin9842]

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

[@Kristina-xe7ql]

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

[@ИгорьДолгов-ы8я]

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

[@michaelcorleone3741]

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

[@VladilenMinin]

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

[@МаксимГромов-е8м]

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

[@dmitryblinov8401]

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

[@mikurrey416]

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

[@VladilenMinin]

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

[@mikurrey416]

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

[@VladilenMinin]

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

[@mikurrey416]

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

[@ИванДмитриев-ь7ц]

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

[@Indy_660]

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

[@flapjack1379]

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

[@anastasiiabardyuzha3303]

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

[@itoorgenev]

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

[@vasya8441]

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

[@alimuradov]

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

[@ЖахонгирТурдиев-д8л]

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

[@rah_emil]

Пушка!☄️🚀

[@ode2877]

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

[@Idontreallycareatall]

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

[@serhii3328]

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

[@LeCoolCroco]

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

[@zhuniskarimov3822]

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

[@hgl-pk4wl]

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

[@nwuno]

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

[@leotechlife]

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

[@VladilenMinin]

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

[@frankielamps2474]

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

[@alexwong7367]

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

[@СергейБакланов-т7и]

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

[@kostikovmu]

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

[@kostikovmu]

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

[@1mikheeff]

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

[@DrTopk]

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

[@domovikx_by]

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

[@alexperemey6046]

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

[@artemPUCKIN]

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

[@VladilenMinin]

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

[@artemPUCKIN]

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

[@onefinal1535]

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

[@avtobazatj2184]

Класс!!!!!

[@arturlauhin4992]

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

[@SergioWahaWaher]

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

[@Vlad-em1bx]

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

[@ГеннадийФедюнин-у5у]

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

[@JarkynbekBatyrov]

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

[@efimovmaksim]

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

[@lawcsan]

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

[@justlstn]

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

[@alimuradov]

Лайкос!!!

[@user-hr8gc1dc6r]

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

[@kumaranv7006]

Спасибо!

[@JohnDoe-p1y]

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

[@TheZeyura]

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

[@ЯрославВитрык]

огонь

[@artasheshovesyan4423]

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

[@billshifer7652]

спасибо!

[@rocketman4072]

70 минут как сказка. Меня месяц в онлайн школе учили какой-то срани бесполезной )))

[@alexeleave4551]

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

[@windcrack8404]

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

[@hoolivuli]

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

[@_Ivan_B_]

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

[@ericraudy]

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

[@capstanfearless]

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

[@upsystmill]

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

[@dm1annem]

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

[@muhamadaminibragimov5096]

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

[@Kalinkin88]

Благодарю

[@ОлексійУкраїна-й7г]

круть спс

[@zadpot_npomaho6194]

интересно, а как с этой технолгией сделать магазины, к примеру магазин кейсов к игре CS:GO(чисто для вашего уровня, просто если дам легче скорее всего вы обидитесь). Обожаю ваши нарезки, обучился к node.js, vue.js, react.js(знания успешно утеряны), всё было предельно ясно, так же данное видео про nuxt.js классная, смотрю уже в пятый раз, до этого чисто из интереса поглядывал, но сейчас действительно нужно, комментарий закидываю заранее перед видео, я уже уверен о лёгкости материала, который преподнесёте вы.

[@taran_dm]

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

[@MrTenedanya]

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

[@Neron768]

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

[@dbehterev]

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

[@azizkudaikulov993]

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

[@VladimirShaitan]

Thanks a lot :)

[@lessons3141]

мощь

[@другМаша]

можно просто прописать компонент в layout и все будет работать без импортов

[@monoteiz]

А можно без Nuxt, используя только vue-server-renderer?

[@AntonioMick]

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

[@almazrt]

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

[@darkcrusaderzxc]

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

[@dmitry5154]

Спасибо

[@dispeltr1183]

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

[@VladilenMinin]

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

[@MrAlexMetall]

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

[@mioegalaxy4816]

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

[@picvs_]

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

[@nizom333]

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

[@life-po8ur]

А что это получится

[@Valiazerdes]

Гайд хороший но у меня структура проекта на половину другая, видимо быстро все меняется так

[@alexwong7367]

Есть ли видео где ты говориш про создание своего /api? Взаимодействие через json...

[@VladilenMinin]

В описании к ролику ссылка на курс с накстом

[@cobwowcobwow6331]

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

[@kentforthable]

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

[@demons_123]

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

[@popov654]

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

[@voltenko88]

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

[@VladilenMinin]

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

[@TheZeyura]

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

[@alexeynazarov6128]

У кого не загрузились юзеры на 46 мин, в цикле добавьтe перебор по users.data

[@EugeneChe-81]

xey ov Да. Но я столкнулся с этим только когда до стадии с Vuex добрались. До этого показывались юзеры.... Но в видео же без data все норм... непонятно

[@ladymelven]

Спасибо, помогли)) Немного неочевидно, но аксиос-запрос возвращает не сам массив, а объект data, который его содержит. Как вариант - можно извлечь из промиса сразу этот объект и поставить содержимое в компонент. Почему у Владилена работает без этого шага - непонятно)

[@ArgumentX1]

Раньше сайт возвращал данные в другом формате, видимо