Как создать библиотеку, предоставляющую один компонент Vue, который может использоваться распределенным файлом .mjs?

Я хочу создать один компонент Vue, который будет объединен в один файл .mjs. Другой проект Vue может получить этот файл .mjs через HTTP и использовать компонент. Установка подключаемого компонента через npm невозможна, поскольку другое приложение пытается получить его на основе конфигурации во время выполнения.

Что следует учитывать для подключаемого компонента

• Возможно, используются подкомпоненты из другой среды/библиотеки пользовательского интерфейса.
• Возможно, используется пользовательский CSS
• Может полагаться на другие файлы, например. изображений

Воспроизведение библиотеки

Я создал новый проект Vuetify через npm create vuetify

Удалил из папки src все, кроме vite-env.d.ts, создал компонент Renderer.vue

<script setup lang = "ts">
import { VContainer } from "vuetify/components"

defineProps<{ value: unknown }>()
</script>

<template>
  <v-container>
    <span class = "red-text">Value is: {{ JSON.stringify(value, null, 2) }}</span>
  </v-container>
</template>

<style>
.red-text { color: red; }
</style>

и файл index.ts

import Renderer from "./Renderer.vue";

export { Renderer };

Я добавил библиотечный режим в vite.config.ts

  build: {
    lib: {
      entry: resolve(__dirname, "./src/index.ts"),
      name: "Renderer",
      fileName: "renderer",
    },
    rollupOptions: {
      external: ["vue"],
      output: {
        globals: {
          vue: "Vue",
        },
      },
    },
  },

и расширил файл package.json с помощью

  "files": ["dist"],
  "main": "./dist/renderer.umd.cjs",
  "module": "./dist/renderer.js",
  "exports": {
    ".": {
      "import": "./dist/renderer.js",
      "require": "./dist/renderer.umd.cjs"
    }
  },

Поскольку я использую пользовательский CSS, Vite сгенерирует файл styles.css, но мне нужно вставить стили в файл .mjs. Основываясь на этой проблеме Я использую плагин vite-plugin-css-injected-by-js.

При сборке я получаю нужный файл .mjs, содержащий мой собственный CSS.

Потребление компонента

Я создал новый проект Vue через npm create vue

и в целях тестирования я скопировал сгенерированный файл .mjs прямо в каталог src нового проекта и изменил файл App.vue на

<script setup lang = "ts">
import { onMounted, type Ref, ref } from "vue";

const ComponentToConsume: Ref = ref(null);

onMounted(async () => {
  try {
    const { Renderer } = await import("./renderer.mjs"); // fetch the component during runtime

    ComponentToConsume.value = Renderer;
  } catch (e) {
    console.info(e);
  } finally {
    console.info("done...");
  }
});
</script>

<template>
  <div>Imported component below:</div>
  <div v-if = "ComponentToConsume === null">"still loading..."</div>
  <component-to-consume v-else :value = "123" />
</template>

К сожалению, я получаю следующие предупреждения и ошибки

[Предупреждение Vue]: Vue получил компонент, который стал реактивным объектом. Это может привести к ненужной нагрузке на производительность, и этого следует избегать, помечая компонент знаком markRaw или используя shallowRef вместо ref.

[Предупреждение Vue]: инъекция «Символ (vuetify: по умолчанию)» не найдена.

[Vue warn]: необработанная ошибка во время выполнения функции настройки

[Vue warn]: необработанная ошибка во время выполнения сброса планировщика.

Uncaught (в обещании) Ошибка: [Vuetify] Не удалось найти экземпляр по умолчанию

Кто-нибудь знает, что мне не хватает или как это исправить?