Ранее здесь уже описывалась настройка docker для приложения на базе Laravel и Vue с использование поддомена. В том материале backend с Laravel размещался на поддомене, а frontend с Vue – на основном домене. Однако такая конфигурация может иметь свои недостатки (например, проблемы с CORS). В данной статье попробуем настроить для локальной работы такое же окружение, но на одном домене. Чтобы у Laravel работали одни маршруты, а у Vue – другие.
Читать далееМетка: 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”, – скажите вы. Но не всегда это будет удобно и верно.
Читать далее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 без сборки
Vite – это инструмент относящийся к инструментам сборки для веб-разработки. Он использует ES6 модули (es imports, ESM) на этапе разработки (для запуска приложений в dev режиме) и Rollup на этапе компиляции приложения (сборки в prod режиме).
Читать далее