How to integrate jointjs with Vue 2 and webpack

Question

I am very new to vue js and webpack and wanted to integrate jointjs with vue 2 or webpack. I tried searching but couldn't find related article with jointjs and vue 2. Have anyone integrated the jointjs with Vue2 or webpack, is there any sample code available for reference? Any help would be highly appreciated.

Thanks.

How do you envision them being integrated? In general, you would write [wrapper components](https://vuejs.org/v2/examples/select2.html) for things like this. — Roy J, Apr 19 '17 at 14:44

score 4 · Accepted Answer · answered Apr 20 '17 at 08:49

First you need to add the necessary components to the project, in particular the jointjs itself npm install jointjs --save (I work with npm), then the packages on which it depends also through npm (in my opinion the backbone and the rest ...). Next we connect them to the file where vue is connected, etc. (I have this app.js) for the following example:

window.$ = require('jquery');
window.joint = require('jointjs');

In any component I can already use it in this way let graph = new joint.dia.Graph; Run the assembly of the file via webpack (I have it build.js, do not forget to attach this file in the template).

PS In the examples below there are no all dependencies and it does not work, these are just examples of my code

my app.js:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Vuex from 'vuex'

Vue.use(Vuex);
Vue.use(VueRouter);

import Home from './Components/Home.vue'
import Users from './Components/Users.vue'
import Calculator from './Components/Calculate.vue'

window.$ = require('jquery');
window.joint = require('jointjs');

import { store } from './store'

const routes = [
    { path: '/', component: Home },
    { path: '/users/:id?', component: Users },
    { path: '/calculator', component: Calculator }
];

const router = new VueRouter({
    mode: 'history',
    routes
});

Vue.component('index', require('./Components/Test.vue'));

const app = new Vue({
    el: '#app',
    router,
    store
});

my webpack.config.js

"use strict";

module.exports = {
    entry: './js/app.js',
    output: {
        filename: './js/bundle.js'
    },
    resolve: {
        alias: {
            vue: 'vue/dist/vue.js'
        }
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    }
};

my Components/Home.vue

<template>
    <div>
        <h1>Home</h1>
        <div id="myholder"></div>
    </div>
</template>

<script>
    export default {
        created() {
            let graph = new joint.dia.Graph;

            let paper = new joint.dia.Paper({
                el: $('#myholder'),
                width: 600,
                height: 200,
                model: graph,
                gridSize: 1
            });

            let rect = new joint.shapes.basic.Rect({
                position: { x: 100, y: 30 },
                size: { width: 100, height: 30 },
                attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } }
            });

            let rect2 = rect.clone();
            rect2.translate(300);

            let link = new joint.dia.Link({
                source: { id: rect.id },
                target: { id: rect2.id }
            });

            graph.addCells([rect, rect2, link]);
        }
    }
</script>

I've tried your approach and it seems that when the **created()** hook is being called the html element has not rendered yet which causes an error: `Cannot read property ‘ownerDocument’ of undefined` I've changes the **created()** to **mounted()** and it helped. — Supervision, May 23 '18 at 14:37

How to integrate jointjs with Vue 2 and webpack

1 Answers1