Vidget

Demo

Demo code see @chiaweilee/vidget-demo

Install

npm install vidget

in package.json

{
    "scripts": {
        "build:widget": "vidget-cli --entry src/main.js --output dist/widget.js"
    }
}

Usage

Build Widget

Single component

import Vue from 'vue'
import buildWidget from 'vidget'
buildWidget({
    template: '<template>{{ Math.random() }}</template>'
}, Vue)

Use *.vue

// test.vue
<template>
    {{ Math.random() }}
</template>

import Vue from 'vue'
import buildWidget from 'vidget'
import test from './test.vue'

buildWidget(test, Vue)

Use mixin

const i18n = new VueI18n({
  locale: 'en',
  messages: {}
})

buildWidget(test, Vue, {
    // mixin
    i18n
})

Cli

package.json

{
    "scripts": {
        "build": "vidget-cli build --entry src/main.js --output dist/widget.js"
    }
}

npm run build

Demo

import Vue from 'vue'
import buildWidget from 'vidget'
import test from './components/test'

buildWidget(test)

Widget Init

<div id="widget"></div>
<script src="http://www.xxx.com/widget.js"></script>
<script>
window.vidget('#widget', {
    // options
    // get props.options at root component
})
</script>