Как отобразить множество компонентов vue внутри blade шаблона?

Question

[Alex Alc]

Мы имеем laravel 11, и пакет @vitejs/plugin-vue (vue.js 3.5.13)
Уже 2 дня ломаю голову над вариантами как можно адекватно поместить множественные vue компоненты в blade шаблоны.
И да, в этом действительно бывает необходимость. Не буду описывать все случаи, но достаточно представить огромный проект написанный на blade шаблонах без vue, который нужно поэтапно рефакторить.

Натыкаясь на разные советы по этой теме перепробовал множественные варианты, но единственный рабочий пример - когда мы имеем

import {createApp} from 'vue'
import App from './components/App.vue';
const app = createApp(App);
app.mount("#app");

и

<div id="app">
    123
    <App></App>
</div>

всё работает корректно, блок #app заменяется, компонент отрисован.
но

import {createApp} from 'vue'
import App from './components/App.vue';
const app = createApp({});
app.component('App', App);
app.mount("#app");

уже результата не даёт.
Очень прошу подсказать какие могут быть варианты регистрации компонентов внутри blade шаблона, кроме как штамповать createApp() на каждый элемент. Буду признателен если хотя бы подскажете в каком направлении искать информацию.

Answer 1

[Alex Alc]

Нашёл решение, хотя и не до конца вникал как оно работает, думаю кому-то может пригодиться. Но отмечу что использование множественных компонентов поверх blade шаблона это ситуативное решение, не всегда стоит его придерживаться, и уж точно не регистрировать все компоненты на каждой странице.
нужно заменить
import {createApp} from 'vue'
на
import {createApp} from 'vue/dist/vue.esm-bundler'
в итоге получим

import {createApp} from 'vue/dist/vue.esm-bundler'
import App from './components/App.vue';
const app = createApp({});
app.component('App', App);
app.mount("#app");

контент внутри #app сохраняется, <App></App> успешно отрисовывается как компонент.

Answer 2

[Александр]

Давно vue не дергал...
1)defineAsyncComponent
https://v3.ru.vuejs.org/ru/guide/component-dynamic...

2)Извращение. думаю так пойти в планах :) И посмотреть что будет :)

<div id="app1">
<div id="app2">
<div id="app3">

Что мешает несколько экземпляров запустить, НО ТОЛЬКО если они не связаны.

Comments

[Alex Alc]

ну я в конце вопроса описал этот вариант как "штамповать createApp()", этот подход мне не нравится, эти экземпляры не связаны и пожирают значительно больше памяти.