Это внешний URL на внешний собранный компонент, или на локальный собирающийся в исходных файлах?

Не знал, спасибо х2.

Ну и как же тогда лучше теперь мне вытащить объект?

Вынести это дело в какой-нибудь composable, наверное
Ну или вкрячить какой-нибудь mitt в качестве глобального eventbus

Зависит от задачи по коду трудно сказать что ты делаешь

я пока просто учусь. Мне бы хотелось бы просто вытащить объект из миксина

Тут зависит от задачи. Можно пойти разными путями
1 эвент бас
2 стор
3 сервис

Не знаю тогда как объяснить.
Есть главный app.js
window.Vue = require(‘vue’).default;
Дальше как понимаю в нем нужно назначить
const eventBus = new window.Vue
export default eventBus

Затем в мексине у меня описан метод
viewDetails(id){
let workToView = _.find(this.works, {id:id})
this.$emit(«viewDetails»,workToView);
}
И чтоб увидеть детали объекта я делаю
import WorkService from «../../mixins/WorkService»;

export default {
mixins: [WorkService],
data(){
return{
work:{}
}
},
created() {
eventBus.$on(«viewDetails»,(selectedWork) =>{
this.work = selectedWork
})
console.log(this.work);
}
}

Схема вроде работает за исключением HMR-а, подключая (mount-я в DOM) дочерний апп, обрывается HMR и у глобального(если запускать его в serve-режиме) и у дочернего аппа. При этом запуская глобальный в режиме prod-а ситуация не меняется — дочерний HMR не работает. В консоли всё ок, апдейты прилетают (по обеим аппам), но компонент не ребилдится.

Без HMR-а не вариант, т.к. вся работа ведется в дочерних. WS hmr-а разделил просто портами, оба dev-server-а https, clientPort прописан. Облазал довольно много issues прежде чем писать…

Кажется что изобретаю микрофронтенды, почитал про webpack module federation — ничего не понял, если честно, но по-умолчанию не хочется завязываться на вебпак от слова совсем. В идеале даже без vite обойтись (в дочерних app-ах), а просто на dynamic-импортах сделать.

То что я описал вообще реально сделать? Мб какие-то либы готовые есть которые глянуть можно?

https://vuejs.org/guide/essentials/component-basics.html

Нужны два приложения, или «одно внутри другого»?

одно внутри другого, но «второе» должно подгружаться динамически (заранее при старте основного апа не известно о дочерних ничего)

Такого быть не должно. Если нужно «приложение» внутри другого, нужно делать одно приложение с компонентами.

Иначе в DOM одного приложения монтируется другое

не совсем понял… всмысле условными dynamicComponent-ами их подгружать, а не createApp-ами?

Да. defineAsyncComponent, если нужно динамически регистрировать. Или динамическим компонентом, если нужен потом компонент.
За одно поддерево DOM должно отвечать одно приложение, состоящее из дерева экземпляров компонентов.
Вложенные приложения, которые могут перетереться сверху — не делают, потом пойдут непонятные проблемы.

А какая задача к такому привела, зачем именно приложение новое вложенное?

тут ошибка, я не корректно ответил на ваш первый вопрос видимо. задача в том чтобы дочерние <что-то(как сейчас понимаю, компоненты)> могли быть подгружаемыми в любой момент извне в основное приложение используя его же Vue-компилятор (без необходимости в каждом дочернем использовать свой Vue).

Но загвоздка в HMR похоже остается — я ведь не могу в dev-режиме пригрузить дочерний dynamicComponent через import() и так чтобы он hmr-ился при этом, через vite/webpack или что угодно, потому что это будет не приложение а обычный компонент…

Я проверил, что у меня сработал HMR. И не вижу причин, почему он не работает.

Опиши, что ты делаешь, или какая проблема и как решается)

Подгружался извне — имеется в виду по внешнему URL?

да

Но тогда компонент ведь приходит уже собранный. Как это выглядит в разработке?

теоретически как я вижу идеальный вариант — в глобальной апе есть какой-то лоадер (importModule: (src: string) => VueComponent) который через import() загружает внешний компонент (хостится он где угодно, это может быть локальный дев-сервер или ремоут), компилит его через свой же Vue и прописывает в стейт. При этом у этих дочерних компонентов обязательно должен быть доступен hot reload, чтобы при их загрузке в dev-режиме (видимо через вебпак всё же) эти компоненты ребилдились, при этом глобальный компонент может быть и не в дев-режиме…..

на внешний собранный или на внешний в dev-режиме (hmr)

То есть есть приложение 1 и компонент 2.
Приложение 1 и компонент 2 — независимы.

Оба могут быть как собранными, так и разрабатываться в dev режиме и как-то доступы с сервером.

Компонент 2 приходит в приложение 1 в рантайме нативным импортом по честному URL.

И надо, чтобы для компонента 2 работал HRM (когда он в дев)?

ну, получается, вроде так, да… пошел я нахрен?)))))

А hmr от второго сборщика как подключено в приложение?

нет, увидел сам проблему. если у компонента 2 нет своего vue — его не собрать же никак тупо…

Компонент можно собрать, как обычный модуль

видимо как-то кастомно с полным unmount/mount, я вот и не понимаю как =/ интегрироваться то не получится, потому что основное может работать в прод-режиме

Основное приложение можно отдавать сервером, который внедряет скрипты от дев сервера

Добавить атрибут loading=»lazy» в <img>?

А как выводятся картинки?

html?

base64?