Как правильно подружить Vue и php?

Question

[OrbiJ]

Есть базовый MVC-движок на PHP (все запросы апач забрасывает на index.php), который занимается маршрутизацией и обработкой данных. В тех случаях, когда нужно вернуть страницу, хочу прикрутить возможность использования vue-шаблонов. Суть проблемы такова, что маршрутизация у меня возложена именно на PHP, а vue выступает сугубо в роли небольших компонентов на разных страницах, а я просто понятия не имею, как правильно оформлять сборку vue при таком подходе.

Понятное дело, что мне хочется просто цеплять какой-то js файл к странице (.php) через "script", но я так и не понял, как его нынче собирают. Да, есть самый простой метод в лоб через CDN, но это уж как-то совсем просто. Попытался поломать голову с VITE, но, честно говоря, я более мусорной документации в жизни не видел, а хоть каких-то гайдов от экспертов я не нашёл. Я в курсе про Laravel, но сейчас я просто учусь и хочу самостоятельно понять, как подобные штуки можно реализовывать.

Comments

[Владислав Лысков]

Сейчас в основном разделяют котлет и мух

[OrbiJ]

Владислав Лысков, да в целом понятно, что проще использовать REST API в лоб, мне просто непонятна сама суть проблемы и отсутствие вменяемой возможности реализовать эту фичу, особенно на фоне нарастающей популярности SSR. Это же просто JS-код, почему я не могу подтянуть его сбилдить в один файл и просто цеплять там, где мне нужно?

[Ипатьев]

а кто говорит что не можете?
по мне, так вы проблему высосали из пальца
при чем здесь CDN я вообще не понял

[Владислав Лысков]

OrbiJ, есть такой проект, но я его не пробовал даже, ибо зачем это всё
https://github.com/phpMv/php-vuejs
В ларе это как-то реализовали, но я тоже не смотрел, кроме как быстро быстро и удобно сделать регу/логин я ничего в этом не увидел
Я не эксперт в данном вопросе, возможно я сильно заблуждаюсь

[OrbiJ]

Владислав Лысков, за ссылочку спасибо, ознакомился, только это скорее фреймворк для фреймворка, где мы просто заменяем код Vue кодом PHP.

[Kotaro Hiba]

Посмотри в сторону laravel-mix

[OrbiJ]

Ипатьев, а как это сделать-то? Я кроме как генерить этот самый бандл через webpack-simple и цеплять его скриптом к странице вариантов не вижу, но это такое себе решение, чрезмерно сложное для того, что я описал. Тем более, что с 3 версии во vue нативно идёт именно Vite, а не VUE-CLI. Все мануалы сводятся к базовой фразе: "давайте инициализируем проект и создадим шаблоны...". Ну так это я и сам мог сделать, мне бы понять, что этот шаблон делает и как мне его подружить с бэкендом. Повторюсь, в той же ларке до версии 8 вроде, точно не помню, всё сводилось к простой генерации бандла через mix (по сути тот же webpack) и его подключению куда угодно и как угодно, а сейчас они тоже полностью перешли на этот самый "вит" и проводят довольно много манипуляций для получения того же бандла :/

[Сергей delphinpro]

OrbiJ, кстати микс - это самый простой вариант. Там тупо одна-две строки в конфиге будет - откуда взять и куда положить js файл

Answer 1

[Сергей delphinpro]

а vue выступает сугубо в роли небольших компонентов на разных страницах

Исходя из этого я могу предположить, что подобные виджетики скорее всего не нуждаются в серверном рендере, а значит все довольно просто.
Настраиваем любой сборщик (webpack, vite). На входе будет какой-нибудь main.js, на выходе готовый файл (по умолчанию), пара файлов (main и vendor, если настроили разделение) или больше, в зависимости от хитрожопости настроек. Вот эти файлы и подключаем (соблюдая порядок, если их несколько, например vendor перед main)

В main можно писать весь фронт сайта, или модульно импортировать.
Туда же подключается вью и компоненты ваших виджетов

import Vue from 'vue';
import Calculator from './calc/Calculator.vue';

На странице, где нужно вставить компонент пишем нечто вроде

<div class="calc"></div>

Сюда будет рендериться компонент в рантайме. Например так (в том же main.js)

document.querySelectorAll('.calc').forEach(el => {
    new Vue({
        el    : el,
        render: h => h(Calculator, {
            props: {
               /// Пропсы, если надо
            },
        }),
    });
});

То есть каждый виджет в этом случае будет независимым vue приложением.

Если нужно передавать в компоненты какие-то данные, то можно научить компонент самому их запрашивать. Но тут придется отдельные роуты создавать. Или прямо на страницу в head выплевывать их в виде json

<script>window.calcData = <?= json_encode($calcData) ?>;</script>

а в компоненте по mounted их доставать

mounted() {
  const d = window.calcData;
}

Comments

[OrbiJ]

Премного благодарен за ответ, да, вы правы, до SSR мне ещё далеко. В целом всё понятно, я +- то же самое и пытался провернуть с вебпаком, но вот VITE мне просто весь мозг вынес особенно наличием этого index.html, я до сих пор не могу понять, зачем он тут вообще нужен? А повсеместные плашки о том, что нужно переходить именно на VITE вызывали ещё больше вопросов...