Настройка docker для laravel и vue проекта

Работая над несколькими проектам можно довольно быстро столкнуться с тем, что версии нужного ПО на рабочей машине подходят не ко всем проектам. В последние годы все шире и шире используется dockerdocker-compose для оркестрации контейнеров), чтобы настроить окружение для работы над проектом локально и решить проблему существования разных версий нужных пакетов одновременно. Дабы не думать над каждой опцией настроек каждый раз удобно иметь под рукой какие-либо заготовки. В этой статье будет представлена одна из них.

Читать далее

Vue.js provide/inject

При создании сложных Vue приложений приходится решать много задач по разделению кода на части (компоненты и прочее). Когда мы уже разбили большой кусок кода на некую иерархию компонентов, то обычно передаем вложенным компонентам данные через свойства. Но если глубина, на которую необходимо передать данные вниз по дереву больше 1 уровня, то передавать через свойства не то, что неудобно, но и неправильно.

Читать далее

PortalVue — Teleport для Vue шаблонов

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

Представим себе список проблем (issues) как на github и в уголке страницы значок с числом не просмотренных проблем. Когда пользователь заходит в просмотр одной из проблем, то в списке она меняет вид, так как стала прочитанной. При этом и значок с числом должен уменьшить его. И так как это разные компоненты, которые могут быть не вложены один в другой, то встанет вопрос откуда брать данные для обои. «Vuex», — скажите вы. Но не всегда это будет удобно и верно.

Читать далее

Vue.js scoped slots и renderless component

Продолжая рассматривать способы повторного использования кода в vue.js (тема затронута ранее в статьях Повторное использование кода Vue.js и Vue.js Composition API) можно встретить упоминания некоего приема с использованием не отображаемых компонентов и слотов с ограниченной областью видимости (scoped slots).

Читать далее

Vue.js Composition API

Продолжая разбирать тему повторного (начало в статье Повторное использование кода Vue.js) использования кода Vue.js, я пришел к Composition API, который является основным новшеством Vue 3. Его также можно использовать во 2 версии Vue, если установить как отдельный пакет. В сети эти изменения вызвали бурное обсуждение, зачастую негодование, среди тех, кто пользуется данным фреймворком и  создал не мало кода на старом API (Options API). Давайте разберемся почему появился новый API, как его использовать и в чем его плюсы.

Читать далее

Повторное использование кода Vue.js

По мере усложнения приложения, в котором львиная доля кода использует Vue.js, возникает вопрос повторного использования кода. Когда возможности расширить тот или иной компонент с помощью параметров или слотов уже не удовлетворяют всех потребностей, можно прибегнуть в другим способам.

Читать далее

Vuetify — UI библиотека для Vue.js

В настоящее время web приложения уже трудно представить без сложных элементов управления, таких как интерактивные таблицы с данными, диалоговые окна, выпадающие меню и иерархические деревья. Писать весь этот набор компонентов самостоятельно, для того, чтобы  решить бизнес задачи — долго и обременительно. Но к счастью существуют уже готовые решения, которые берут на себя создание такой инфраструктуры. Одно из них — Vuetify.

Читать далее

Vite — разработка на JS без сборки

17 февраля вышла Vite 2.0.

Vite — это инструмент относящийся к инструментам сборки для веб-разработки. Он использует ES6 модули (es imports, ESM) на этапе разработки (для запуска приложений в dev режиме) и Rollup на этапе компиляции приложения (сборки в prod режиме).

Читать далее

Vue multiselect

Для некоего проекта понадобился компонент multiselect, который бы подгружал варианты асинхронно и отображал бы выбранные варианты строкой. Тоесть нечто подобное, что есть у WordPress при прикреплении тагов к заметке.

Читать далее

Таблицы Vue.js. Часть 1: ratiw/vuetable-2

При создании кабинетов администратора для веб-приложений часто необходимы динамические таблицы. В мире jQuery как минимум есть DataTables и jqGrid. Но так как jQuery в последние годы стремительно теряет нишу занимаемую им ранее в веб-приложениях (frontend), то появилась потребность узнать что же есть подобного для современных библиотек и фреймворков.

И так как в последнее время у меня вместе с сообществом Laravel появился стойкий интерес к Vue.js, то как раз для него и хотелось найти хороший компонент реализующий таблицы в графическом интерфейсе веб-приложений.

Читать далее

Vue.js

Vue.js — это прогрессивный JavaScript фреймворк (на официальном сайте значится именно как фреймворк, а не библиотека) для создания пользовательских интерфейсов. Он довольно легок в освоении (имеет низкий порог вхождения) и не требует при внедрении масштабных изменений сразу. Позволяет начинать его применение (и уходить, к примеру, от jquery-кода) постепенно.

Не смотря на свою небольшую историю и размер Vue так же подходит  для создания сложных одностраничных приложений (SPA, Single-Page Applications), если его использовать с дополнительными библиотеками и инструментами.

Читать далее