chore: use vue-demi for backward compat with vue2 (#70)

* chore: use vue-demi for backward compat with vue2

* chore: set vue-demi version

* docs: add vue 2 support section

Author: messenjer

README.md

@@ -4,7 +4,7 @@
 
 ![GIF of the demo being used](./readme/demo.gif)
 
-This is a thin wrapper around the great [SortableJS](https://github.com/SortableJS/Sortable) library. I had many issues migrating from Vue.Draggable to vue.draggable.next, and after briefly investigating I decided that it was too complicated and a smaller solution was the answer. This wrapper attempts to keep you as close to Sortable as possible.
+This is a thin wrapper around the great [SortableJS](https://github.com/SortableJS/Sortable) library for Vue 2 & 3. I had many issues migrating from Vue.Draggable to vue.draggable.next, and after briefly investigating I decided that it was too complicated and a smaller solution was the answer. This wrapper attempts to keep you as close to Sortable as possible.
 
 ### Why not use \<other library\>?
 
@@ -124,6 +124,14 @@ onEnd(event) { moveItemInArray(store.state.items, event.oldIndex, event.newIndex
 
 You may also want to see the SortableJS store documentation [here](https://github.com/SortableJS/Sortable#store).
 
+## Vue 2 support
+
+If you are using version prior to `vue@2.7.0`, `@vue/composition-api` is required to be installed to use SortableJS-vue3 with Vue 2.
+
+Everything else should be similar to the example above for Vue 3.
+
+Under the hood, we use [Vue Demi](https://github.com/vueuse/vue-demi) a tool that allows us to write Universal Vue Libraries for Vue 2 & 3.
+
 ## Development
 
 1. Run `yarn` to install dependencies

package.json

@@ -36,11 +36,17 @@
   },
   "dependencies": {
     "sortablejs": "^1.15.0",
-    "vue": "^3.2.37"
+    "vue": "^3.2.37",
+    "vue-demi": "^0.13.11"
   },
   "peerDependencies": {
     "sortablejs": "^1.15.0",
-    "vue": "^3.2.25"
+    "vue": "^2.0.0 || >=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@vue/composition-api": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@types/node": "18.11.18",

pnpm-lock.yaml

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Sortable from "./Sortable.vue";
-import { computed, ref } from "vue";
+import { computed, ref } from "vue-demi";
 import type { SortableOptions } from "sortablejs";
 import type { AutoScrollOptions } from "sortablejs/plugins";
 

src/components/HelloWorld.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, PropType, watch, onUnmounted, computed, useAttrs, Ref } from "vue";
+import { ref, PropType, watch, onUnmounted, computed, useAttrs, Ref } from "vue-demi";
 import Sortable, { SortableOptions } from "sortablejs";
 import type { AutoScrollOptions } from "sortablejs/plugins";
 

src/components/Sortable.vue

@@ -1,4 +1,4 @@
-import { createApp } from "vue";
+import { createApp } from "vue-demi";
 import App from "./App.vue";
 
 createApp(App).mount("#app");

src/main.ts

@@ -10,6 +10,9 @@ export default defineConfig({
     preserveSymlinks: false,
   },
   logLevel: "info",
+  optimizeDeps: {
+    exclude: ['vue-demi']
+  },
   build: {
     target: "esnext",
     minify: "terser",