Elwins Test Web Components for Vue 3

These are my test Web Components specifically build for Vue 3.

Using these components

Add this package to your project:

npm install elwins-test-web-components-vue --save

Or:

yarn add elwins-test-web-components-vue

Edit the main.js file like this:

import { createApp } from "vue";
import App from "./App.vue";
import {
  applyPolyfills,
  defineCustomElements,
} from "elwins-test-web-components/loader";

const app = createApp(App);

applyPolyfills().then(() => {
  defineCustomElements().then(() => {
    app.mount("#app");
  });
});

This is needed because defineCustomElements is async. Otherwise the Vue 3 mount is ran before the custom elements are fully defined, resulting in Vue 3 not correctly binding object/array values on load.

Import the component(s) you want to use:

import { EveButton } from "elwins-test-web-components-vue";

Use it in your template as any Vue component:

<EveButton href="https://elwinvaneede.com">Website</EveButton>

How to release a new version

• Build the core package
• Run build on this package
• Publish