Мастерская разработчика
Мастерская разработчика
  • Видео 10
  • Просмотров 35 327
Около web'a #1. Максим Ульянов. Про Api gw, ab тесты, feature toggle
Этим видео я запускаю новый формат для этого канала.
Около web'а формат, в котором я обсуждаю какие-либо проблемы и задачи, связанные с веб технологиями. Чаще всего это будут стримы и их записи без обработки.
В данной серии мы обсудим api gateway, feature toggle сервис и ab тесты. У нас на стриме Максим Ульянов!
⚡ Ссылки ⚡
Мой канал в телеграмме - t.me/developers_workshop
Канал Максима в телеге - t.me/ulyanov_life
Просмотров: 370

Видео

🙅‍♂️🙆‍♀️ VUE 3 Ролевая модель, ограничения доступов
Просмотров 11 тыс.2 года назад
Видео о том, как организовать ролевую модель в веб приложении, в частности на фронте. Как настроить доступ по ролям или возможностям. Как прикрутить это красиво и удобно в spa приложения на VUE 3 ⚡ Ссылки ⚡ Мой канал в телеграмме - t.me/developers_workshop Видео про supabase - ruclips.net/video/g5dUVbCd90Y/видео.html Github - gitlab.com/Sticker0ne/vue-scope-access
🔍 VUE 3 публикуем компоненты в NPM
Просмотров 1,6 тыс.2 года назад
Видео о том, как подготовить проект и опубликовать npm пакет с компонентами, написанными для vue 3 Про конкурс: скоро на youtube канале будет 100 подписчиков, и по этому я решил устроить розыгрыш. Но розыгрыш будет происходить среди подписчиков моего телеграм канала t.me/developers_workshop , да вот такой я странный:) Для того, чтобы принять участие достаточно подписаться в телеге, для того, чт...
🔍 VUE 3 + бесплатный хостинг + бекенд + сокеты = ♥️
Просмотров 2,3 тыс.2 года назад
В этом видео я рассказываю про разработку statefull SPA приложения на Vue 3 с бесплатным хостингом на github pages и netlify, с бесплатным облачным бекендом на supabase и синхронизацией через websocket ⚡ Ссылки ⚡ Мой канал в телеграмме - t.me/developers_workshop Видео про шаблоны страниц - ruclips.net/video/C5VIL2yyzVQ/видео.html Репа - github.com/sticker0ne/vue3-click-counter Github pages host...
🐞🔍 VUE 3 hacks to improve debug
Просмотров 1,3 тыс.2 года назад
Видео посвящено лайфхакам для упрощения отладки во Vue 3 ⌛ Таймкоды ⌛ 0:00 - Вступление 0:12 - Доступ до $console в шаблонах 1:46 - Доступ до роутера в консоли браузера 3:11 - Composable логгер lifecycle хуков 4:00 - Время подписаться на канал (и телеграм), нажать на колокольчик ⚡ Ссылки ⚡ Мой канал в телеграмме - t.me/developers_workshop Репа - gitlab.com/Sticker0ne/vue-spinner/-/tree/debug-hacks
VUE3 Лучший аккордеон🪗
Просмотров 3 тыс.2 года назад
Видео посвящено проектированию и разработке компонента аккордеона с анимацией, SSR, отсутствием зависимостей во Vue 3 ⌛ Таймкоды ⌛ 0:00 - Про аккордион 1:09 - Заставка 1:14 - Ссылки на гитхаб и гитхаб пейджс 1:52 - State flow and v-model control presentation 3:51 - State flow and v-model control code 5:42 - Animation presentation 8:23 - Animation code 10:53 - SSR and reactivity presentation 13:...
Vue3 крутейший лоадер/спиннер
Просмотров 3,2 тыс.2 года назад
Видео посвящено анализу и разработке компонента лоадера/спиннера во Vue3 ⌛ Таймкоды ⌛ 0:00 - Вступление 0:30 - Для чего будем использовать? 0:49 - Чего хотим от компонента? 1:38 - Базовая реализация 2:44 - Фулскрин отображение 4:27 - Телепортация 8:04 - Перехват и удержание фокуса 12:40 - Выводы ⚡ Ссылки ⚡ Презентация - slides.com/sticker0ne/vue-spinner Репа гитлаба - gitlab.com/Sticker0ne/vue-...
Правильные page layouts во Vue
Просмотров 10 тыс.2 года назад
Видео посвящено анализу и разработке системы page layouts во Vue 3 ⌛ Таймкоды ⌛ 0:00 - Введение 0:10 - Обзор видео 1:01 - Что такое шаблоны? 2:17 - Требования к системе шаблонов 3:41 - ПРОСТО СЛОТЫ обзор подхода 4:19 - ПРОСТО СЛОТЫ реализация подхода 4:58 - ПРОСТО СЛОТЫ демонстрация, проблемы 6:18 - ВОТЧЕРЫ, КОМПЬЮТЕДЫ обзор подхода 8:00 - ВОТЧЕРЫ, КОМПЬЮТЕДЫ реализация подхода 9:12 - ВОТЧЕРЫ, ...

