InCuca / vue-standalone-component

Vuejs template to build components with livecoding, tests, documentation and demos
MIT License
70 stars 6 forks source link
component jsdoc karma vue-styleguidist vuejs vuejs-templates vuejs2

vue-standalone-component

Travis

Vuejs standalone component template using karma for testing

DEPRECATED: USE P11N INSTEAD

Build your standalone components using this tiny template.

This template is Vue 2.x only.

Usage

This is a project template for vue-cli.

$ npm install -g vue-cli
$ vue init InCuca/vue-standalone-component my-component
$ cd my-component
$ npm install
$ npm run serve

The generated output in ./dist can be used with node and the browser.

PS: to build to UMD run npm run build:umd

What's Included

Linting

$ npm run lint

Testing & Test Coverage

$ npm run test
$ npm run test:watch
$ npm run test:cov

Building

ES6 Modules / CommonJS

$ npm run build
import myCmp from 'dist/my-cmp';

Vue.component('my-cmp', myCmp);

UMD

$ npm run build:umd
<script src="https://unpkg.com/vue" charset="utf-8"></script>
<script src="https://github.com/InCuca/vue-standalone-component/raw/master/dist/my-cmp.min.js" charset="utf-8"></script>

<div id="app"></div>

<script type="text/javascript">
  Vue.component('my-cmp', window.MyCmp.default);
  new Vue({
    el: '#app',
    template: '<my-cmp text="Hello World!"></my-cmp>',
  });
</script>