How to integrate jointjs with Vue 2 and webpack

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.

1 Answer

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></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>