Overall approach for a Vue-based custom element library

[franck102]

Hi all, I plan to use Vue 3 to create a library of custom elements that are to be used on third-party web sites. The final intent is to have up to 3-4 custom elements on a page, that will cooperate through events & element properties.

My idea was to have a "base" custom element that

• makes heavy libraries (Vue, Pinia...) globally available so that other elements don't need to bundle them
• hosts shared state for all the elements (Pinia stores)

The reason for using Vue is that the same components are also used in an SPA.

I have a few questions about the approach though:

1. does the approach make sense overall?

2. I am a bit fuzzy on how to design the "base" element and on how to make the Vue instance globally available - are there any sample projects I could use as a guide?

I am using the Vite configuration below, which mentions "global variables" for the UMD build - not sure how the base element should make those variables available; or how the esm version would get a hold of the Vue instance?

rollupOptions: {
      // make sure to externalize deps that shouldn't be bundled
      // into your library
      external: ['vue'],
      output: {
        // Provide global variables to use in the UMD build for externalized deps
        globals: {
          vue: 'Vue',
        },
      },
    },

[franck102]

I really could use some help with this... any suggestions?

I am using Vite to create a shared base module that should host Vue, but I don't really understand what Vue package I should be using (https://github.com/vuejs/core/tree/main/packages/vue#which-dist-file-to-use), nor how to configure Vite to use that package.

The project is defined as a module:

{
  "name": "@acme/we-base",
  "version": "0.5.65",
  "files": [
    "dist"
  ],
  "main": "./dist/ep-base.umd.js",
  "module": "./dist/ep-base.mjs",
  "exports": {
    ".": {
      "import": "./dist/ep-base.mjs",
      "require": "./dist/ep-base.umd.js"
    }
  },

so I assume that vue.runtime.esm-bundler.js is being used.

My Vite config looks like this:

...
import vue from "@vitejs/plugin-vue"
...

const libraries = {
  "ep-base": {
    entry: resolve(__dirname, "src/EPBase.js"),
    name: "ep-base",
    fileName: "ep-base"
  }
}

export default defineConfig({
  define: {
    __INTLIFY_PROD_DEVTOOLS__: false,
    __VUE_PROD_DEVTOOLS__: false,
    __VUE_OPTIONS_API__: false
  },
  envPrefix: "EP_",
  plugins: [
    vue({
      customElement: /.*.vue/,
      template: {
        compilerOptions: {
          isCustomElement: (tag) => true
        }
      }
    }),
    htmlPurge()
  ],

  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url))
    },
    preserveSymlinks: true
  },
  build: {
    emptyOutDir: false,
    lib: {
        entry: resolve(__dirname, "src/EPBase.js"),
        name: "ep-base",
        fileName: "ep-base"
    },
    reportCompressedSize: true,
    sourcemap: true,
    rollupOptions: {
      plugins: [],
// make sure to externalize deps that shouldn't be bundled into your library
      external: [],
      output: {
        // Provide global variables to use in the UMD build
        // for externalized deps
        globals: {
        },
      }
    }
  }
})

When I load the module in the browser however, I get this error:

Uncaught ReferenceError: process is not defined
    at shared.esm-bundler.js:10:22
    at ep-base.umd.js:1:64
    at ep-base.umd.js:1:70

coming from process.env.NODE_ENV being tested in a shared.esm-bundler.js script.

[fguillen]

I'm also trying to export my Vue App as a library and load it in a browser HTML. I don't find proper documentation for this scenario :/

[franck102]

I gave up on this for now, each of my web component is self-contained and has its own instance of a Vue app :(

[fguillen]

I managed to do it, my workflow is described here: https://stackoverflow.com/a/78026012/316700