Правильные page layouts во Vue 

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

Очень приятно, спасибо!)

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

Очень приятно, спасибо!

Пожалуйста:) Отпиши как зайдет)

Спасибо, большое! Очень приятно читать такие комментарии!

Спасибо, за комментарий!) Подписывайся на телеграм канал, там переодически публикуется что-нибудь интересное по теме :) Я стараюсь выпускать видео чаще, но пока что получается не очень

@@dev-workshop Уже подписался)

Разбор аккордеона, так и запишем

Спасибо, очень рад!)

Пожалуйста)

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

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

Рад, что видео понравилось!) По твоей формулировке, мне кажется, это называется security middleware или authorization guard, что-то подобное. Вот здесь есть абстрактный пример (третий сверху) router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards

@@dev-workshop по факту все оказалось проще, чем говорили. Layout все таки один, а меню, хедер и футер генерируют разное содержимое через store сами, я сделал по принципу как в примере из ссылки, только вешал на нужные роуты и через meta задавал массив ролей разрешённых.

Спасибо:)

Вариантов много, от кастомных мидлварок, до обратчиков в маунте странички. Но мне кажется, самый правильный вот этот router.vuejs.org/guide/advanced/scroll-behavior.html

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

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

Привет! Алиасы резолвятся веб паком или витом, в мидлварках не резолвятся, не копал почему. Так же в nuxt.config, например, не резолвятся. Нужно копат

С плагином сложно, так как много специфики на каждом проекте, я лишь продемонстрировал общую идею. В видео есть ссылка на гитлаб, там рабочий проект его можно склонировать к себе и поковырять. Что именно не получается?

Так работают мидлварки, роутер сам передает роут в каждую мидлварку и ожидает каких-то манипуляций с ним и вызывает мидлварки по цепочке :) А еще функция useRoute может быть вызвана только топ левел в файлах компонентов

@@dev-workshop Спасибо! :)

@@user-nc6gt7gb1x Пожалуйста :)

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

Привет! А что ты подразумеваешь под дефолтным?

@@dev-workshop когда в роутах указываешь лейоут и его childrens; ``` { path: "/", name: "ALayout", component: () => import("../layouts/A/index.vue"), children: [ { path: "/one", name: "OnePage", component: () => import(../views/OnePage.vue"), }, { path: "/two", name: "OnePage", component: () => import(../views/TwoPage.vue"), }, ] }, { path: "/", name: "BLayout", component: () => import("../layouts/B/index.vue"), children: [ { path: "/three", name: "ThreePage", component: () => import(../views/ThreePage.vue"), }, { path: "/four", name: "FourPage", component: () => import(../views/FourPage.vue"), }, ] } ```

@@user-vb6xh6yj4h В первые сталкиваюсь с таким подходом, если честно :) Так как я с ним не работал могу только поверхностно его проанализировать. Во-первых на мой взгляд использование дочерних роутов именно для лэйаутов не совсем подходящий инструмент - субъективщина Во-вторых, будет создан два раза роут с путем "/", хотя по идее, его быть не должно, если мы все страницы раскидали. В третьих, у неопытных разработчиков могут возникнуть вопросы относительно того, как именно будет резолвится этот несчастный роут "/" В четвертых, а как мне разместить страницу с выбранным лэйаутом по пути "/"? В пятых, что делать, если я хочу по роуту "/product/item" иметь лэйаут "main", а по роуту /product/item/actions лэйаут "productActionsLayout"? Ну и тому подобное по вложенным маршрутам с разными лэйаутами. В целом, вышеперечисленное мной - скорее придирки, основанные на поверхностном анализе, нужно смотреть глубже и ковырять. Я еще нашел способ, кажется он еще проще моего, использовать named-view v3.router.vuejs.org/guide/essentials/named-views.html#nested-named-views но вопрос, будет ли корректно работать, если один компонент, будет вложен в другой

@@user-vb6xh6yj4h В первые сталкиваюсь с таким подходом, если честно :) Так как я с ним не работал могу только поверхностно его проанализировать. Во-первых на мой взгляд использование дочерних роутов именно для лэйаутов не совсем подходящий инструмент - субъективщина Во-вторых, будет создан два раза роут с путем "/", хотя по идее, его быть не должно, если мы все страницы раскидали. В третьих, у неопытных разработчиков могут возникнуть вопросы относительно того, как именно будет резолвится этот несчастный роут "/" В четвертых, а как мне разместить страницу с выбранным лэйаутом по пути "/"? В пятых, что делать, если я хочу по роуту "/product/item" иметь лэйаут "main", а по роуту /product/item/actions лэйаут "productActionsLayout"? Ну и тому подобное по вложенным маршрутам с разными лэйаутами. В целом, вышеперечисленное мной - скорее придирки, основанные на поверхностном анализе, нужно смотреть глубже и ковырять. Я еще нашел способ, кажется он еще проще моего, использовать named-view v3.router.vuejs.org/guide/essentials/named-views.html#nested-named-views но вопрос, будет ли корректно работать, если один компонент, будет вложен в другой

