Here is how I integrated jKanban into my Vue 3 project, but this method should also work for React or older versions of Vue...
To begin, navigate to the source code repository at https://github.com/riktar/jkanban and make sure to only copy the jkanban.js file from the root directory (avoid copying from the dist folder which contains unnecessary files related to the dragula library). Paste this file into a designated folder within your own project.
Next, install the dragula library using the command: npm install dragula.
There were some necessary code modifications that had to be made. For instance, I encountered issues with the dragula library due to the absence of a global object, so I included the line: const gobal = window; either in the index.html file or another suitable location.
I also made amendments to the jKanban.js file. Initially, I updated the import statement to use ES6 syntax instead of require:
import dragula from "dragula"; // change from require
const jKanban = function () {
var self = this
var __DEFAULT_ITEM_HANDLE_OPTIONS = {
// etc. etc...
Lastly, towards the end of the file:
//init plugin
this.init()
}
export default jKanban; // export it
After making these adjustments, I successfully imported and utilized jKanban within one of my components as shown below:
import jKanban from "@/stuff/jkanban.js";
// ...stuff
const kanban = new jKanban(someOptionsIPreparedEarlier);
Remember to include the corresponding CSS file and manually update the library whenever needed.
:o)