Vue cli template to build components with livecoding, tests, documentation & more


A template for the Vue cli is available to help you build components with livecoding, tests, documentation and demos. Build your standalone components using this tiny template.

Using this template you will be able to:

  • Display the directory of your componet: src\components\components.vue
  • List the component docs
  • Display props, methods & events
  • Display the component's isolated usage instructions
  • Filter components by name and more...


This template is Vue 2.x only.

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

While running the above commands you will get some prompts and some instructions in steps about how to write components.

After you are done run:

$ npm run serve

You can now view style guide in the browser. visiting:

Local:  http://localhost:6062/

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


$ npm run lint

Testing & Test Coverage

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


ES6 Modules / CommonJS

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

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


$ npm run build:umd
<script src="" charset="utf-8"></script>
<script src="./dist/my-cmp.min.js" charset="utf-8"></script>

<script type="text/javascript">
  Vue.component('my-cmp', window.MyCmp);

If you are interested for more about this template or you have any suggestions or bugs, click here.