How to use @vue/web-component-wrapper - 4 common examples

import Vue from 'vue'
import wrap from '@vue/web-component-wrapper'

// runtime shared by every component chunk
import 'css-loader/lib/css-base'
import 'vue-style-loader/lib/addStylesShadow'
import 'vue-loader/lib/runtime/component-normalizer'

import myWc from '~root/my-wc.vue'
window.customElements.define('my-wc', wrap(Vue, myWc))

import Vue from 'vue'
import wrap from '@vue/web-component-wrapper'
import CtkDateTimePicker from './components/CtkDateTimePicker'
import VueMoment from 'vue-moment'
import Moment from 'moment'
import { extendMoment } from 'moment-range'
const moment = extendMoment(Moment)
Vue.use(VueMoment, {
  moment
})
const CustomElement = wrap(Vue, CtkDateTimePicker)

window.customElements.define('ctk-date-time-picker', CustomElement)

import Vue from 'vue'
import wrap from '@vue/web-component-wrapper';
import VueWebComponent from './HelloWorld';

const helloWorld = wrap(Vue, VueWebComponent);

window.customElements.define('vue-hello-world', helloWorld);

import LazyComponents from 'vue-lazy-components-option'
import router from './router'
import AppStore from './store'
import App from './App.vue'

interface BirdseyeOptions {
  experimental?: boolean
}

Vue.use(LazyComponents)

const appTagName = 'birdseye-app'
const Root = Vue.extend({ router })

Vue.config.ignoredElements = [appTagName]
window.customElements.define(appTagName, wrap(Root, App))

function exposeCatalogRoutes(catalogs: Catalog[]): void {
  const routes = catalogs.reduce((acc, catalog) => {
    const meta = catalog.toDeclaration().meta
    return acc.concat(
      meta.patterns.map(pattern => {
        return `/${encodeURIComponent(meta.name)}/${encodeURIComponent(
          pattern.name
        )}`
      })
    )
  }, [])

  const script = document.createElement('script')
  script.id = '__birdseye_routes__'
  script.type = 'application/json'