How can I create a library that exposes a single Vue component that can be used by distributed .mjs files?

Question

I want to create a Vue component bundled into a single .mjs file. Another Vue project can get this .mjs file over HTTP and use the component. Installing a pluggable component via npm is not possible because other applications will try to get it based on the configuration at runtime.

Things to consider with pluggable components

• May be using a subcomponent from another UI framework/library
• May use custom CSS
• May depend on other files, such as images

---

Copy library

I created a new Vuetify project via npm create vuetify

I deleted everything in the src folder except vite-env.d.ts and created a component 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>

and an index.ts file

import Renderer from "./Renderer.vue";

export { Renderer };

I added library mode in vite.config.ts

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

and extended the package.json file

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

Since I use custom CSS, Vite generates a styles.css file, but I have to inject the styles into the .mjs file. Based on this question, I'm using the plugin vite-plugin-css-injected-by-js.

When building, I get the required .mjs file containing the custom CSS

---

Using components

I created a new Vue project via npm create vue

For testing purposes, I copied the generated .mjs file directly into the new project's src directory and changed the App.vue file to

<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.log(e);
  } finally {
    console.log("done...");
  }
});
</script>

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

Unfortunately, I get the following warning and error

[Vue warn]: Vue received a component that has become a reactive object. This can cause unnecessary performance overhead and should be avoided by marking components with markRaw or using shallowRef instead of ref.

[Vue warn]: Injection 'Symbol(vuetify:defaults)' not found.

[Vue warn]: An unhandled error occurred during execution of the setup function

[Vue warn]: An unhandled error occurred during execution of a scheduler refresh.

Uncaught (in promise) Error: [Vuetify] Default instance not found

Does anyone know what I'm missing or how to fix it?

Answer 1

Vuetify does not provide isolation components and needs to initialize the plugin. You need to do this in the main application:

app.use(Vuetify)

Make sure vuetify is not duplicated in the project deps so that the library and main application use the same copy.

lib should use vuetify as a development dependency and specify it in Rollup external to prevent project global things from being bundled with the lib:

external: ["vue", "vuetify"]