Данная статья появилась на свет по двум причинам. Во-первых ряд читателей приходили с вопросами о создании компонента-таблицы на Vue. Во-вторых в прошлой статье мы подошли к продвинутому использованию слотов. И такой компонент послужил бы неплохим кандидатом для применения данных техник. Сами техники эффективного расширения компонентов слотами будут продемонстрированы в следующей статье. А в этой будет описано создание начальной версии таблицы, которую потом можно будет развивать.
Читать далееМетка: vue
Vue. Пути улучшения возможностей повторного использования ваших компонентов
В этой статье хотелось бы начать освещать вопрос лучшего опыта повторного использования Vue компонентов. Разработчики часто ведут поиск информации на тему наследования компонентов во Vue. Вероятно, что это связано с тем, что наследование — самый очевидный и частый способ, которым обычно программисты добиваются повторного использования кода, если требуется обеспечить похожее (но с некоторыми отличиями) с имеющимся поведение.
Но повторное использование можно (и даже оптимальнее) осуществлять за счет других подходов. Набор приемов куда как более велик. Предлагаю вам поразмышлять на эту тему вместе с автором в нескольких статьях.
Читать далееVuex или Pinia. Что выбрать?
Сложно представить себе Vue-приложение, которое состоит из 1-2 компонентов. Обычно у нас десятки и даже сотни строительных блоков. Компоненты складываются в иерархическую структуру.
Основной способ передать какие-либо данные с верхних уровней элементов к нижним — использование свойств компонентов. Для передачи чего-либо в обратном направлении обычно используют события.
Однако, если какие-либо данные необходимо передавать через несколько уровней вложенности, то этот подход будет очень трудоемким. Скорее всего, часть компонентов на пути передачи данных будут в этом лишь посредниками. То есть они будут получать данные, которые им самим не нужны. А это нарушает принципы SOLID. Такое решение станет еще более обременительным, если данные нужно передавать между соседними ветками иерархии.
Читать далееVueUse
VueUse — это коллекция утилит для Vue Composition API, которая содержит средства для взаимодействия с различными сенсорами, API состояния, анимацией и другими возможностями браузеров. Помимо этого, также, включает в себя ряд интеграций со сторонними популярными пакетами.
Читать далееTanStack Query (Vue Query)
При создании сложного приложения на Vue.js на ряде страниц (в ряде компонентов) могут понадобиться общие для части проекта данные. При этом они не настолько общие и часто употребимые, чтобы загружать их сразу при обращении к любой странице. Хорошо бы загрузить эти данные сразу при посещении одной из тех страниц, где они нужны. И далее хранить с возможностью использовать на других страницах без повторной загрузки.
Читать далееНастройка docker для Laravel и Vue на одном домене
Ранее здесь уже описывалась настройка docker для приложения на базе Laravel и Vue с использование поддомена. В том материале backend с Laravel размещался на поддомене, а frontend с Vue — на основном домене. Однако такая конфигурация может иметь свои недостатки (например, проблемы с CORS). В данной статье попробуем настроить для локальной работы такое же окружение, но на одном домене. Чтобы у Laravel работали одни маршруты, а у Vue — другие.
Читать далееLaravel + Vue в Docker с помощью Sail
Ранее была опубликована статья, вкоторой описывалась настройка fullstack приложения Laravel + Vue с выносом Laravel на поддомен. Vue приложение располагалось на основном домене, а api на Laravel — на поддомене backend.
Но Laravel имеет в своем распоряжении инструмент sail, который позволяет легко настроить docker окружение не прибегая даже, зачастую, к составлению файлов Dockerfile и docker-compose.yml.
Читать далееСредства frontend в экоситеме Laravel
В статье пойдет речь о том, какие инструменты и заготовки имеет в своем распоряжении экосистема Laravel 9 для создания современной frontend части web приложения. Достаточно ли они современны, какие плюсы и минусы имеют.
Читать далееVue JavaScript Debug в Intellij IDEA, PHPStorm или WebStorm
В одной из предыдущий статей была описана настройка отладки xDebug в IDEA (PHPStorm). Но какое же современное web приложение без JavaScript? Поэтому полезно будет описать и настройку отладки frontend части.
Читать далееНастройка docker для laravel и vue проекта
Работая над несколькими проектам можно довольно быстро столкнуться с тем, что версии нужного ПО на рабочей машине подходят не ко всем проектам. В последние годы все шире и шире используется docker (и docker-compose для оркестрации контейнеров), чтобы настроить окружение для работы над проектом локально и решить проблему существования разных версий нужных пакетов одновременно. Дабы не думать над каждой опцией настроек каждый раз удобно иметь под рукой какие-либо заготовки. В этой статье будет представлена одна из них.
Читать далееVue.js provide/inject
При создании сложных Vue приложений приходится решать много задач по разделению кода на части (компоненты и прочее). Когда мы уже разбили большой кусок кода на некую иерархию компонентов, то обычно передаем вложенным компонентам данные через свойства. Но если глубина, на которую необходимо передать данные вниз по дереву больше 1 уровня, то передавать через свойства не то, что неудобно, но и неправильно.
Читать далееPortalVue — Teleport для Vue шаблонов
При создании и росте сложного SPA приложения построить хорошую архитектуру становится все труднее. Порой данные, которые доступны в одном компоненте нужно отобразить в другом компоненте.
Представим себе список проблем (issues) как на github и в уголке страницы значок с числом не просмотренных проблем. Когда пользователь заходит в просмотр одной из проблем, то в списке она меняет вид, так как стала прочитанной. При этом и значок с числом должен уменьшить его. И так как это разные компоненты, которые могут быть не вложены один в другой, то встанет вопрос откуда брать данные для обои. «Vuex», — скажите вы. Но не всегда это будет удобно и верно.
Читать далее