Несколько компонентов vuejs 3 в монолитном проекте

Question

Есть e-commerce проект на php symfony. Решил реализовать часть элементов (форма добавления товара, фильтры, корзина, страница оформления заказа) с помощью vuejs3, но не хочу переписывать весь проект под SPA. Использую для сборки webpack (Encore).

Сейчас реализован только компонент добавления товара в корзину со страницы товара. В нужном месте html-страницы товара, вставляется div и к нему монтируется приложение vuejs

<body>
<div class="menu"></div>
<div class="left-column">..</div>
<div class="right-column">
    ...
    <div id="vue-app"></div> <!-- Сюда монтируем vuejs -->
    ...
</div>
</body>

и в js

import { createApp } from "vue";
import BuyForm from 'BuyForm.vue'

createApp(BuyForm).mount('#vue-app');

А теперь я хочу чтобы на странице могло быть несколько компонентов vuejs, например корзина в шапке. И они взаимодействовали между собой (при необходимости).

У меня два варианта:

Каким-то образом подсунуть html (который рендерит php) в некий корневой компонент (как <template> может быть) и затем добавлять в него другие компоненты, в те места которые мне надо (корзина, форма, фильтр) и т.д.)

<body>
<div id="app">                      <!-- Существующий html сохранить и примонтировать сюда корневой компонент vue -->
    <div class="menu">
        <cart-component />          <!-- Компонент с корзиной -->
    </div>
    <div class="left-column">..</div>
    <div class="right-column">
        ...
        <add-to-cart-component />    <!-- Компонент добавление товара в корзину -->
        ...
    </div>
</div>
</body>

Создавать отдельные экземпляры приложений и монтировать их в свои div

<body>
<div>
    <div class="menu">
        <div id="vue-cart"></div>       <!-- Сюда монтируем Cart.vue -->
    </div>
    <div class="left-column">..</div>
    <div class="right-column">
        ...
        <div id="vue-buy-form"></div>   <!-- Сюда монтируем BuyForm.vue -->
        ...
    </div>
</div>

</body>

и в js

import { createApp } from "vue";
import BuyForm from 'BuyForm.vue'
import Cart from 'Cart.vue'

createApp(BuyForm).mount('#vue-buy-form');
createApp(Cart).mount('#vue-cart');

И взаимодействие между BuyForm и Cart реализовать через что-то "третье", например Vuex (не изучал еще, заработает ли это).

Подскажите в какую сторону лучше двигаться? Или может быть третий вариант =)

БЛОГ НА HUSL

Несколько компонентов vuejs 3 в монолитном проекте

Ответы (0 шт):