Usage in Vue

For using this web-component in vue you'll need to configure your bundler so vue can resolve the custom element. If you're using Vue plugin for vite:

vue({
  template: {
    compilerOptions: {
      isCustomElement: (tag: string) => tag === "email-address",
    },
  },
});

See: Custom Element in Vue

import { createApp } from "vue";
import App from "./App.vue";

import EmailAddress from "email-obfuscator-webcomponent";
customElements.define("email-address", EmailAddress);

const app = createApp(App);
app.mount("#app");

vue

<script setup lang="ts">
import encodedImg from "../vbvfro8215e.png?url";
</script>

<template>
  <main>
    <h1>Hello from Vue!</h1>
    <email-address :src="encodedImg"></email-address>
  </main>
</template>

Demo

Source

Usage in Vue #

Demo #

Usage in Vue

Demo