При подключении Sentry к backend, например, PHP Laravel, обычно не требуется внесения замысловатых настроек. Нужно установить пакет и прописать DSN. В случае же использования Sentry для отслеживания ошибок во frontend появляется ряд специфичных моментов. В этой статье будут собраны описания таких ситуаций и решения для них.
Читать далееРубрика: Vue.js
Паттерны, приемы и все что связано с фреймворком Vue.js
Перевод строк с html-разметкой в Vue I18n
Если в вашем Vue-приложении переводы работают через Vue-i18n, то вы наверняка сталкивались с ситуациями, в которых приходилось добавлять перевод для фразы, которая содержит html-разметку. Чаще всего это ссылки (тег a) или строковые контейнеры (тег span), позволяющие сделать акцент на определенных частях фразы. В таких ситуациях самым легким решением кажется добавить фразу вместе с разметкой в JSON с переводами, а вывод сделать через v-html. Давайте посмотрим какие с этим есть проблемы и как можно сделать лучше.
Vue. Динамическое переключение компонентов
Чтобы не повторять себя (принцип DRY) при разработке Vue-приложения приходится прибегать к различным приемам. Одним из таких приемов (не так сильно известным, кстати) является применение атрибута is для динамического переключения между компонентами. В этой статье будет показано и рассказано как можно использовать такой подход.
Передача данных на много уровней Vue компонентов
Чтобы в коде проще было ориентироваться и поддерживать его мы разделяем его на небольшие части, которые легко укладываются в голове и на экране. Во Vue, в основном, такие части будут представлены компонентами. Мы дробим интерфейс пользователя на ряд компонентов, которые используют друг-друга образуя дерево (иерархию).
Читать далееЕсть ли наследование во Vue.js
В данной статье мы подведем некоторые итоги по вопросу повторного использования кода, который освещался с разных сторон на протяжении нескольких статей. Вспомним более давние статьи на эту тему. Также на основе этой информации определим есть ли во Vue.js наследование.
Читать далееVue. Продвинутая работа со слотами
В этой статье мы продолжим обсуждение темы повторного использования кода во Vue.js. Тема была начата несколькими статьями ранее. Здесь, как и было обещано ранее, будет обсуждение расширенной работы со слотами и описание вариантов того, как это можно применить в реальных проектах.
Читать далееVue 3 expose
В этой статье будет рассказано про новшество под названием expose появившееся во Vue версии 3.2. Эта возможность будет использована в развитии примера компонента-таблицы на Vue, создание которого описывается в предыдущих статьях.
Читать далееТаблица на Vue 3. Добавляем Scoped Slots
В прошлой статье мы сделали на Vue 3 с нуля таблицу для отображения данных, получаемых с сервера. Эта таблица имеет разбивку на страницы и возможность менять сортировку. А в этой новой статье будет показано как сделать тот код более пригодным для повторного использования. Будет рассказано о технике, которая делает компоненты гораздо более универсальными.
Читать далееТаблица на Vue 3. Создание компонента
Данная статья появилась на свет по двум причинам. Во-первых ряд читателей приходили с вопросами о создании компонента-таблицы на Vue. Во-вторых в прошлой статье мы подошли к продвинутому использованию слотов. И такой компонент послужил бы неплохим кандидатом для применения данных техник. Сами техники эффективного расширения компонентов слотами будут продемонстрированы в следующей статье. А в этой будет описано создание начальной версии таблицы, которую потом можно будет развивать.
Читать далееVue. Пути улучшения возможностей повторного использования ваших компонентов
В этой статье хотелось бы начать освещать вопрос лучшего опыта повторного использования Vue компонентов. Разработчики часто ведут поиск информации на тему наследования компонентов во Vue. Вероятно, что это связано с тем, что наследование – самый очевидный и частый способ, которым обычно программисты добиваются повторного использования кода, если требуется обеспечить похожее (но с некоторыми отличиями) с имеющимся поведение.
Но повторное использование можно (и даже оптимальнее) осуществлять за счет других подходов. Набор приемов куда как более велик. Предлагаю вам поразмышлять на эту тему вместе с автором в нескольких статьях.
Читать далееVuex или Pinia. Что выбрать?
Сложно представить себе Vue-приложение, которое состоит из 1-2 компонентов. Обычно у нас десятки и даже сотни строительных блоков. Компоненты складываются в иерархическую структуру.
Основной способ передать какие-либо данные с верхних уровней элементов к нижним – использование свойств компонентов. Для передачи чего-либо в обратном направлении обычно используют события.
Однако, если какие-либо данные необходимо передавать через несколько уровней вложенности, то этот подход будет очень трудоемким. Скорее всего, часть компонентов на пути передачи данных будут в этом лишь посредниками. То есть они будут получать данные, которые им самим не нужны. А это нарушает принципы SOLID. Такое решение станет еще более обременительным, если данные нужно передавать между соседними ветками иерархии.
Читать далееVueUse
VueUse – это коллекция утилит для Vue Composition API, которая содержит средства для взаимодействия с различными сенсорами, API состояния, анимацией и другими возможностями браузеров. Помимо этого, также, включает в себя ряд интеграций со сторонними популярными пакетами.
Читать далее