Комментарии

  • @SergiuBurduja-y1l
    @SergiuBurduja-y1l 25 дней назад

    Как здорово, что вы живой, я думал что-то случилось. Вы замечательный преподователь, желаю вам успехов и по-больше баловать нас видосами, у вас талант.

    • @dev-workshop
      @dev-workshop 25 дней назад

      Спасибо большое, мне очень приятно! С видосами напряженка, да :) Иногда постики в телеграм канал попадают, по ним проще определять, жив я или нет :)

  • @lokerfray6147
    @lokerfray6147 Месяц назад

    якби українською... но круто дякую тобі

    • @dev-workshop
      @dev-workshop Месяц назад

      Если бы я знал... Спасибо и тебе за комментарий!

  • @RomanDawydkin
    @RomanDawydkin Месяц назад

    Вместо объекта со значениями true надо использовать Set

    • @dev-workshop
      @dev-workshop Месяц назад

      @@RomanDawydkin до определенной версии у вью были проблемы с реактивностью в сетах

  • @r35p3ct00
    @r35p3ct00 2 месяца назад

    Пора выпускать ролик 😁

  • @flipper-limon
    @flipper-limon 3 месяца назад

    Написал комментарий) где видео с кастомной директивоЙ?

  • @eg0ist_665
    @eg0ist_665 3 месяца назад

    такое себе объяснять просто написанный код - думал с нуля будем делать поэтапно смотреть что получается

    • @dev-workshop
      @dev-workshop 3 месяца назад

      Ну во первых этот код написал я Во вторых это обзор на нпм пакет в третьих очень долго делать поэтамно, такие штуки, обычно на стримах в четвертых - сделай лучше, я верю, что у тебя получится так, как хочешь ты

    • @eg0ist_665
      @eg0ist_665 3 месяца назад

      @@dev-workshop есть ребята которые crm создают и видосы по 7 часов )) а тут мы говорим про компонент аккордеона ) Мне было интересно, как ты сделаешь по шагам, чтобы видеть всю картину, но ты поленился)

    • @dev-workshop
      @dev-workshop 3 месяца назад

      @@eg0ist_665 А давай теперь посмотрим, пользуется ли кто-то этими crm? а пользуется ли кто-то библиотекой компонента? Если бы я поленился, то ни видео ни компонента не существовало бы

    • @eg0ist_665
      @eg0ist_665 3 месяца назад

      @@dev-workshop дело не в этом вообще, я тебе высказал свое мнение о том, что показывать просто готовый результат и его комментировать не интересно смотреть, особенно новичкам. Кому интересно пусть смотрят)

    • @dev-workshop
      @dev-workshop 3 месяца назад

      ​@@eg0ist_665 Спасибо за твое мнение

  • @ВладимирОков-и1с
    @ВладимирОков-и1с 4 месяца назад

    Слишком всё усложнено. Можно сделать телепорт спиннера сразу в корень body и он будет поверх всего контента. Далее назначаем переменную: let isSpinner = ref(false); - тип можно не указывать, т.к. явно задано начальное значение. Таким образом, в исходном состоянии спиннер не виден. <teleport to="body"> <AppSpinner v-if="isSpinner" /> </teleport> Следующий шаг. Меняем значение isSpinner в функции получающей данные. const getSomeData = () => { // показываем спиннер isSpinner.value = true; try { // Далее код получающий и обрабатывающий некие данные с сервера или из стора } catch (err) { console.log(err) } finally { // теперь убираем спиннер isSpinner.value = false; } } Вызов компонента спиннера можно разместить в основном HTML-файле. А чтобы доступ к isSpinner был из любого компонента или лейаута, можно добавить isSpinner в store. Тогда не нужно будет усложнять код провайдами и инжектами. Можно сделать точку назначения переменной <teleport :to="destination"> и в переменной destination указывать, в корень какого элемента хотите переместить спиннер.

  • @ESTechnonet
    @ESTechnonet 5 месяцев назад

    Самый имбовый способ разделить роли - разные url для разных ролей. Все остальное (в том числе то, о чем говорит автор) для очень простых приложух.

    • @dev-workshop
      @dev-workshop 5 месяцев назад

      Ну вот здесь я бы поспорил) Возьмем TeamCity, явно не очень простое приложение или гитлаб В зависимости от разных доступов на одной странице в интерфейсе, даже в одной менюшке есть разный набор кнопок

    • @ESTechnonet
      @ESTechnonet 5 месяцев назад

      @@dev-workshop я тут не прав в том смысле что слово "простые" тут не подходит. Ща попробую сформулировать точнее: если у вас интерфейс админа и юзера отличается целиком а не только лишь парой кнопок и менюшкой, то имеет смысл опереться о url ролевую модель. Это не подойдет лишь в случае если религия не позволяет наблюдать "/userRole/dashboard" в адресной строке. В остальном композиция компонент позволяет прекрасно переиспользовать код и не париться по поводу прав. Я не говорю что та модель которую вы рассмотрели не жизнеспособна, нет, она прекрасно работает но только в ряде случаев.

    • @dev-workshop
      @dev-workshop 5 месяцев назад

      @@ESTechnonet Дополнив текущую реализацию можно сделать ограничения и по урлам, такми образом будет комбинированная система для накста очень удобно через pageMeta ограничивать доступы и мидлваркой их отлавливать

  • @soulwind7577
    @soulwind7577 5 месяцев назад

    Я мб не внимательно смотрел, а чем не устраивает стандартная реализация vue-router ? ``` { path: '/', component: LayoutDefault, name: 'Layout Default', children: [ { path: '/', component: ViewHome, name: 'Home' }, { path: '/example/:id', component: ViewExample, name: 'Example' }, ] }, ```

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

    Вопрос, при такой системе лейаутов, если обновлять страницу то прокрутка страницы возвращается в самое начало. В других проектах, если ты прокрутил допустим до середины, то после F5 страница туда же возвратится. Как можно исправить?

    • @dev-workshop
      @dev-workshop 6 месяцев назад

      @@mster_r воспользоваться другими системами лейаутов, про которые вы написали?)

    • @mster_r
      @mster_r 5 месяцев назад

      @@dev-workshop но мне нравится эта система, да и нет других на примете) Я имел ввиду обычное поведение браузера, под другими проектами. Просто неожиданное неудобство такое тут возникло, думал может известно решение. Или может подскажешь как бы решил, в какую сторону подумать?

    • @mster_r
      @mster_r 5 месяцев назад

      @@dev-workshop А может вообще я сам где напортачил, и проблема не от лейаутов. Встречалось ли тебе такое?

    • @dev-workshop
      @dev-workshop 5 месяцев назад

      @@mster_r все очень индивидуально, нужно смотреть проект и его код) всегда можно что-нибудь придумать, например хранить в sessionStorage последнее значение позиции скролла и потом при маунте заставлять браузер скролиться на эту позицию)

    • @mster_r
      @mster_r 5 месяцев назад

      @@dev-workshop понял, спасибо, тоже думал в эту сторону. Для меня показательно уже то, что с проблемой скроллинга столкнулся только я)

  • @user-hruser
    @user-hruser 7 месяцев назад

    на сколько обоснован динамичесикй импорт? прочему не обычный?

    • @dev-workshop
      @dev-workshop 7 месяцев назад

      на столько же, на сколько обоснован code splitting

  • @olegvoron6847
    @olegvoron6847 7 месяцев назад

    Что то всёравно плохо работает этот метод, dts у меня так и не собрался. Видимо, придётся отложить напотом эту задачку.

  • @grefrewhtr
    @grefrewhtr 7 месяцев назад

    Сергей, большое спасибо вам за данное видео, оно прекрасно! Показана проблема, показаны разные варианты решения, их плюсы и минусы, разобрана реализация каждого подхода, идеально! Жаль, что вы делаете так мало контента, у вас определено талант!

    • @dev-workshop
      @dev-workshop 7 месяцев назад

      Большое спасибо, мне очень приятно!) Проблемы с распределением времени, нужны помощники в монтаже)

  • @svet0v
    @svet0v 7 месяцев назад

    Интересное видео, спасибо

  • @benrise4775
    @benrise4775 9 месяцев назад

    Шикарно!! Спасибо

  • @fluffyartdev
    @fluffyartdev 9 месяцев назад

    Видео полезное, для новичком будет очень здорово, но есть пара нюансов: 1. Глобальный скоуп работает только в рамках шаблона. В скрипте все равно придется доставать хуком или еще как-либо. 2. В данном случае, хоть сама задача авторизации и является глобальной, все таки стоит еще задуматься о том, чтобы сделать хуки импортить от туда хук + енам. Тем более, если делать директиву или компонент обертку, то это уже не выглядит таким накладным)

    • @dev-workshop
      @dev-workshop 9 месяцев назад

      1. Полностью согласен, это была распространенная практика со 2 вью, в третьем она почти забыта 2. Такой задачи не стояло, видео и так объемное)

  • @VolodymyrSirenko
    @VolodymyrSirenko 9 месяцев назад

    Информативные видео для новичков! Спасибо!

    • @dev-workshop
      @dev-workshop 9 месяцев назад

      Пожалуйста) Подписывайся на канал в телеге)

  • @adiletomurbekov9300
    @adiletomurbekov9300 10 месяцев назад

    Здравствуйте, можете сделать пожалуйста видео про авторизацию.

    • @dev-workshop
      @dev-workshop 10 месяцев назад

      Здравствуйте, может быть ближе к лету, если найду редактора для видео

  • @Vladislav1449
    @Vladislav1449 10 месяцев назад

    Привет! Очень жаль, что видео перестали выходить довольно продолжительное время😢 Надеюсь, еще появится тут новый, полезный контент!❤

    • @dev-workshop
      @dev-workshop 10 месяцев назад

      Привет! Может быть если я найду того, кто будет монтировать видосы, тогда наладится регулярность ))

  • @kalyszhek5296
    @kalyszhek5296 11 месяцев назад

    Ты мне открыл глаза. 😳🥹 Но я нифига не понял, но к этому иду. Я начинающий. 😅 Пойду посмотрю все видео. Надеюсь есть где пишешь все это..

  • @Dikodance
    @Dikodance 11 месяцев назад

    Эх, где это видео было раньше. Столько времени убил чтоб самому допереть до этого)) спасибо. Ещё удобно добавить группы скоупов, особенно если из много и юзеры сами будут рулить доступами

    • @dev-workshop
      @dev-workshop 11 месяцев назад

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

    • @Dikodance
      @Dikodance 11 месяцев назад

      @@dev-workshop думаю все зависит от сценария. Я пилю щас crud saas и там например у каждого аккаунта рожаются роли и дефолтные пермишены. и если взять скажем роль админа который имеет доступ везде то там без групп получится что надо назначать простыню доступов на пару экранов) а если таких ролей будет несколько то все резко станет сложно) а так я завел группы и если юзер может все с crud сущностью то просто вешаю на нее группу. но в конце концов с бека оно конечно выпрямляется все и фронту прилетают только пермишены.

    • @dev-workshop
      @dev-workshop 11 месяцев назад

      @@Dikodance интересное решение. Да, я скорее к тому, что с бека прилетал один тип сущностей, по которому определяются доступы. Для единообразия

  • @antonnevskiy3027
    @antonnevskiy3027 Год назад

    Полезное видео, спасибо! Жаль, не так много контента на канале

    • @dev-workshop
      @dev-workshop Год назад

      Привет! Спасибо, в связи с работой сложно выделить время на видосики

  • @kumb61
    @kumb61 Год назад

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

    • @dev-workshop
      @dev-workshop Год назад

      Что именно тебе не нравится в данной реализации?

  • @БехрузАбдувалиев-н5и

    🔥🔥🔥

  • @izzy7541
    @izzy7541 Год назад

    А нужна ли вообще директива для доступов? По моему получится велосипед в виде кастомного v-if

    • @dev-workshop
      @dev-workshop Год назад

      Скорее философский вопрос) Да, это будет кастомный v-if. Да, можно использовать просто v-if. Но идея директивы для доступов разделить условное отображение связанное с бизнес логикой и условное отображение связанное с ролевыми доступами Плюс по такой директиве легко прочитать доступы прям в шаблоне, тогда как условия v-if часто заворачиваются в компьютед свойства, для которых нужно лезть в код

  • @Screxyy
    @Screxyy Год назад

    Посмотрев это видео, понял сколько мне еще учиться xDD

  • @stanislav_ovv
    @stanislav_ovv Год назад

    А если допустим это ui-kit в котором сборник компонентов, то как их экспортировать? И есть такие случаи когда компоненты сборные, состоящие из нескольких из этой же библиотеки.

    • @dev-workshop
      @dev-workshop Год назад

      Можно докрутить файлик buildLibrary.ts Для публикации библиотеки компонентов я бы пользовался этим видео в ознакомительных целях, и докручивал бы под себя

    • @stanislav_ovv
      @stanislav_ovv Год назад

      @@dev-workshopтам просто когда экспортируем компонент в котором есть зависимости от других компонентов. То при импорте в другом проекте такого компонента вылезает предупреждение ('[Vue warn]: resolveComponent can only be used in render() or setup().') и получается что сборный компонент нормально не отрабатывает.

    • @dev-workshop
      @dev-workshop Год назад

      @@stanislav_ovv очевидно, что для компонентов с зависимостями нужны каки-то изменения

    • @stanislav_ovv
      @stanislav_ovv Год назад

      @@dev-workshop Проблема решилась, что в том проекте где импортировали ui-kit в конфигурации вебпака надо было прописать алиас, resolve:{ alias:{ vue: path.resolve('./node_modules/vue') } }

    • @stanislav_ovv
      @stanislav_ovv Год назад

      @@dev-workshop А так сделали первую версию UI-KIT по тому же принципу, что описан в видео, только на JS. Следующий шаг наверно будет Storybook и TS

  • @user-quasarDiO
    @user-quasarDiO Год назад

    Крутая тема , давай продолжение , видео понравилось !!!

  • @shahid1508
    @shahid1508 Год назад

    Динамические группы/роли/скоупы то еще зло на деле, хоть и звучит красиво и как бы логично))

    • @dev-workshop
      @dev-workshop Год назад

      Я согласен, но иногда от этого никуда не уйти)

  • @artemijeka
    @artemijeka Год назад

    Спасибо автору! Круто когда люди делятся открытиями с обществом) Мне интересна тема для следующего видео) если конечно вопрос стоящий: насколько успешно поисковик считывает контент с SPA приложений и как лучше подавать контент для поисковика в vuejs?

    • @dev-workshop
      @dev-workshop Год назад

      Привет! Спасибо!) Практически не на сколько. Хоть все и говорят, что вот вот индексаторы научатся в спа - это все не правда Все, что должно попасть в индексацию должно быть ssr

  • @grigoriy-iceicebaby2985
    @grigoriy-iceicebaby2985 Год назад

    Классный контент, помогает, продолжение этой части с тайпскриптом нужно!

  • @HalauLilau
    @HalauLilau Год назад

    С этим лайоут системой столкнулся на такое когда меняется хэш (window.location.hash) загружает снова лейоут и страница фризится

    • @dev-workshop
      @dev-workshop Год назад

      Надо смотреть, что в этот момент происходит с роутером вьюшным

    • @HalauLilau
      @HalauLilau Год назад

      @@dev-workshop Страница состоит из двух блоков ЛЕВАЯ часть просто список линков по клику вызывается функция которая ищет в DOM element(ПРАВАЯ часть) если находит делает scroll ПРАВУЮ часть и потом добавляет в адрес localtion.hash = '#somehash' (пробывал и $router.push({hash:''})

  • @olegycholegych1920
    @olegycholegych1920 Год назад

    ты лучший ❤

  • @Эдуард-п2у
    @Эдуард-п2у Год назад

    Скажи пожалуйста, а во "Vue" отладки сродни той что есть для js не существует? В случае с js в браузере зашел в devtools -> источники -> выбрал файл и вперед, можно по шагам смотреть как где чего работает. Как в случае с vue такие вещи смотреть? Просмотра состояния переменных vue через Vue Devtools несколько недостаточно как по мне..

    • @dev-workshop
      @dev-workshop Год назад

      Эта отладка никуда и не ушла) пропиши в нужном тебе vue файлике "debugger;" и открой devtools в хроме и будет тебе счастье

  • @АртемАртеменконезабывайвыходит

    сделаешь подробнее уроки с vue laravel по этой теме?

    • @dev-workshop
      @dev-workshop Год назад

      Привет! Я не особо умею в PHP :( по этому скорее нет. Плюч видео сейчас временно не выходят

  • @sakensatenov
    @sakensatenov Год назад

    Видос очень классный и суперский! Хотелось бы видеть такое же видео, только про модалок (как в видео). Как по мне они очень нужны в любом проекте, и важно чтобы была такая же крутая реализация модалок, которую можно использовать в vue 3 или vue 2

    • @dev-workshop
      @dev-workshop Год назад

      с модалками интересно, да) Рад что понравилось!) Сейчас есть некоторые сложности со временем, но я добавлю в список)

  • @mikhailwalle9556
    @mikhailwalle9556 Год назад

    Привет! Пытаюсь применить указанный 3-ий способ с воем проекте. <Component :is="route.meta.layoutComponent"> <slot /> </Component> Тут TS ругается на "route.meta.layoutComponent": Type VueElement | undefined is not assignable to type string | ComponentDefinition Буду благодарен за комментарий.)

    • @dev-workshop
      @dev-workshop Год назад

      Привет! А ты не забыл? declare module "vue-router" { interface RouteMeta { layout?: AppLayoutsEnum; layoutComponent?: VueElement; } }

  • @albertsaitov7463
    @albertsaitov7463 Год назад

    Топич, спасибо большое за ролик

    • @dev-workshop
      @dev-workshop Год назад

      Рад, что понравилось)

  • @grantorino3465
    @grantorino3465 Год назад

    Огонь!

    • @dev-workshop
      @dev-workshop Год назад

      Рад, что понравилось)

  • @HalauLilau
    @HalauLilau Год назад

    Есть лайот шапка внутри инпут с выпадающию меню и у каждой страницы выпадающию меню свой. Как реализовать такое отношение?

    • @dev-workshop
      @dev-workshop Год назад

      либо через внешний стор, либо сделать композабл с замыканием состояния и на каждой странице обновлять данные для выпадашки

    • @HalauLilau
      @HalauLilau Год назад

      @@dev-workshop замыкание состояние страницы?

    • @dev-workshop
      @dev-workshop Год назад

      ​@@HalauLilau нет, пишешь замыкание внутри которого используешь, грубый пример const dropdownData = useRef(); export function useLayoutDropdown() { function updateData(newValue) { dropdownData.value = newValue; } return reactive( { dropdownData, updateData }) } затем в лейауте вызываешь useLayoutDropdown и используешь из него данные и на страницы используешь useLayoutDropdown и обновляешь данные. Но это очень грубый пример, здесь получается синглтон, который нельзя использовать, если у тебя ssr Но никто не мешает создать такое замыкание в контексте запроса

    • @dev-workshop
      @dev-workshop Год назад

      @@HalauLilau еще можно рулить данными для выпадашки на уровне роутера

    • @HalauLilau
      @HalauLilau Год назад

      @@dev-workshop у меня ssr нет. Оказывается не только данные и иинпуты и селекты разные. Например страница клиент там в дропдауне фильтр поле дата, город, номер. А проектах другие поля в дродауне

  • @K1appy
    @K1appy Год назад

    офигенный контент, пожалуйста не забрасывай канал, очень полезные видео, а не просто пересказ доков или объяснения как через v-for список вывести !

    • @dev-workshop
      @dev-workshop Год назад

      Привет! Спасибо за отклик! Я постараюсь, но со временем очень большая напряженка

  • @zergzerg4844
    @zergzerg4844 Год назад

    Не пойму к чему такие сложности. Можно же проще написать и принцип mount/unmount лайота с компонентами такой же будет: в App.vue <router-view /> в router.js (все компоненты пихаем в children нужного layout) const routes = [ { path: '/', name: 'baselayout', component: BaseLayout, meta:{ layout: BaseLayout }, children: [ { path: '/page1/', name: 'page1', component: () => import('@/views/Page1.vue') }, { path: '/page2', name: 'page2', component: () => import('@/views/Page2.vue') }, ] }, { path: '/guard', name: 'guard', component: () => import('@/views/guard/GuardIndex.vue'), meta:{ layout: AdminLayout }, children: [ { path: '/page3.', name: 'page3', component: () => import('@/views/Page2.vue') }, ] }, ]; в BaseLayout.vue (transition конечно здесь лишний. просто допом оставил) <Header /> <router-view v-slot="{Component, route}"> <transition name="slide" mode="out-in" > <keep-alive> <component :is="Component" :key="route.path" /> </keep-alive> </transition> </router-view> <Footer /> И все работает и при хождении по дочерним вьюшкам layout не размонтируется каждый раз, а только тогда пока перехожу на дочернюю вьюшку другого layout. Глюков с переходами при таком подходе пока не увидел. Автор, поправьте, если что-то не так с таким подходом, так как не очень хорошо шарю за vue. Спасибо за видео

  • @jozefmaslovsky9270
    @jozefmaslovsky9270 Год назад

    Интересненько!!! Спасибо, тебе, добрый человек!

    • @dev-workshop
      @dev-workshop Год назад

      Рад, что понравилось!

  • @technews2324
    @technews2324 Год назад

    Спасибо!

  • @АлександрСударев-ж1г

    Спасибо! Очень круто!!!!

    • @dev-workshop
      @dev-workshop Год назад

      Рад, что понравилось)

  • @sakensatenov
    @sakensatenov Год назад

    Вопрос (оффтоп): у меня есть layout (шапка и футер) В котором есть компонент (страница с данными). В шапке тоже есть свои данные, все прекрасно работает. Но я хочу передать некоторые данные из чайлд компонента в layout, дабы отобразить инфу про страницу в layout. Не хочу лезть в vuex. Как можно передать данные из чайлда в layout?

    • @dev-workshop
      @dev-workshop Год назад

      Это плохая практика, лучше делать это каким-то отдельным инструментом. Но как вариант, можно воспользоваться либо ивентбасом Либо сделать синглтон композобл и воспользоваться им в шапке и на странице. Но это плохая практика, столкнетесь со многими проблемами :)

    • @sakensatenov
      @sakensatenov Год назад

      @@dev-workshop ок спасибо

  • @DenisB-d5f
    @DenisB-d5f Год назад

    зря перестал видосы выпускать реально кайфовые

    • @dev-workshop
      @dev-workshop Год назад

      Спасибо! Скоро будут еще

  • @grantorino3465
    @grantorino3465 Год назад

    а почему в последнем подходе сперва маунтится шаблон страницы, а потом после него шаблон леяута, если страница - это дочерний компонент леяута?

    • @dev-workshop
      @dev-workshop Год назад

      Потому что сначала маунтятся самые глубокие дети и потом всплывает наверх) medium.com/@brockreece/vue-parent-and-child-lifecycle-hooks-5d6236bd561f

  • @sezarik1663
    @sezarik1663 Год назад

    Привет. Классный контент пилишь). А можешь про модульную архитектуру запилить видос? Заранее пасяб)

    • @dev-workshop
      @dev-workshop Год назад

      Привет! Спасибо! А что ты имеешь в виду под модульной архитекторой? Разделение приложения на модули?

    • @sezarik1663
      @sezarik1663 Год назад

      @@dev-workshop ага

  • @amir18n
    @amir18n Год назад

    Спасибо! полезные знания