jsmind-vue

jsMind + Vue 3

This is a sample of how to use jsmind in your vue project.

Install jsMind

npm install jsmind

Create component

Create a new component and add to App

<script>
    import jsMind from 'jsmind'
    import 'jsmind/draggable-node'
    import 'jsmind/style/jsmind.css'

    export default {
        data() {
            return {
                jsmind_options : {
                    editable: true,
                    theme: 'primary',
                },
                jsmind_data : {
                    // ...
                }
            }
        },
        mounted() {
            let options = Object.assign(this.jsmind_options, {
                container: this.$refs.jsmind_container
            });
            let jm = new jsMind(options);
            jm.show(this.jsmind_data);
        }
    }
</script>

<style scoped>
    .jsmind-container {
        width: 1024px;
        height: 700px;
        border: solid 1px #ccc;
    }
</style>

<template>
    <div ref="jsmind_container" class="jsmind-container"></div>
</template>

Build your project

npm run build

More

jsMind project home: https://github.com/hizzgdev/jsmind