Настройка 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 приложения. Достаточно ли они современны, какие плюсы и минусы имеют.

Читать далее

Настройка 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 режиме).

Читать далее