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

To help you get started, we’ve selected a few @vue/web-component-wrapper examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github vuejs / vue-cli / packages / @vue / cli-service / lib / commands / build / entry-wc.js View on Github external
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))
github chronotruck / vue-ctk-date-time-picker / src / main-build.js View on Github external
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)
github err0r500 / microfrontends / components / vue / src / main.js View on Github external
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);
github ktsn / birdseye / packages / @birdseye / app / src / main.ts View on Github external
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'

@vue/web-component-wrapper

wrap a vue component as a web component.

MIT
Latest version published 4 years ago

Package Health Score

63 / 100
Full package analysis

Popular @vue/web-component-wrapper functions