В nuxt 3, конечно, многое поменялось: например, axios модуль не используется, а используется fetch. Также при создании custom layout, нужно писать не , а . Страница с динамическим id называется не через нижнее подчёркивание, а через квадратные скобки, вот так: [id], ну и в целом, много вот таких отличий.
SSR - это, строго говоря, элемент классического сайта в контексте SPA, то есть мы заставляем наше SPA при первой загрузке вести себя как классический вебсайт, получая HTML с сервера. Ну и имхо, термин SPA тут вообще не корректен, SPA как правило имеют всего один роут (например, веб-чат или видеоконференция), максимум 2-3, потому что иногда есть роуты для просмотра профилей пользователей, страницы логина и так далее. Обычный же сайт с множеством разделов и страниц с загрузкой всех или почти всех данных по AJAX и обновлением URL через History API при каждом навигационном переходе я не знаю как правильно называть, я это называю это просто full AJAX подходом.И Nuxt - он скорее для создания таких сайтов, чем для создания классических SPA.
@@popov654 SPA - это технически одна страница, куда сначала грузится весь исполняемый код, создающий разнообразное поведение. С количеством добавленных роутов это никак не связано.
@@alexperemey6046 А как тогда опраделяется многостраничный сайт? Если дело не больших количествах роутингов и кучей вьюшек? Где эта грань когда SPA превращается в MPA?
Владилен, огромное спасибо за ролики! Уже год как пытаюсь разобраться в динамических роутах. Посмотрел это видео, и всё стало понятно, разложилось по полочкам. И главное, никакой воды!!! Всё чётко, кратко, по существу и с учётом новичков.
Спасибо за видео, этот крашкурс был очень полезен для меня, давно хотел попробовать накст и о боже какой он офигенный, теперь буду его использовать в своих проектах и дальше изучать его возможности.
Огромное спасибо за проделанную работу! Очень рад был найти такой качественный контент. Осталось несколько вопросов: 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:) или не всё пока не понимаю).
@@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";_ и пользоваться всеми возможностями его кастомизации.
Здравствуйте, подскажите пожалуйста, я попробовал закинуть листинг users в компонент, но почему-то постоянно массив пустой. через components это реализовать нельзя ? Буду очень признателен за ответ, а то я уже запутался совсем
Есть очень большой вопрос, на который ответа пока что найти не удалось. Есть docker контейнер. В этом контейнере поднят nuxt js менеджер пакетов yarl, и все окружение необходимое для работы. Появилась задача внести изменение в работающий сервер. Изменения внеслись. Файлы теперь нужено перебилдить и стартануть. Есть какая то команда, типа yarl restart?
Есть смысл к всем ссылкам на странице добавлять атрибут "no-prefetch" для быстродействия? Или каким ссылкам на страницы давать этот атрибут, а каким нет? Спасибо!
Владилен, у меня webstorm ругается на метод dispatch('unresolved method or function dispatch()') для vuex. (Не подскажешь в чем может быть беда? Может vuex нужно как-то отдельно ещё где-то указывать?
Очень жалею, что раньше не изучал разработку самостоятельно по твоим видео. А воспользовался платным ресурсом, отучился полтора года, и всё вылетело быстро как и залетело.
Можно дополнение к видео? Сейчас многое в том числе переходят на использование ts в своей работе, я буду весьма благодарен вам за видео где вы будете рассказывать как работать с подобными технологиями в контексте ts. Я понимаю что это курс больше базовый и поэтому js, поэтому это просто предложение к рассмотрению. Спасибо и хорошего дня.
Спасибо за работу. Возник такой вопрос: как по нужному урлу вызывать другую страницу из папке pages например? Чтоб по урлу / рекваерился не index.vue, а другой файл в этой папке.
Владилен, спасибо за урок, но вот у меня что-то не взлетело... Во первых, (это для тех кто будет все ставить по новой) установка 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
великолепное видео, я его прошел 10 раз где-то, помнил наизусть и мне на собеседование попала задача такая и я ее сделал и теперь я middle, а до этого я вообще не работал в frontend разработке, взяли за то что отвечал на все вопросы, спасибо за видео
Спасибо огромное! Я тащусь от Накста :) Есть вопрос: подскажите плиз, где и как теперь подключать Firebase ? В курсе про CRM мы без проблем подключали её в main.js
Супер! А есть ли в Nuxt система хранения роутов? Чтобы они хранились в одном месте. Предположим, мы захотели изменить роут с "about" на "aboutus", тогда тут придётся везде искать и менять значения, файл переименовывать, а иначе было бы в одном месте, поменял и везде автоматом изменилось?
Спасибо за видео! а что нужно сделать чтобы можно было в layout делать ssr? Я так понял что метод асинкдата впринципе только в page работает, а в компонентах и layout выдает ошибку(но с компонентами понятно можно пробросить данные, а вот как в лайоуте это сделать непонятно), а асинк фетч у меня вообще ничего не выводит. К примеру я хочу в лайоуте меню категорий вывести из базы.
Это очень круто, прям после native Vuejs, бомба. Есть вопросы, а вот есть бд на mysql, то понадобиться писать бэк, чтобы получить из бд данные, или nuxt уже это умеет? На нем можно сделать приложение, я правильно понял? За видео и курс, спасибо большое.
Скажите пожалуйста, для чего служит выбираемый при установке server side фреймворк? Для написания АПИ, или он как-то участвует в рендере? Можно ли с none в продакшен? Где об этом почитать? Спасибо!
Если вы используете стейт напрямую - user: state => state.user, то проще сразу получить стейт в компоненте через mapState, если нужно значение на основе двух стейтов, или стейт с преобразование (filter, reduce), то можно использовать геттер, по сути геттер это computed.. также в него можно передавать агрументы
Не понимаю, почему в network появляется аякс запрос, если клиенты уже есть в исходном коде страницы? Или аякс раньше происходит, чем страница возвращается?
Хотя есть вопрос если меню не внутри тега nuxt то оно уже не будет генерироваться на сервере? Как тогда header footer sidebar сгенерировать на сервере?
идеально. единственное не понял как локализовать рутинг для интернациональных сайтов, т.е. мы сделали страницу about но в адресной строке надо ее видеть по разному в зависимости от выбранного языка.
Владилен, спасибо за крутой обучающий ролик. Когда начал писать свой первый сайт с использованием Vue для фронта и Laravel для бека столкнулся с проблемой генерации статического кода для SEO. Отложил,а тут как раз этот вектор, по которому можно двигаться. Правильно ли понимаю, что если бэкенд на Laravel (PHP), то в качестве веб-сервера для Лары делаем nginx, а для статической генерации html кода поднимаем nodeJS + Nuxt ? Или какой курс посмотреть? Не ради рекламы, но смотрю ресурс ларакастс, собственно там автор очень доходчиво излагает приемы разработки Vue + Laravel, собственно оттуда начал делать попытки разработки. Но тема SSR, когда бэк не на ноде, а на пхп, не раскрыта.
Впервые слышу про тег main, загуглил "Элемент предназначен для основного содержимого документа. Содержимое должно быть уникальным и не включать типовые блоки вроде шапки сайта, подвала, навигации, боковой панели, формы поиска и т. п" ... По-моему тут противоречие с уроком, так как мы навигацию вставили в тег main.
Так и не удалось внедрить интерсептор в _axios_ . По документации есть у _nuxtjs/axios_ параметр _requestInterceptor_ , который как раз для этого служит, но у меня он почему-то не "заводится": _nuxt.config.js_ .... axios: { baseURL: "project/api/v2/", requestInterceptor(config, { store }) { config.headers.common["X-Application-Id"] = "30"; return config; } }, ... Заголовок _X-Application-Id_ не попадает в каждый запрос, как я рассчитывал. Может, я что-то не так делаю? Знаю, есть более корявый способ - написать свой плагин. Но хочется понять, почему не работает тот, что из коробки.
Вопрос отпал сам собой, когда изучил чейнчлог и исходники. Разработчики убрали эту фичу в 5 версии, и рекомендуют именно делать плагины. Странный ход, как по мне :( stackoverflow.com/questions/50551158/how-to-attach-axios-axios-interceptor-to-nuxt-globally Вот решение вопроса с помощью плагина.
@@mikurrey416 Я видимо не застал те времена, когда было через конфиг Я прислал пример кода из реального приложения и там как видишь и есть решение через плагин)
Ставишь в начало виделяемого блока курсор, скролишь в низ, до конечно части выделения. После зажимая шифт, кликаешь на участок, до которого нужно выделение. После, как сказали выше, таб. Но есть плагины, которые делают автоматически это. У jetbrains это из коробки - Ctrl+l или ctrl+shift+l
Блин, а у меня продолжает вылазит ошибка client.js?06a0:97 TypeError: Cannot read property 'length' of undefined Хотя я для чистоты скопировал ваш код из репы. В интернете люди пишут что это связано с асинком. Так и не смог пофиксить(
@@pilezkiy Nginx без разницы какой порт слушать. Быстрей всего у вас чего-то не хватает в самой сборке Nginx. Например модуля ngx_http_proxy_module. Возможно вы просто что-то делаете не так.
Не знаете в чем проблема? создал папку и в нее вложил _id.vue и появляется проблема - Invalid component name: "_id". Component names should conform to valid custom element name in html5 specification.
Видео отличное - спасибо за него. Не совсем очевидно по поводу state. На 54:28 говориться о том, что state должна быть функцией (чтобы избежать мутаций): export const state = () => ({ users: [] } и по умолчанию users - это пустой массив. В другом вашем видео про Vuex (ua-cam.com/video/c2SK1IlmYL8/v-deo.html) в похожем случае функция не используется. Объясните, пожалуйста: 1) каким образом в ваших примерах она защищает от мутаций 2) как getter, который внутри себя вызывает users получает не пустой массив (который и должен возвращаться этой функцией), а текущее значение
Классный фреймворк, только жаль, что ты не объяснил, как осуществляется синхронизация стора на клиенте и на сервере (а ведь это важно для того, чтобы авторизация работала, я уверен, что Nuxt как-то должен поддерживать принудительный пуш данных в стор на сервере по требованию, когда на клиенте что-то произошло типа логина или разлогина, либо смены языка, темы и так далее). Короче, про работу с сессиями хочется больше узнать :)
интересно, а как с этой технолгией сделать магазины, к примеру магазин кейсов к игре CS:GO(чисто для вашего уровня, просто если дам легче скорее всего вы обидитесь). Обожаю ваши нарезки, обучился к node.js, vue.js, react.js(знания успешно утеряны), всё было предельно ясно, так же данное видео про nuxt.js классная, смотрю уже в пятый раз, до этого чисто из интереса поглядывал, но сейчас действительно нужно, комментарий закидываю заранее перед видео, я уже уверен о лёгкости материала, который преподнесёте вы.
Отличное видео! Узнал много нового, хотя пересмотрел по этой теме кучу видео. Возник вопрос: Смутил тот момент, когда происходит проверка и наполнение стора пользователями, потому что эта проверка сделана на самой странице. Если страниц, отображающих пользователей, будет несколько, то получается этот кусок кода будет дублироваться. Возможна ли эта проверка и наполнение в самом сторе, чтобы логика была в одном месте или где ее лучше разместить?
Вы очень помогли немного разобраться в работе nuxt, спасибо!
В nuxt 3, конечно, многое поменялось: например, axios модуль не используется, а используется fetch. Также при создании custom layout, нужно писать не , а . Страница с динамическим id называется не через нижнее подчёркивание, а через квадратные скобки, вот так: [id], ну и в целом, много вот таких отличий.
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, круто объясняешь))
Бро от души спасибо) Как долго искал как вообще на nuxt-е приложение стартует чтобы токен уловить. Очень сильно помог! С меня жирный лойс
Спасибо за видео, этот крашкурс был очень полезен для меня, давно хотел попробовать накст и о боже какой он офигенный, теперь буду его использовать в своих проектах и дальше изучать его возможности.
Next js one love
Спасибо большое за информацию) Много чего организовалось в голове :)
Спасибо. Как всегда качественный контент и все понятно.
Лайк, подписка, колокольчик. Очень душевный туториал! Спасибо за работу!
Вообще круто чувак желаю тебе удачи
👍👍👍👍👍😎😎😎😎😎😎👏👏👏👏👏👏👏
Пушка!☄️🚀
спасибо за информативный туториал, Владилен
Спасибо! Очень доступно и понятно!
Огромное спасибо за проделанную работу! Очень рад был найти такой качественный контент.
Осталось несколько вопросов:
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";_ и пользоваться всеми возможностями его кастомизации.
Владилен молодец! Почерпнул несколько полезных алгоритмов
Жду курсы за 2020 :)
Ссылки в описании на новые Курсы)
Полезно! Благодарю!
О май гад, как же много информации))
Просто охренительно полезный обзор, спасибо!
Я обожаю тебя, все очень круто)
Владилен, выпусти по nuxt новое видео. А то столько изменений! Это видео уже во многом потеряло актуальность.
Черт, я только собрался изучать его
Ничего оно не потеряло. Структура папок, способ подключения модулей, создание навигации, всё осталось так же.
просто и круто, спасибо тебе за твой нелегкий труд
Здравствуйте, подскажите пожалуйста, я попробовал закинуть листинг users в компонент, но почему-то постоянно массив пустой. через components это реализовать нельзя ? Буду очень признателен за ответ, а то я уже запутался совсем
Просто спасибо, ты красавчик, чувак!)
Благодарю за отзыв, рад, что ценно)
Есть очень большой вопрос, на который ответа пока что найти не удалось. Есть docker контейнер. В этом контейнере поднят nuxt js менеджер пакетов yarl, и все окружение необходимое для работы.
Появилась задача внести изменение в работающий сервер.
Изменения внеслись. Файлы теперь нужено перебилдить и стартануть.
Есть какая то команда, типа yarl restart?
27:45 prefetch указывать можно на любой ссылке? Почему указано на одной ссылке, а работает для всех?
Топ туториал, полноценно и понятно.
Смотрю второй раз. Чел ты гений
Есть смысл к всем ссылкам на странице добавлять атрибут "no-prefetch" для быстродействия? Или каким ссылкам на страницы давать этот атрибут, а каким нет? Спасибо!
Владилен, дай бог тебе здоровья и далларов.
как роботы Google и Яндекс индексируют страницы полностью сгенерированные js?
Владилен, у меня webstorm ругается на метод dispatch('unresolved method or function dispatch()') для vuex. (Не подскажешь в чем может быть беда? Может vuex нужно как-то отдельно ещё где-то указывать?
Отлично. После изучения Vue долго боялся юзать его на продакшне из-за потенциальных проблем с SEO. Теперь не боюсь.
класс, спасибо за видео!
Очень жалею, что раньше не изучал разработку самостоятельно по твоим видео. А воспользовался платным ресурсом, отучился полтора года, и всё вылетело быстро как и залетело.
Круто! Ясно! Четко! Лайк!
Спасибо , было очень полезно
Спасибо, очень понравилось видео как и масса других +1
похоже на конструктор сайта, есть хоть один пример сайта на nuxt который дружит с сео и нормальные позиции занимает?
Можно дополнение к видео? Сейчас многое в том числе переходят на использование ts в своей работе, я буду весьма благодарен вам за видео где вы будете рассказывать как работать с подобными технологиями в контексте ts. Я понимаю что это курс больше базовый и поэтому js, поэтому это просто предложение к рассмотрению. Спасибо и хорошего дня.
@@eugenenovikov671 ТС отлично используется с vue, точно так же, как с любым другим фреймворком.
Отдельный чанг лейзилоадит))) Спасибо, многое не понятно, но начало положено
Спасибо за работу. Возник такой вопрос: как по нужному урлу вызывать другую страницу из папке pages например? Чтоб по урлу / рекваерился не index.vue, а другой файл в этой папке.
спасибо, очень доходчиво :)
для гуард правильнее использовать middleware или метод validate? если через middleware не загрузится ли лишние байти даже если нету прав?
Как на 48:46 ушёл аякс запрос за пределы текущего домена?
Владилен, спасибо за урок, но вот у меня что-то не взлетело... Во первых, (это для тех кто будет все ставить по новой) установка 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 Где хранишь логин и токен?
Владилен, добрый день!
Как защитить данные которые получаем как JSON?
Они в открытом виде просто
великолепное видео, я его прошел 10 раз где-то, помнил наизусть и мне на собеседование попала задача такая и я ее сделал и теперь я middle, а до этого я вообще не работал в frontend разработке, взяли за то что отвечал на все вопросы, спасибо за видео
А можно без Nuxt, используя только vue-server-renderer?
Спасибо большое!
Пожалуйста
Скоро будет много подобного, более качественного контента )
@@VladilenMinin будем ждать!)
Спасибо огромное! Я тащусь от Накста :)
Есть вопрос: подскажите плиз, где и как теперь подключать Firebase ?
В курсе про CRM мы без проблем подключали её в main.js
Потрясающе!!!!!
прекрасный курс!
Супер! А есть ли в Nuxt система хранения роутов? Чтобы они хранились в одном месте. Предположим, мы захотели изменить роут с "about" на "aboutus", тогда тут придётся везде искать и менять значения, файл переименовывать, а иначе было бы в одном месте, поменял и везде автоматом изменилось?
Отличный урок!
Не может найти компонент, сделал по видео .... пишет Cannot find module '@/components/Navbar' , у кого такая же проблем *??
Тоже было. Попробуйте относительный путь, как в обычном vue
Большое спасибо урок!
Спасибо за видео! а что нужно сделать чтобы можно было в layout делать ssr? Я так понял что метод асинкдата впринципе только в page работает, а в компонентах и layout выдает ошибку(но с компонентами понятно можно пробросить данные, а вот как в лайоуте это сделать непонятно), а асинк фетч у меня вообще ничего не выводит. К примеру я хочу в лайоуте меню категорий вывести из базы.
Спасибо, у меня вопрос, а можно ли axios подгружать по мере необходимости?
Владилен, супер-подача материала! Спасибо) А отключение prefetch (для скорости) можно делать всем ссылкам?
Спасибо! очень хотелось бы видео как подружить накст с ts
Импорт компонентов делать не надо(если в конфиге установлен components на true). Сейчас уже так из коробки. Возможно раннее не было такой возможности.
Не работает такая установка пакета в винде
npm install @nuxtjs/axios
Нераспознанный токен в исходном тексте.
строка:1 знак:13
+ npm install
Это очень круто, прям после native Vuejs, бомба. Есть вопросы, а вот есть бд на mysql, то понадобиться писать бэк, чтобы получить из бд данные, или nuxt уже это умеет? На нем можно сделать приложение, я правильно понял? За видео и курс, спасибо большое.
Скажите пожалуйста, для чего служит выбираемый при установке server side фреймворк? Для написания АПИ, или он как-то участвует в рендере? Можно ли с none в продакшен? Где об этом почитать? Спасибо!
Фреймворк отвечает за серверный рендеринг
а есть какая-то причина, почему нам нужно было создать getter users чтобы получить данные, а не брать на прямую users из state? Спасибо!
На практике не очень рекомендую использовать стейт, тк в теории можно ошибок наловить с этим
Но в целом подобное возможно
@@VladilenMinin геттеры кешируются потому что
@@VladilenMinin Нашел статью как раз про это: codeburst.io/vuex-getters-are-great-but-dont-overuse-them-9c946689b414
@@ДмитрийИванов-г1н6в Так и state не вычисляется, а как бы статичен. Поэтому зачем его кэшировать?
Если вы используете стейт напрямую - user: state => state.user, то проще сразу получить стейт в компоненте через mapState, если нужно значение на основе двух стейтов, или стейт с преобразование (filter, reduce), то можно использовать геттер, по сути геттер это computed.. также в него можно передавать агрументы
спасибо за видео, наконец-то кто-то по простому объяснил nuxt ssr)) случайно не практикуешь nuxt+ts ?
Не понимаю, почему в network появляется аякс запрос, если клиенты уже есть в исходном коде страницы? Или аякс раньше происходит, чем страница возвращается?
Подробней почитай про универсальные приложения. Где то они называются изоморфные
Спасибо понял что нужно получать данные в fetch через context. В остальном разобрался пока делал проект.
Хотя есть вопрос если меню не внутри тега nuxt то оно уже не будет генерироваться на сервере? Как тогда header footer sidebar сгенерировать на сервере?
Как же так? Если все так удобно с NUXT - зачем тогда на обычном VUE пишут?
Лайкос!!!
Спасибо. А как выполняется реализация django на беке + nuxt ssr на фронте?
идеально. единственное не понял как локализовать рутинг для интернациональных сайтов, т.е. мы сделали страницу about но в адресной строке надо ее видеть по разному в зависимости от выбранного языка.
Владилен, спасибо за крутой обучающий ролик. Когда начал писать свой первый сайт с использованием Vue для фронта и Laravel для бека столкнулся с проблемой генерации статического кода для SEO. Отложил,а тут как раз этот вектор, по которому можно двигаться. Правильно ли понимаю, что если бэкенд на Laravel (PHP), то в качестве веб-сервера для Лары делаем nginx, а для статической генерации html кода поднимаем nodeJS + Nuxt ? Или какой курс посмотреть? Не ради рекламы, но смотрю ресурс ларакастс, собственно там автор очень доходчиво излагает приемы разработки Vue + Laravel, собственно оттуда начал делать попытки разработки. Но тема SSR, когда бэк не на ноде, а на пхп, не раскрыта.
Впервые слышу про тег main, загуглил "Элемент предназначен для основного содержимого документа. Содержимое должно быть уникальным и не включать типовые блоки вроде шапки сайта, подвала, навигации, боковой панели, формы поиска и т. п" ... По-моему тут противоречие с уроком, так как мы навигацию вставили в тег main.
господи... давай еще про верстку поговорим
Cпасибо! Может есть у вас ссылка на инфо как тут делать кастомные модули? )
Класс!!!!!
Спасибо за видео
Спасибо!
Есть ли видео где ты говориш про создание своего /api? Взаимодействие через json...
В описании к ролику ссылка на курс с накстом
Так и не удалось внедрить интерсептор в _axios_ . По документации есть у _nuxtjs/axios_ параметр _requestInterceptor_ , который как раз для этого служит, но у меня он почему-то не "заводится":
_nuxt.config.js_
....
axios: {
baseURL: "project/api/v2/",
requestInterceptor(config, { store }) {
config.headers.common["X-Application-Id"] = "30";
return config;
}
},
...
Заголовок _X-Application-Id_ не попадает в каждый запрос, как я рассчитывал.
Может, я что-то не так делаю?
Знаю, есть более корявый способ - написать свой плагин. Но хочется понять, почему не работает тот, что из коробки.
github.com/vladilenm/nuxt-blog/blob/master/plugins/axios.js этот пример решит твой вопрос)
Вопрос отпал сам собой, когда изучил чейнчлог и исходники. Разработчики убрали эту фичу в 5 версии, и рекомендуют именно делать плагины. Странный ход, как по мне :(
stackoverflow.com/questions/50551158/how-to-attach-axios-axios-interceptor-to-nuxt-globally
Вот решение вопроса с помощью плагина.
@@mikurrey416 Я видимо не застал те времена, когда было через конфиг
Я прислал пример кода из реального приложения и там как видишь и есть решение через плагин)
17:19 поправим отступы... какая комбинация кнопок???
выделение части кода мышкой иTAB
Ставишь в начало виделяемого блока курсор, скролишь в низ, до конечно части выделения. После зажимая шифт, кликаешь на участок, до которого нужно выделение. После, как сказали выше, таб. Но есть плагины, которые делают автоматически это. У jetbrains это из коробки - Ctrl+l или ctrl+shift+l
Блин, а у меня продолжает вылазит ошибка client.js?06a0:97 TypeError: Cannot read property 'length' of undefined
Хотя я для чистоты скопировал ваш код из репы. В интернете люди пишут что это связано с асинком. Так и не смог пофиксить(
капец, название файла было user.js а не users и когда я указывал модуль users он не понимал че это и писал что undefined) извините
Спасибо за видео! Есть вопрос. Как настроить nginx, чтобы он отдавал правильно статику и страницы от NuxtJS в режиме HTTPS?
Проксировать, в google запрос Nginx + NuxtJS
@@L0zung первым делом это и сделал. Работает только при прослушке nginx 80 порта.
@@pilezkiy Nginx без разницы какой порт слушать. Быстрей всего у вас чего-то не хватает в самой сборке Nginx. Например модуля ngx_http_proxy_module. Возможно вы просто что-то делаете не так.
@@L0zung я сделал фронт просто на статике через vue-cli, и бэк на nodejs+express - https работает. А вот nuxt че-то не взлетел. Ну видимо не моё это 😁
Не знаете в чем проблема? создал папку и в нее вложил _id.vue и появляется проблема - Invalid component name: "_id". Component names should conform to valid custom element name in html5 specification.
Добавьте поле name в компонент, например:
export default {
name: 'page-name'
}
и перезагрузите билд
Видео отличное - спасибо за него.
Не совсем очевидно по поводу state.
На 54:28 говориться о том, что state должна быть функцией (чтобы избежать мутаций):
export const state = () => ({
users: []
}
и по умолчанию users - это пустой массив.
В другом вашем видео про Vuex (ua-cam.com/video/c2SK1IlmYL8/v-deo.html) в похожем случае функция не используется.
Объясните, пожалуйста:
1) каким образом в ваших примерах она защищает от мутаций
2) как getter, который внутри себя вызывает users получает не пустой массив (который и должен возвращаться этой функцией), а текущее значение
Гайд хороший но у меня структура проекта на половину другая, видимо быстро все меняется так
Thanks a lot :)
Спасибо за ролик, ещё бы ссылочку в описании на плагины для vs code, тоже хочу такие иконки для папок.
Классный фреймворк, только жаль, что ты не объяснил, как осуществляется синхронизация стора на клиенте и на сервере (а ведь это важно для того, чтобы авторизация работала, я уверен, что Nuxt как-то должен поддерживать принудительный пуш данных в стор на сервере по требованию, когда на клиенте что-то произошло типа логина или разлогина, либо смены языка, темы и так далее). Короче, про работу с сессиями хочется больше узнать :)
спасибо!
Очень доступно, спасибо! А можете показать, как реализовать в nuxt размещение метатегов на каждой странице для SEO?
интересно, а как с этой технолгией сделать магазины, к примеру магазин кейсов к игре CS:GO(чисто для вашего уровня, просто если дам легче скорее всего вы обидитесь). Обожаю ваши нарезки, обучился к node.js, vue.js, react.js(знания успешно утеряны), всё было предельно ясно, так же данное видео про nuxt.js классная, смотрю уже в пятый раз, до этого чисто из интереса поглядывал, но сейчас действительно нужно, комментарий закидываю заранее перед видео, я уже уверен о лёгкости материала, который преподнесёте вы.
Отличное видео! Узнал много нового, хотя пересмотрел по этой теме кучу видео.
Возник вопрос:
Смутил тот момент, когда происходит проверка и наполнение стора пользователями, потому что эта проверка сделана на самой странице. Если страниц, отображающих пользователей, будет несколько, то получается этот кусок кода будет дублироваться. Возможна ли эта проверка и наполнение в самом сторе, чтобы логика была в одном месте или где ее лучше разместить?