Vue bonsai tree

A Vue tree component designed to be used with hand-coded markup rather than generated from a javascript data structure.

Version: 1.0.0 Updated: 01/30/2017

By: adamcarheden License: GPL-3.0

Downloads Last 30 Days: 13


A collapsable tree Vue component designed to render hand-coded markup rather a javascript data structure.

If you can munge your data into a hierarchy of javascript objects in a prescribed format, there are plenty of other Vue tree components for that. I needed one to render hand-coded markup rather than an arbitrary hierarchy of data.


Live Demo


npm install vue-bonsai-tree --save


<div id='app'>
        <div slot='content' expand='more'>
            <div slot='collapse'>less</div>
            <bonsai-tree content='Grandkid'>Child</bonsai-tree>
<script src='vue.js'></script>
<script src='vue-bonsai-tree.js'></script>
    var app = new Vue({
        el: '#app',
        components: {
            'bonsai-tree': window['vue-bonsai-tree'].BonsaiTree


# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# run karma unit tests
npm run unit

# run nightwatch e2e tests
npm run e2e

# run all tests
npm test

# build minified release (vue-bonsai-tree.js)
npm release

Don't be intimidated by all the files. This project uses the vue-cli webpack boilerplate to get up and running with webpack, live reload, karma and nightwatch quickly. The only files you really need to touch will be:

  • src/components/bonsai-tree.vue
  • test/unit/specs/bonsai-tree.spec.js
  • test/e2e/specs/bonsai-tree.js

PRs welcome. Emiting expand/collapse events would be a nice feature. (15 min to code, 2 hours to write automated regression testing ;) More complete e2e testing would also be helpful.

Categories: Vue js