Repository files navigation

This git repository is intended for instructional purposes. It is the source code that accompanies a JointJS+ blog post "Integration with Vue" which can be foundhere.

To run the following code, you will need aJointJS+ license that comes with the JointJS+ installable package filejoint-plus.tgz.

Make sure you have the following dependencies installed on your system:

• Node.js >= 16.0
• git

Clone this repository.

git clone git@github.com:clientIO/joint-plus-tutorial-vue.git

Change into thejoint-plus-tutorial-vue directory.

cd joint-plus-tutorial-vue

For this tutorial, you need to place your ownjoint-plus.tgz file in the root directory.

When that is completed, you can install the dependencies.

npm install

Your demo is now ready to start.

npm run dev

You should be able to view the demo athttp://localhost:5173/.

VSCode +Volar (and disable Vetur) +TypeScript Vue Plugin (Volar).

TypeScript cannot handle type information for.vue imports by default, so we replace thetsc CLI withvue-tsc for type checking. In editors, we needTypeScript Vue Plugin (Volar) to make the TypeScript language service aware of.vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented aTake Over Mode that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. RunExtensions: Show Built-in Extensions from VSCode's command palette
   2. FindTypeScript and JavaScript Language Features, right click and selectDisable (Workspace)
2. Reload the VSCode window by runningDeveloper: Reload Window from the command palette.