1

I am currently working on web components and shadow DOM. I can see that it is possible to create a native web component using Vue3 here Vue docs. But I am currently facing issues building the native component file from vuejs files. I have googled for some time and found there are not many helpful content for it.

Building Web Components with Vue 3.2 is by far the most helpful blog I have found. Still I am unable to do production build of my files.

Currently I am getting 2 files after build.

import {
  r as c,
  c as l,
  o as a,
  a as u,
  b as d,
  d as f,
  t as m,
  u as p,
  e as g,
} from "./vendor.21fe8919.js";
const y = function () {
  const r = document.createElement("link").relList;
  if (r && r.supports && r.supports("modulepreload")) return;
  for (const e of document.querySelectorAll('link[rel="modulepreload"]')) o(e);
  new MutationObserver((e) => {
    for (const t of e)
      if (t.type === "childList")
        for (const s of t.addedNodes)
          s.tagName === "LINK" && s.rel === "modulepreload" && o(s);
  }).observe(document, { childList: !0, subtree: !0 });
  function i(e) {
    const t = {};
    return (
      e.integrity && (t.integrity = e.integrity),
      e.referrerpolicy && (t.referrerPolicy = e.referrerpolicy),
      e.crossorigin === "use-credentials"
        ? (t.credentials = "include")
        : e.crossorigin === "anonymous"
        ? (t.credentials = "omit")
        : (t.credentials = "same-origin"),
      t
    );
  }
  function o(e) {
    if (e.ep) return;
    e.ep = !0;
    const t = i(e);
    fetch(e.href, t);
  }
};
y();
const h = {
    props: { timeZone: { type: String, default: "America/Los_Angeles" } },
    emits: ["datechange"],
    setup(n, { emit: r }) {
      const i = n,
        o = c(new Date()),
        e = l(() => o.value.toLocaleString("en-US", { timeZone: i.timeZone }));
      return (
        setInterval(() => {
          (o.value = new Date()), r("datechange", e);
        }, 1e3),
        (t, s) => (
          a(), u("div", null, [d(t.$slots, "prefix"), f(" " + m(p(e)), 1)])
        )
      );
    },
  },
  v = g(h);
customElements.define("current-time", v);
document.querySelector("current-time").addEventListener("datechange", L);
function L(n) {
  console.log(n.detail[0].value);
}

But i would like the build file to be in following format for my use case.

class CurrentTime extends HTMLElement {
  connectedCallback() {
    this.innerHTML = new Date();

    setInterval(() => this.innerHTML = new Date(), 1000)
  }
}

// Define it as a custom element
customElements.define('current-time', CurrentTime);

vite config file

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue({ customElement: true })],
});
JithinAji
  • 402
  • 5
  • 16
  • Can you please add more information? Give information is not sufficient! – Harshal Patil Oct 14 '21 at 06:25
  • I know this one is bit complicated to explain. I am trying to use the web component to make custom google web designer component. To do that I need the output file to be like the second code snippet which I placed. The first file which I am getting is usable in most cases except while I use it in google web designer. I need the vite build file to give me an output similar to my second code snippet. I'll also add my vite configuration file. Please let me know if anything else is required. – JithinAji Oct 14 '21 at 06:33

0 Answers0