@@dev-workshop поизучайте подробнее, потом поделитесь, роут выполняет все поставленные требования=))

Я думаю, что подходит, как раз таки потому, что маунт лэйаута, при таком подходе вызовется один раз. Точно сработает если ходить на сервер будет AppLayoutDefault или AppLayoutLogin А вообще, я делаю все запросы на сервер, которые "общие" в отдельной мидлварке, ее можно сделать блокирующей рендер или не блокирующей

@@dev-workshop на тему общих запросов в мидлварке было бы классно видео от вас увидеть, если там есть что рассказать

@@xeleos Привет!) А что подразумевается под общими запросами?

@@dev-workshop вы же сами комментарием выше упомянули об этом. На самом деле осведомлённость документацией у вас хорошая , лично я, благодаря вам узнал о возможности их(мидлвар.) использовать в принципе. Благодарю за ликбез.

@@wwiiktor Очень рад!) Да иногда забываю о чем были комментарии в ранних видео. Если речь про запросы, которые общие для всех страниц (пользователь, пермишены, общая инфа и тд), то в принципе, можно записать видос, конечно)

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

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

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

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

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

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

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

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

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

Не рассматривал такой вариант. Надо подумать

Согласен, я использую двyxypoвнeвый роутер. В шаблоне layout компонентов достаточно добавить router-view в нужное место и сделать сборщик роутинга. Минус подхода: - Нужны префиксы в урлах, типо /panel /login либо смириться что на корневой url будет 1 layout - Нужно один раз написать инфраструктурный код который будет собирать роутинг и класть страницу в childs с нужным layout. Плюсы: - Так как страницы префиксные, легко добавить глобальный permissions guards по типу user должен быть авторизован. - Не нужно в описаниях новых страниц тащить импорты на layout - Нет middleware’s - Динамический импорт работают нативно через функцию в качестве параметра component. - Можно натравить webpack чтобы он собирал несколько страниц в один chunk - Конфиг страницы прост до ужаса, url, component, meta в котором прописано название layout

@@a_mensky а можешь скинуть минимальную демку?

@@dev-workshop ссылку постил, куда то пропадает

@@a_mensky привет, а можешь в телегу скинуть где почитать об этом методе? flexsoxo

Да, на 2 вью работает, я согласен. На 3 начинаются пляски :) А что именно ты переписал?

Спасибо) Рад, что твоя проблема решена :)

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

@@dev-workshop если не сложно подскажите пожалуйста, для работы с данными , например юзер залогинился, использовать vuex ?

@@hellocsgo3600 Если мы говорим про 3 вью - то лучше pinia. Но можно жить вообще без state manager'a

@@dev-workshop я vue 3 учу, спасибо посмотрю pina

Привет! Хорошо, гляну. Спасибо!

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

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

На вкус и цвет. Сейчас не могу точно сказать, но по-моему у такого варианта есть проблемы с асинхронными импортами и как следствие - код сплиттингом, но могу ошибаться. Ну и да, на вкус и цвет, как говориться ИМХО: разве это проще? Как конечный разработчик, который будет переодически добавлять новые роуты, мне не очень нравится описание роута. свойство children описывает вложенные роуты. В Вашем примере, почти всегда будет вложенный роут "по-умолчанию". А является ли он действительно вложенным, или он нужен только для реализации лэйаута? А что с дефолтным лейаутом? А будет ли ререндериться "MainLayout" при переходе между Роутами первого уровня? А нужно ли разработчику думать в чем разница между $router.push({name: "users"}) и $router.push({name: "usersLayout"}) ? Выполнив $router.push({name: "usersLayout"}) какое имя будет у конечного роута? произойдет ли автоматический переход на роут с именем "users"? будут ли существовать два роута с разными именами но с одинаковым отображением? Все эти вопросы возникают у меня, глядя на Ваш пример. При этом я не помню ответы на них, мне нужно идти и проверять. Ну и кажется Вы упустили тот момент, что я делал решение, которое близко по АПИ к наксту, о чем я говорил в начале видео