vue で jointjs を動かす

昨日の react で jointjs を動かすのを vue でもやってみた。

初期化は次のようにすすめる

vue init webpack vue-jointjs
cd vue-jointjs
npm install --save jointjs

変更箇所は次の通り

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <JointJs/>
    <router-view/>
  </div>
</template>

<script>
import JointJs from '@/components/JointJs'

export default {
  name: 'App',
  components: {
    JointJs
  }
}
</script>

...

components/JointJs.vue

<template>
  <div>
    <div ref="myholder"></div>
  </div>
</template>

<script>
  import joint from 'jointjs'

  export default {
    name: 'JointDiagram',
    mounted(){
      let graph = new joint.dia.Graph
      let paper = new joint.dia.Paper({
        el: this.$refs.myholder,
        model: graph,
        width: 600,
        height: 100,
        gridSize: 1
      })
      let rect = new joint.shapes.standard.Rectangle();
      rect.position(100, 30);
      rect.resize(100, 40);
      rect.attr({
          body: {
            fill: 'blue'
          },
          label: {
            text: 'Hello',
            fill: 'white'
          }
      });
      rect.addTo(graph);

      let rect2 = rect.clone();
      rect2.translate(300, 0);
      rect2.attr('label/text', 'World!');
      rect2.addTo(graph);

      let link = new joint.shapes.standard.Link();
      link.source(rect);
      link.target(rect2);
      link.addTo(graph);
    }
  }
</script>

react とそんなに変わらない。domへの参照方法が違う。すべてのコードはここ
GitHub - ororog/vue-jointjs

react も vue も、外部ライブラリを使う場合は dom への参照を教えてあげれば動かせるっぽいことは理解できた。
ただ、データ Redux (Vuex) の流れに乗せるのは難しそう。