Simple project template for creating self-contained Vue widgets, that can be used in any website.

This uses vue-custom-element and based on vue-customelement-bundler, but modified for better productivity:

• added webpack-dev-server with hot reloading
• added preconfigured eslint with vue/essential and airbnb-base rulesets
• added necessary webpack-loaders for scss (with autoprefixer) and images
• included babel-polyfills (configured by targets browsers section in .babelrc) and html custom-elements polyfill
• updated all dependencies for latest versions

npm run dev

Will launch dev-server on localhost. Components needs to be registered in src/main.js. Custom element must contain a hyphen in its tag name ('vue-widget', not 'vuewidget').

npm run build

Result dist/*.js file name is configured in webpack-config output section.

Just include html-tag anywere on page and connect script (each custom element can be included multiple times and will be independent of each other):

<vue-widget someprop="content"></vue-widget>
<script src="vue-widget.js"></script>