feat!: partial/experimental support for vue3/vite

Most notably this is lacking ssr support with vue3 pending vuejs/core#3070

see #148 for latest progress & status

Author: danielroe

package.json

@@ -61,7 +61,8 @@
   },
   "dependencies": {
     "minify-groq": "^1.0.0",
-    "sanity-typed-queries": "^0.7.5"
+    "sanity-typed-queries": "^0.7.5",
+    "vue-demi": "^0.7.1"
   },
   "devDependencies": {
     "@babel/core": "^7.13.8",
@@ -104,6 +105,11 @@
   },
   "peerDependencies": {
     "@vue/composition-api": "1.0.0-rc.3",
-    "vue": "^2"
+    "vue": "^2.0.0 || >=3.0.0-rc.0"
+  },
+  "peerDependenciesMeta": {
+    "@vue/composition-api": {
+      "optional": true
+    }
   }
 }

src/cache.ts

@@ -1,15 +1,15 @@
-import { VueConstructor } from 'vue'
+import type { VueConstructor } from 'vue'
 import {
   computed,
   getCurrentInstance,
   isRef,
-  onServerPrefetch,
   reactive,
   Ref,
   set,
   unref,
   watch,
-} from '@vue/composition-api'
+  Vue2,
+} from 'vue-demi'
 
 /**
  * Cached data, status of fetch, timestamp of last fetch, error
@@ -178,24 +178,28 @@ export function useCache<T, K = null>(
       }
     }
 
-    onServerPrefetch(async () => {
-      const k = unref(key)
-      try {
-        await fetch(k, verifyKey(k))
-        // eslint-disable-next-line
-      } catch {}
-      if (
-        ctx &&
-        cache[k] &&
-        !['loading', 'initialised'].includes(cache[k]?.[1])
-      ) {
-        if (ctx.nuxt) {
-          ctx.nuxt.vsanity[k] = cache[k].slice(0, 3)
-        } else {
-          ctx.vsanity[k] = cache[k].slice(0, 3)
+    if (Vue2) {
+      const { onServerPrefetch } = require('vue-demi')
+
+      onServerPrefetch(async () => {
+        const k = unref(key)
+        try {
+          await fetch(k, verifyKey(k))
+          // eslint-disable-next-line
+        } catch {}
+        if (
+          ctx &&
+          cache[k] &&
+          !['loading', 'initialised'].includes(cache[k]?.[1])
+        ) {
+          if (ctx.nuxt) {
+            ctx.nuxt.vsanity[k] = cache[k].slice(0, 3)
+          } else {
+            ctx.vsanity[k] = cache[k].slice(0, 3)
+          }
         }
-      }
-    })
+      })
+    }
   }
 
   const data = computed(() => {

src/image.ts

@@ -1,4 +1,4 @@
-import { Ref, inject, computed, InjectionKey } from '@vue/composition-api'
+import { Ref, inject, computed, InjectionKey } from 'vue-demi'
 
 import {
   FitMode,

src/index.ts

@@ -1,4 +1,4 @@
-import { provide, inject } from '@vue/composition-api'
+import { provide, inject } from 'vue-demi'
 
 import { ClientConfig } from '@sanity/client'
 

src/query.ts

@@ -1,11 +1,4 @@
-import {
-  computed,
-  inject,
-  watch,
-  InjectionKey,
-  Ref,
-  isRef,
-} from '@vue/composition-api'
+import { computed, inject, watch, InjectionKey, Ref, isRef } from 'vue-demi'
 import minifier from 'minify-groq'
 import type { SanityClient } from '@sanity/client'
 import type { QueryBuilder } from 'sanity-typed-queries'

yarn.lock

@@ -10734,6 +10734,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vue-demi@npm:^0.7.1":
+  version: 0.7.1
+  resolution: "vue-demi@npm:0.7.1"
+  peerDependencies:
+    "@vue/composition-api": ^1.0.0-beta.1
+    vue: ^2.6.0 || >=3.0.0-rc.1
+  peerDependenciesMeta:
+    "@vue/composition-api":
+      optional: true
+  bin:
+    vue-demi-fix: bin/vue-demi-fix.js
+    vue-demi-switch: bin/vue-demi-switch.js
+  checksum: 95e3a6a17dbad438daca358d9184a0e662a289603e6e5dfa6b7f8fc3d4e1eda2005317fc6b58f37ebf62842d506ee59c6fc5a7d41d1ed5b49a15a6169acbb695
+  languageName: node
+  linkType: hard
+
 "vue-sanity@workspace:.":
   version: 0.0.0-use.local
   resolution: "vue-sanity@workspace:."
@@ -10775,11 +10791,15 @@ __metadata:
     siroc: ^0.7.0
     typescript: ^4.2.3
     vue: 2.6.12
+    vue-demi: ^0.7.1
     vue-server-renderer: ^2.6.12
     vue-template-compiler: ^2.6.12
   peerDependencies:
     "@vue/composition-api": 1.0.0-rc.3
-    vue: ^2
+    vue: ^2.0.0 || >=3.0.0-rc.0
+  peerDependenciesMeta:
+    "@vue/composition-api":
+      optional: true
   languageName: unknown
   linkType: soft