From f45d1fed72c05efae9f48e30e4bbb5f4bd6b3592 Mon Sep 17 00:00:00 2001
From: rdunk <rupert@rupertdunk.com>
Date: Fri, 2 Feb 2024 14:37:12 +0000
Subject: [PATCH] feat: support visual editing

---
 .nuxtrc                                      |   4 +
 index.d.ts                                   |  55 ++-
 package.json                                 |   7 +-
 playground/cms/sanity.config.ts              |  14 +-
 playground/nuxt.config.js                    |   7 +
 playground/pages/index.vue                   |  49 +--
 playground/pages/movie/[slug].vue            |  15 +-
 pnpm-lock.yaml                               | 118 ++++--
 src/module.ts                                | 256 +++++++++++--
 src/runtime/client.ts                        |   1 -
 src/runtime/composables.ts                   |  19 +-
 src/runtime/nitro-imports.ts                 |  15 +-
 src/runtime/plugin.ts                        |   2 +-
 src/runtime/visual-editing/composables.ts    | 358 +++++++++++++++++++
 src/runtime/visual-editing/draft/disable.ts  |   6 +
 src/runtime/visual-editing/draft/enable.ts   |  32 ++
 src/runtime/visual-editing/plugins/client.ts |   5 +
 src/runtime/visual-editing/plugins/server.ts |  21 ++
 src/types/client.ts                          |   3 +
 19 files changed, 894 insertions(+), 93 deletions(-)
 create mode 100644 .nuxtrc
 create mode 100644 src/runtime/visual-editing/composables.ts
 create mode 100644 src/runtime/visual-editing/draft/disable.ts
 create mode 100644 src/runtime/visual-editing/draft/enable.ts
 create mode 100644 src/runtime/visual-editing/plugins/client.ts
 create mode 100644 src/runtime/visual-editing/plugins/server.ts
 create mode 100644 src/types/client.ts

diff --git a/.nuxtrc b/.nuxtrc
new file mode 100644
index 000000000..86df7d9d2
--- /dev/null
+++ b/.nuxtrc
@@ -0,0 +1,4 @@
+# sanity.apiVersion=2021-03-25
+# sanity.stega=true
+# sanity.visualEditing.token=token
+# sanity.visualEditing.studioUrl="http://localhost:3333"
\ No newline at end of file
diff --git a/index.d.ts b/index.d.ts
index 893e63406..6c094815e 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -1,7 +1,60 @@
-import { SanityHelper } from './src/runtime/composables'
+import type { ClientPerspective, StegaConfig } from '@sanity/client'
+import type { SanityHelper } from '#sanity-composables'
+
+type nullish = null | undefined | void
 
 declare module '#app' {
   interface NuxtApp {
     _sanity?: Record<string, SanityHelper>
   }
 }
+
+declare module 'nuxt/schema' {
+  interface RuntimeConfig {
+    sanity: {
+      visualEditing:
+        | {
+            draftMode:
+              | false
+              | {
+                  enable: string
+                  disable: string
+                }
+            mode: 'global' | 'component'
+            studioUrl: string
+            draftModeId: string
+            token: string
+          }
+        | undefined
+    }
+  }
+
+  interface PublicRuntimeConfig {
+    sanity: {
+      additionalClients: Record<string, any>
+      apiVersion: string
+      dataset: string
+      disableSmartCdn: boolean
+      perspective: ClientPerspective
+      projectId: string
+      stega: StegaConfig
+      token: string
+      useCdn: boolean
+      visualEditing:
+        | {
+            draftMode:
+              | false
+              | {
+                  enable: string
+                  disable: string
+                }
+            mode: 'global' | 'component'
+            studioUrl: string
+          }
+        | nullish
+    }
+    withCredentials: boolean
+  }
+}
+
+export {}
diff --git a/package.json b/package.json
index 560efb4a8..2dd7e4841 100755
--- a/package.json
+++ b/package.json
@@ -49,6 +49,9 @@
   "dependencies": {
     "@nuxt/kit": "^3.9.0",
     "@portabletext/types": "^2.0.8",
+    "@sanity/core-loader": "^1.3.10",
+    "@sanity/overlays": "^2.3.9",
+    "@sanity/preview-url-secret": "^1.4.1",
     "chalk": "^5.3.0",
     "defu": "^6.1.3",
     "knitwork": "^1.0.0",
@@ -61,7 +64,9 @@
     "@nuxt/module-builder": "0.5.5",
     "@nuxt/schema": "3.9.0",
     "@nuxt/test-utils": "3.9.0",
-    "@sanity/client": "6.11.2",
+    "@sanity/client": "6.12.3",
+    "@sanity/core-loader": "^1.3.3",
+    "@sanity/overlays": "^2.3.1",
     "@vitest/coverage-v8": "1.1.1",
     "@vue/test-utils": "2.4.3",
     "bumpp": "9.2.1",
diff --git a/playground/cms/sanity.config.ts b/playground/cms/sanity.config.ts
index 69df8204d..a2b3fdd6b 100644
--- a/playground/cms/sanity.config.ts
+++ b/playground/cms/sanity.config.ts
@@ -1,7 +1,9 @@
-import { createConfig } from 'sanity'
 import { deskTool } from 'sanity/desk'
+import { presentationTool } from 'sanity/presentation'
+import { createConfig } from 'sanity'
 import { visionTool } from '@sanity/vision'
 import { schemaTypes } from './schemas'
+import { debugSecrets } from '@sanity/preview-url-secret/sanity-plugin-debug-secrets'
 
 export default createConfig({
   name: 'default',
@@ -12,6 +14,16 @@ export default createConfig({
   plugins: [
     deskTool(),
     visionTool(),
+    presentationTool({
+      previewUrl: {
+        origin: 'http://localhost:3000',
+        draftMode: {
+          enable: '/draft/enable',
+          disable: '/draft/disable',
+        },
+      },
+    }),
+    debugSecrets(),
   ],
 
   schema: {
diff --git a/playground/nuxt.config.js b/playground/nuxt.config.js
index 52dc8882c..da6ff4f05 100644
--- a/playground/nuxt.config.js
+++ b/playground/nuxt.config.js
@@ -9,8 +9,15 @@ export default defineNuxtConfig({
     globalHelper: true,
     projectId: 'j1o4tmjp',
     dataset: 'production',
+    apiVersion: '2021-03-25',
     additionalClients: {
       another: {},
     },
+    visualEditing: {
+      stega: true,
+      draftMode: true,
+      token: process.env.NUXT_SANITY_VISUAL_EDITING_TOKEN,
+      studioUrl: 'http://localhost:3333',
+    },
   },
 })
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
index fef5a34b1..4571438cf 100644
--- a/playground/pages/index.vue
+++ b/playground/pages/index.vue
@@ -1,27 +1,30 @@
 <template>
-  <div
-    class="bg-gray-300 grid grid-flow-col grid-rows-3 p-8 overflow-x-hidden min-h-screen"
-  >
-    <h2>Project ID: {{ $sanity.config.projectId }}</h2>
-    <NuxtLink
-      v-for="{ title, poster, slug } in movies"
-      :key="title"
-      :to="`/movie/${slug}`"
-      class="flex w-64 h-48 relative justify-start"
+  <div>
+    <div
+      class="bg-gray-300 grid grid-flow-col grid-rows-3 p-8 overflow-x-hidden min-h-screen"
     >
-      <div
-        class="py-2 px-4 left-0 bottom-0 mb-4 flex-grow absolute bg-gray-100 rounded shadow-md font-semibold text-gray-800"
+      <h2>Project ID: {{ $sanity.config.projectId }}</h2>
+      <NuxtLink
+        v-for="({ title, poster, slug }, i) in movies"
+        :key="title"
+        :to="`/movie/${slug}`"
+        class="flex w-64 h-48 relative justify-start"
       >
-        {{ title }}
-      </div>
+        <div
+          class="py-2 px-4 left-0 bottom-0 mb-4 flex-grow absolute bg-gray-100 rounded shadow-md font-semibold text-gray-800"
+          :data-sanity="encodeDataAttribute([i, 'title'])"
+        >
+          {{ title }}
+        </div>
 
-      <SanityImage
-        class="object-contain w-48"
-        :asset-id="poster"
-        w="128"
-        auto="format"
-      />
-    </NuxtLink>
+        <SanityImage
+          class="object-contain w-48"
+          :asset-id="poster"
+          w="128"
+          auto="format"
+        />
+      </NuxtLink>
+    </div>
   </div>
 </template>
 
@@ -38,7 +41,7 @@ interface QueryResult {
   slug: string
 }
 
-const sanity = useSanity()
-
-const { data: movies } = await useAsyncData<QueryResult[]>('movies', () => sanity.fetch(query))
+const { data: movies, encodeDataAttribute } = await useSanityQuery<
+  QueryResult[]
+>(query)
 </script>
diff --git a/playground/pages/movie/[slug].vue b/playground/pages/movie/[slug].vue
index 90c6b96d7..329cd9b02 100644
--- a/playground/pages/movie/[slug].vue
+++ b/playground/pages/movie/[slug].vue
@@ -1,7 +1,9 @@
 <template>
   <div class="p-4">
     <template v-if="details">
-      <p><strong>Title</strong>: {{ details.title }}</p>
+      <p :data-sanity="encodeDataAttribute(['title'])">
+        <strong>Title</strong>: {{ details.title }}
+      </p>
       <p>
         <strong>Release date</strong>:
         {{
@@ -24,7 +26,9 @@
         project-id="j1o4tmjp"
         asset-id="image-e22a88d23751a84df81f03ef287ae85fc992fe12-780x1170-jpg"
       />
-      <SanityContent :blocks="details.overview" />
+      <div :data-sanity="encodeDataAttribute(['overview'])">
+        <SanityContent :blocks="details.overview" />
+      </div>
     </template>
     <template v-else>
       Loading ...
@@ -56,7 +60,8 @@ interface QueryResult {
 }
 
 const route = useRoute()
-const { data: details } = await useSanityQuery<QueryResult>(query, {
-  slug: route.params.slug,
-})
+const { data: details, encodeDataAttribute } =
+  await useSanityQuery<QueryResult>(query, {
+    slug: route.params.slug,
+  })
 </script>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7d0e7e005..13de94367 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -19,6 +19,15 @@ importers:
       '@portabletext/types':
         specifier: ^2.0.8
         version: 2.0.8
+      '@sanity/core-loader':
+        specifier: ^1.3.10
+        version: 1.3.10(@sanity/client@6.12.3)
+      '@sanity/overlays':
+        specifier: ^2.3.9
+        version: 2.3.9
+      '@sanity/preview-url-secret':
+        specifier: ^1.4.1
+        version: 1.4.1(@sanity/client@6.12.3)
       chalk:
         specifier: ^5.3.0
         version: 5.3.0
@@ -51,8 +60,8 @@ importers:
         specifier: 3.9.0
         version: 3.9.0(@vue/test-utils@2.4.3)(h3@1.9.0)(happy-dom@13.3.1)(rollup@3.29.4)(vite@5.0.10)(vitest@1.1.1)(vue-router@4.2.5)(vue@3.4.3)
       '@sanity/client':
-        specifier: 6.11.2
-        version: 6.11.2
+        specifier: 6.12.3
+        version: 6.12.3
       '@vitest/coverage-v8':
         specifier: 1.1.1
         version: 1.1.1(vitest@1.1.1)
@@ -2677,7 +2686,7 @@ packages:
       chalk: 4.1.2
       esbuild: 0.19.11
       esbuild-register: 3.5.0(esbuild@0.19.11)
-      get-it: 8.4.4
+      get-it: 8.4.5
       golden-fleece: 1.0.9
       node-machine-id: 1.1.12
       pkg-dir: 5.0.0
@@ -2685,25 +2694,25 @@ packages:
       - supports-color
     dev: false
 
-  /@sanity/client@6.10.0:
-    resolution: {integrity: sha512-TavtxGB6NWjro2BTGXSkzXNMKFZbS2il1ItV3IdRvO0luLqS31eIz37+5X4CmCC8hGFe6fDoCjnH/iJ81vKM7g==}
+  /@sanity/client@6.11.2:
+    resolution: {integrity: sha512-loJF1MxnRgFL/vq7EPg/zhttzAy8Ka71Ip0zge1ksmzUt3PeEN27ZCnkYj8O7Mt1x9qALbdj+owXWqcNEF/lIA==}
     engines: {node: '>=14.18'}
     dependencies:
       '@sanity/eventsource': 5.0.1
       '@vercel/stega': 0.1.0
-      get-it: 8.4.4
+      get-it: 8.4.5
       rxjs: 7.8.1
     transitivePeerDependencies:
       - supports-color
     dev: false
 
-  /@sanity/client@6.11.2:
-    resolution: {integrity: sha512-loJF1MxnRgFL/vq7EPg/zhttzAy8Ka71Ip0zge1ksmzUt3PeEN27ZCnkYj8O7Mt1x9qALbdj+owXWqcNEF/lIA==}
+  /@sanity/client@6.12.3:
+    resolution: {integrity: sha512-oA9LkDZOpVN8nciGb6/h+1r4ElH0IUTC3bHyBdVsxB5namdWBJKZzuVjJiWQlsK8up7U1xsATB4hyimSgUCSjA==}
     engines: {node: '>=14.18'}
     dependencies:
       '@sanity/eventsource': 5.0.1
       '@vercel/stega': 0.1.0
-      get-it: 8.4.5
+      get-it: 8.4.6
       rxjs: 7.8.1
     transitivePeerDependencies:
       - supports-color
@@ -2712,6 +2721,16 @@ packages:
     resolution: {integrity: sha512-Mk7FRDtxz/U2SRlRM0BvUI62jU26W62aYsipaKFt/dk0rOyYa9yzfaojSM/QmW0E4W/nOw74RBA/HrapXUw+2Q==}
     engines: {node: '>=18.0.0'}
 
+  /@sanity/core-loader@1.3.10(@sanity/client@6.12.3):
+    resolution: {integrity: sha512-bGJxRPYIiKjhEA2OMcGA0ems6QodOtyMFrQ7jJNRX7+3/WJXh4rOnV+t7GzYtV7RJpGrz7CvgbP3BUPegpXDBQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@sanity/client': ^6.12.3
+    dependencies:
+      '@sanity/client': 6.12.3
+      async-cache-dedupe: 2.0.0
+    dev: false
+
   /@sanity/diff-match-patch@3.1.1:
     resolution: {integrity: sha512-dSZqGeYjHKGIkqAzGqLcG92LZyJGX+nYbs/FWawhBbTBDWi21kvQ0hsL3DJThuFVWtZMWTQijN3z6Cnd44Pf2g==}
     engines: {node: '>=14.18'}
@@ -2738,7 +2757,7 @@ packages:
     dependencies:
       archiver: 5.3.2
       debug: 3.2.7
-      get-it: 8.4.4
+      get-it: 8.4.5
       lodash: 4.17.21
       mississippi: 4.0.0
       p-queue: 2.4.2
@@ -2752,13 +2771,13 @@ packages:
     resolution: {integrity: sha512-wtMYcV5GIDIhVyF/jjmdwq1GdlK07dRL40XMns73VbrFI7FteRltxv48bhYVZPcLkRXb0SHjpDS/icj9/yzbVA==}
     dev: false
 
-  /@sanity/groq-store@5.3.7(@sanity/client@6.10.0):
+  /@sanity/groq-store@5.3.7(@sanity/client@6.11.2):
     resolution: {integrity: sha512-wrAr7PKfbdRvfiC5m7unjH4x5XGZV+vMkk/CwrdHRs+39kuWWJvkwhVNRTS6iWTrTMgpMIe/H1kRrkle0PieDQ==}
     engines: {node: '>=18'}
     peerDependencies:
       '@sanity/client': ^6.10.0
     dependencies:
-      '@sanity/client': 6.10.0
+      '@sanity/client': 6.11.2
       mnemonist: 0.39.6
     dev: false
 
@@ -2785,7 +2804,7 @@ packages:
       '@sanity/uuid': 3.0.2
       debug: 3.2.7
       file-url: 2.0.2
-      get-it: 8.4.4
+      get-it: 8.4.5
       get-uri: 2.0.4
       globby: 10.0.2
       gunzip-maybe: 1.4.2
@@ -2823,6 +2842,16 @@ packages:
       - supports-color
     dev: false
 
+  /@sanity/overlays@2.3.9:
+    resolution: {integrity: sha512-GmZAgB1gCcUcXtAHc7sm2d4m50MGNvj7YpUwdd4xum4pRUQtRs5braw85wqddPh26rgAJ+IGLdhNs8xz9sqaNg==}
+    engines: {node: '>=16.14'}
+    dependencies:
+      '@vercel/stega': 0.1.0
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-is: 18.2.0
+      scroll-into-view-if-needed: 3.1.0
+
   /@sanity/portable-text-editor@3.23.4(react-dom@18.2.0)(react@18.2.0)(rxjs@7.8.1)(styled-components@6.1.6):
     resolution: {integrity: sha512-mWJ3VFOtJIu7n4ptXeENZOcIT/UPkYlErymEGRKAOtYmswc6/lHvfx+QX/PN0E9zcIgGhcgT8/4OH9tkewY7IA==}
     engines: {node: '>=18'}
@@ -2848,7 +2877,7 @@ packages:
       - supports-color
     dev: false
 
-  /@sanity/presentation@1.4.0(@sanity/client@6.10.0)(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)(sanity@3.23.4)(styled-components@6.1.6):
+  /@sanity/presentation@1.4.0(@sanity/client@6.11.2)(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)(sanity@3.23.4)(styled-components@6.1.6):
     resolution: {integrity: sha512-BDT7I7kfWuwqnOl34p0ytyUFrA+0/WT1zm0daSe0g8X8nKi++7HCa2fEbbRy49EG4tkrvWz14/aEtmiOImvMDw==}
     engines: {node: '>=16.14'}
     peerDependencies:
@@ -2867,10 +2896,10 @@ packages:
       styled-components:
         optional: true
     dependencies:
-      '@sanity/client': 6.10.0
-      '@sanity/groq-store': 5.3.7(@sanity/client@6.10.0)
+      '@sanity/client': 6.11.2
+      '@sanity/groq-store': 5.3.7(@sanity/client@6.11.2)
       '@sanity/icons': 2.8.0(react@18.2.0)
-      '@sanity/preview-url-secret': 1.4.1(@sanity/client@6.10.0)(@sanity/icons@2.8.0)(sanity@3.23.4)
+      '@sanity/preview-url-secret': 1.4.1(@sanity/client@6.11.2)(@sanity/icons@2.8.0)(sanity@3.23.4)
       '@sanity/ui': 2.0.0-beta.13(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)(styled-components@6.1.6)
       '@types/lodash.isequal': 4.5.8
       framer-motion: 10.16.16(react-dom@18.2.0)(react@18.2.0)
@@ -2886,7 +2915,7 @@ packages:
       - react-is
     dev: false
 
-  /@sanity/preview-url-secret@1.4.1(@sanity/client@6.10.0)(@sanity/icons@2.8.0)(sanity@3.23.4):
+  /@sanity/preview-url-secret@1.4.1(@sanity/client@6.11.2)(@sanity/icons@2.8.0)(sanity@3.23.4):
     resolution: {integrity: sha512-EkV90NPBrMFc4YTKQsC3iMM8cw6Rs4ttVyfs2ou5ZKsKnU8bsr1hE/X9UB7nEXKc1h/qCXHVn8oKZ7uFdeI1DA==}
     engines: {node: '>=18'}
     peerDependencies:
@@ -2899,12 +2928,29 @@ packages:
       sanity:
         optional: true
     dependencies:
-      '@sanity/client': 6.10.0
+      '@sanity/client': 6.11.2
       '@sanity/icons': 2.8.0(react@18.2.0)
       '@sanity/uuid': 3.0.2
       sanity: 3.23.4(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0)(styled-components@6.1.6)
     dev: false
 
+  /@sanity/preview-url-secret@1.4.1(@sanity/client@6.12.3):
+    resolution: {integrity: sha512-EkV90NPBrMFc4YTKQsC3iMM8cw6Rs4ttVyfs2ou5ZKsKnU8bsr1hE/X9UB7nEXKc1h/qCXHVn8oKZ7uFdeI1DA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@sanity/client': ^6.10.0
+      '@sanity/icons': ^2.8.0
+      sanity: ^3.23.4
+    peerDependenciesMeta:
+      '@sanity/icons':
+        optional: true
+      sanity:
+        optional: true
+    dependencies:
+      '@sanity/client': 6.12.3
+      '@sanity/uuid': 3.0.2
+    dev: false
+
   /@sanity/schema@3.23.4:
     resolution: {integrity: sha512-QjnMmsK78SeVRomOHOgJwUqqxF4XsURLId0nq+BBk5MMHBcm/3tQYhIlRkRowUkM0gJJvECzSPyqoj/e0xnXZw==}
     dependencies:
@@ -4195,6 +4241,13 @@ packages:
     transitivePeerDependencies:
       - rollup
 
+  /async-cache-dedupe@2.0.0:
+    resolution: {integrity: sha512-SrW6PbmCHRQBSpPG8mkPIZZC5AgC08sbzl56GyGemBLVdVUl8mQW4+WCYHp5XZfixIdkL40jKf3UlT/P6Q3p5w==}
+    dependencies:
+      mnemonist: 0.39.6
+      safe-stable-stringify: 2.4.3
+    dev: false
+
   /async-sema@3.1.1:
     resolution: {integrity: sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==}
 
@@ -5976,6 +6029,24 @@ packages:
       tunnel-agent: 0.6.0
     transitivePeerDependencies:
       - supports-color
+    dev: false
+
+  /get-it@8.4.6:
+    resolution: {integrity: sha512-omefjdbyRb2rRt0tnrZlbeWx9oZJm66o88K8JlYn13xELn+0+d6mJZOQHrJAdC3vxeJ4t/NHa4wh7Wlh+nvEJA==}
+    engines: {node: '>=14.0.0'}
+    dependencies:
+      debug: 4.3.4
+      decompress-response: 7.0.0
+      follow-redirects: 1.15.4(debug@4.3.4)
+      into-stream: 6.0.0
+      is-plain-object: 5.0.0
+      is-retry-allowed: 2.2.0
+      is-stream: 2.0.1
+      parse-headers: 2.0.5
+      progress-stream: 2.0.0
+      tunnel-agent: 0.6.0
+    transitivePeerDependencies:
+      - supports-color
 
   /get-port-please@3.1.1:
     resolution: {integrity: sha512-3UBAyM3u4ZBVYDsxOQfJDxEa6XTbpBDrOjp4mf7ExFRt5BKs/QywQQiJsh2B+hxcZLSapWqCRvElUe8DnKcFHA==}
@@ -9886,6 +9957,11 @@ packages:
   /safe-buffer@5.2.1:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
 
+  /safe-stable-stringify@2.4.3:
+    resolution: {integrity: sha512-e2bDA2WJT0wxseVd4lsDP4+3ONX6HpMXQa1ZhFQ7SU+GjvORCmShbCMltrtIDfkYhVHrOcPtj+KhmDBdPdZD1g==}
+    engines: {node: '>=10'}
+    dev: false
+
   /safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
@@ -9916,7 +9992,7 @@ packages:
       '@sanity/bifur-client': 0.3.1
       '@sanity/block-tools': 3.23.4
       '@sanity/cli': 3.23.4
-      '@sanity/client': 6.10.0
+      '@sanity/client': 6.11.2
       '@sanity/color': 3.0.0-beta.9
       '@sanity/diff': 3.23.4
       '@sanity/diff-match-patch': 3.1.1
@@ -9929,7 +10005,7 @@ packages:
       '@sanity/logos': 2.1.4(@sanity/color@3.0.0-beta.9)(react@18.2.0)
       '@sanity/mutator': 3.23.4
       '@sanity/portable-text-editor': 3.23.4(react-dom@18.2.0)(react@18.2.0)(rxjs@7.8.1)(styled-components@6.1.6)
-      '@sanity/presentation': 1.4.0(@sanity/client@6.10.0)(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)(sanity@3.23.4)(styled-components@6.1.6)
+      '@sanity/presentation': 1.4.0(@sanity/client@6.11.2)(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)(sanity@3.23.4)(styled-components@6.1.6)
       '@sanity/schema': 3.23.4
       '@sanity/telemetry': 0.7.5
       '@sanity/types': 3.23.4
diff --git a/src/module.ts b/src/module.ts
index ad9c6e943..9754934cd 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -1,17 +1,63 @@
 import { readFileSync } from 'node:fs'
 import { fileURLToPath } from 'node:url'
-import { defineNuxtModule, requireModule, addTemplate, addComponentsDir, addImports, isNuxt3, addPlugin, isNuxt2, useLogger } from '@nuxt/kit'
+import crypto from 'crypto'
+import {
+  addComponentsDir,
+  addImports,
+  addPlugin,
+  addServerHandler,
+  addTemplate,
+  defineNuxtModule,
+  isNuxt2,
+  isNuxt3,
+  tryResolveModule,
+  requireModule,
+  resolveModule,
+  useLogger,
+} from '@nuxt/kit'
 
 import chalk from 'chalk'
 import { join, resolve } from 'pathe'
 import { defu } from 'defu'
-import { genExport } from 'knitwork'
+import { genExport, genTypeExport } from 'knitwork'
 
 import { name, version } from '../package.json'
 
 import type { SanityConfiguration } from './runtime/client'
+import type { ClientConfig, ClientPerspective, StegaConfig } from '@sanity/client'
 
-export interface SanityModuleOptions extends Partial<SanityConfiguration> {
+export interface SanityModuleVisualEditingOptions {
+  /**
+   * Enable draft mode or configure draft endpoints
+   */
+  draftMode?:
+    | boolean
+    | {
+        enable?: string
+        disable?: string
+      }
+  /**
+   * Enable visual editing at app level or per component
+   * @default 'global'
+   */
+  mode?: 'global' | 'component'
+  /**
+   * Read token for server side queries
+   * @required
+   */
+  token?: string
+  /**
+   * The URL of the Sanity Studio
+   * @required
+   */
+  studioUrl?: string
+  /**
+   * Enable stega
+   * @required
+   */
+  stega?: boolean
+}
+export type SanityModuleOptions = Partial<SanityConfiguration | ClientConfig> & {
   /** Globally register a $sanity helper throughout your app */
   globalHelper?: boolean
   /**
@@ -29,7 +75,11 @@ export interface SanityModuleOptions extends Partial<SanityConfiguration> {
   /**
    * Configuration for any additional clients
    */
-  additionalClients?: Record<string, Partial<SanityConfiguration>>
+  additionalClients?: Record<string, Partial<SanityConfiguration | ClientConfig>>
+  /**
+   * Configuration for visual editing
+   */
+  visualEditing?: SanityModuleVisualEditingOptions
 }
 
 export type ModuleOptions = SanityModuleOptions
@@ -57,10 +107,12 @@ export default defineNuxtModule<SanityModuleOptions>({
     },
   },
   defaults: nuxt => ({
-    dataset: 'production',
+    additionalClients: {},
     apiVersion: '1',
+    disableSmartCdn: false,
+    dataset: 'production',
+    perspective: 'raw',
     withCredentials: false,
-    additionalClients: {},
     ...getDefaultSanityConfig(resolve(nuxt.options.rootDir, './sanity.json')),
   }),
   async setup (options, nuxt) {
@@ -77,18 +129,80 @@ export default defineNuxtModule<SanityModuleOptions>({
       logger.info(`Enabling minimal client as ${chalk.bold('@sanity/client')} is not installed.`)
     }
 
+    if (options.visualEditing) {
+      try {
+        if (options.minimal) {
+          throw new Error('Minimal client is enabled.')
+        }
+        if (!options.visualEditing.token) {
+          throw new Error(`'token' is required.`)
+        }
+        if (!options.visualEditing.studioUrl) {
+          throw new Error(`'studioUrl' is required.`)
+        }
+        if (!(await tryResolveModule('@sanity/core-loader'))) {
+          throw new Error(
+            `${chalk.bold('@sanity/core-loader')} is not installed.`,
+          )
+        }
+        if (options.apiVersion === '1') {
+          throw new Error(
+            `The specified API Version must be ${chalk.bold(
+              '2021-03-25',
+            )} or later.`,
+          )
+        }
+      } catch (e) {
+        options.visualEditing = undefined
+        if (e instanceof Error) {
+          logger.warn(`Could not enable visual editing: ${e.message}`)
+        }
+      }
+    }
+
     // Final resolved configuration
-    nuxt.options.runtimeConfig.sanity = nuxt.options.runtimeConfig.sanity || {}
-    const { projectId, dataset } = nuxt.options.runtimeConfig.public.sanity = defu(nuxt.options.runtimeConfig.public.sanity, {
-      useCdn: options.useCdn,
-      projectId: options.projectId,
-      dataset: options.dataset,
-      apiVersion: options.apiVersion,
-      withCredentials: options.withCredentials,
-      token: options.token,
-      perspective: options.perspective || 'raw',
-      additionalClients: options.additionalClients,
-    })
+    const visualEditing = options.visualEditing && {
+      draftMode: (options.visualEditing.draftMode
+        ? defu(options.visualEditing.draftMode, {
+            enable: '/draft/enable',
+            disable: '/draft/disable',
+          })
+        : false) as { enable: string; disable: string } | false,
+      mode: options.visualEditing.mode || 'global',
+      studioUrl: options.visualEditing.studioUrl || '',
+    }
+
+    nuxt.options.runtimeConfig.sanity = {
+      ...(nuxt.options.runtimeConfig.sanity || {}),
+      visualEditing: options.visualEditing && {
+        ...visualEditing!,
+        draftModeId: visualEditing!.draftMode
+          ? crypto.randomBytes(16).toString('hex')
+          : '',
+        token: options.visualEditing.token || '',
+      },
+    }
+
+    const { projectId, dataset } = (nuxt.options.runtimeConfig.public.sanity =
+      defu(nuxt.options.runtimeConfig.public.sanity, {
+        additionalClients: options.additionalClients, // has default
+        apiVersion: options.apiVersion, // has default
+        dataset: options.dataset, // has default
+        disableSmartCdn: options.disableSmartCdn, // has default
+        perspective: options.perspective, // has default
+        projectId: options.projectId || '',
+        stega:
+          (options.visualEditing?.stega === true &&
+            ({
+              enabled: true,
+              studioUrl: options.visualEditing.studioUrl,
+            } as StegaConfig)) ||
+          {},
+        token: options.token || '',
+        useCdn: options.useCdn, // enforced
+        visualEditing: visualEditing,
+        withCredentials: options.withCredentials, // has default
+      }))
 
     if (!projectId) {
       logger.warn(`No Sanity project found. Make sure you specify a ${chalk.bold('projectId')} in your Sanity config.`)
@@ -97,14 +211,28 @@ export default defineNuxtModule<SanityModuleOptions>({
     }
 
     const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
+    const typesDir = fileURLToPath(new URL('./types', import.meta.url))
     nuxt.options.build.transpile.push(runtimeDir, '@nuxtjs/sanity')
 
+    const clientSpecifier = options.minimal
+      ? join(runtimeDir, 'client')
+      : '@sanity/client'
+
     addTemplate({
       filename: 'sanity-client.mjs',
+      getContents: () => genExport(clientSpecifier, ['createClient']),
+    })
+    addTemplate({
+      filename: 'sanity-config.ts',
       getContents: () =>
-        options.minimal
-          ? genExport(join(runtimeDir, 'client'), ['createClient'])
-          : genExport('@sanity/client', [{ name: 'createClient' }]),
+        genTypeExport(clientSpecifier, [
+          {
+            name: options.minimal
+              ? 'SanityConfiguration'
+              : 'ClientConfig',
+            as: 'SanityConfiguration',
+          },
+        ]),
     })
 
     if (options.globalHelper) {
@@ -116,27 +244,43 @@ export default defineNuxtModule<SanityModuleOptions>({
       }
     }
 
+    const visualEditingDir = join(runtimeDir, 'visual-editing')
+    const composablesDir = options.visualEditing ? visualEditingDir : runtimeDir
+
+
     addImports([
       { name: 'createClient', as: 'createSanityClient', from: '#build/sanity-client.mjs' },
       { name: 'groq', as: 'groq', from: join(runtimeDir, 'groq') },
-      { name: 'useSanity', as: 'useSanity', from: join(runtimeDir, 'composables') },
+      { name: 'useSanity', as: 'useSanity', from: join(composablesDir, 'composables') },
       { name: 'useLazySanityQuery', as: 'useLazySanityQuery', from: join(runtimeDir, 'composables') },
-      ...isNuxt3() ? [{ name: 'useSanityQuery', as: 'useSanityQuery', from: join(runtimeDir, 'composables') }] : [],
+      ...isNuxt3() ? [{ name: 'useSanityQuery', as: 'useSanityQuery', from: join(composablesDir, 'composables') }] : [],
     ])
 
-    nuxt.hook('prepare:types', ({ tsConfig }) => {
+    const disabled = isNuxt3() && !!options.visualEditing
+    addImports([
+      { name: 'useSanityLiveMode', as: 'useSanityLiveMode', from: join(visualEditingDir, 'composables'), disabled },
+      { name: 'useSanityOverlays', as: 'useSanityOverlays', from: join(visualEditingDir, 'composables'), disabled },
+      { name: 'useSanityVisualEditing', as: 'useSanityVisualEditing', from: join(visualEditingDir, 'composables'), disabled },
+    ])
+
+    nuxt.hook('prepare:types', async ({ tsConfig }) => {
+      const clientPath = await resolveModule(clientSpecifier)
+
       tsConfig.compilerOptions ||= {}
-      tsConfig.compilerOptions.paths['#sanity-client'] = [join(runtimeDir, 'client')]
+      tsConfig.compilerOptions.paths['#sanity-client'] = [clientPath]
+      tsConfig.compilerOptions.paths['#sanity-client/types'] = [
+        join(typesDir, 'client'),
+      ]
+      tsConfig.compilerOptions.paths['#sanity-composables'] = [
+        join(composablesDir, 'composables'),
+      ]
     })
 
     nuxt.hook('nitro:config', (config) => {
       if (config.imports === false) return
 
       config.virtual ||= {}
-      config.virtual['#sanity-client'] =
-        options.minimal
-          ? genExport(join(runtimeDir, 'client'), ['createClient'])
-          : genExport('@sanity/client', [{ name: 'createClient' }])
+      config.virtual['#sanity-client'] = genExport(clientSpecifier, ['createClient'])
 
       config.externals ||= {}
       config.externals.inline ||= []
@@ -164,5 +308,61 @@ export default defineNuxtModule<SanityModuleOptions>({
       path: join(runtimeDir, 'components'),
       extensions: ['js', 'ts', 'mjs'],
     })
+
+    if (options.visualEditing) {
+      // Plugin to check visual editing on app initialisation
+      addPlugin({
+        mode: 'server',
+        src: join(visualEditingDir, 'plugins', 'server'),
+      })
+
+      if (
+        options.visualEditing.mode === undefined ||
+        options.visualEditing.mode === 'global'
+      ) {
+        addPlugin({
+          mode: 'client',
+          src: join(visualEditingDir, 'plugins', 'client'),
+        })
+        logger.info(`Visual editing enabled globally.`)
+      } else {
+        logger.info(
+          `Call ${chalk.bold(
+            'useVisualEditing()',
+          )} in your application to enable visual editing.`,
+        )
+      }
+
+      if (options.visualEditing?.draftMode) {
+        const draftRoutes = defu(
+          options.visualEditing.draftMode === true
+            ? {}
+            : options.visualEditing.draftMode,
+          {
+            enable: '/draft/enable',
+            disable: '/draft/disable',
+          },
+        )
+
+        const draftRoutesDir = join(visualEditingDir, 'draft')
+
+        addServerHandler({
+          method: 'get',
+          route: draftRoutes.enable,
+          handler: join(draftRoutesDir, 'enable'),
+        })
+        addServerHandler({
+          method: 'get',
+          route: draftRoutes.disable,
+          handler: join(draftRoutesDir, 'disable'),
+        })
+
+        logger.info(
+          `Draft mode enabled. Added routes at: ${Object.values(draftRoutes)
+            .map(route => chalk.bold(route))
+            .join(', ')}.`,
+        )
+      }
+    }
   },
 })
diff --git a/src/runtime/client.ts b/src/runtime/client.ts
index 7e1e6ab79..52db58a77 100644
--- a/src/runtime/client.ts
+++ b/src/runtime/client.ts
@@ -7,7 +7,6 @@ import { $fetch } from 'ofetch'
 const apiHost = 'api.sanity.io'
 const cdnHost = 'apicdn.sanity.io'
 
-export type SanityClient = ReturnType<typeof createClient>
 
 export interface SanityConfiguration {
   useCdn?: boolean
diff --git a/src/runtime/composables.ts b/src/runtime/composables.ts
index 249feb83b..7cd0cbfd8 100644
--- a/src/runtime/composables.ts
+++ b/src/runtime/composables.ts
@@ -3,8 +3,15 @@ import { hash } from 'ohash'
 import { reactive } from 'vue'
 
 import type { AsyncData, AsyncDataOptions } from 'nuxt/app'
-import type { SanityClient, SanityConfiguration } from './client'
-import { useNuxtApp, useRuntimeConfig, useAsyncData, useLazyAsyncData, createSanityClient } from '#imports'
+import type { SanityClient } from '#sanity-client/types'
+import type { SanityConfiguration } from '#build/sanity-config'
+import {
+  useNuxtApp,
+  useRuntimeConfig,
+  useAsyncData,
+  useLazyAsyncData,
+  createSanityClient,
+} from '#imports'
 
 export interface SanityHelper {
   client: SanityClient
@@ -20,7 +27,7 @@ const createSanityHelper = (options: SanityConfiguration): SanityHelper => {
   return {
     client,
     config,
-    fetch: (...args) => client.fetch(...args),
+    fetch: client.fetch,
     setToken (token) {
       config.token = token
       client = createSanityClient(config)
@@ -44,7 +51,7 @@ export const useSanity = (client = 'default'): SanityHelper => {
   }
 
   if (client === 'default') {
-    nuxtApp._sanity.default = createSanityHelper(options)
+    nuxtApp._sanity.default = createSanityHelper(options as SanityConfiguration) // @todo casting
     return nuxtApp._sanity.default
   }
 
@@ -64,7 +71,7 @@ export const useSanityQuery = <T = unknown, E = Error> (query: string, _params?:
     options.watch = options.watch || []
     options.watch.push(params)
   }
-  return useAsyncData('sanity-' + hash(query + (params ? JSON.stringify(params) : '')), () => sanity.fetch<T>(query, params), options) as AsyncData<T | null, E>
+  return useAsyncData('sanity-' + hash(query + (params ? JSON.stringify(params) : '')), () => sanity.fetch<T>(query, params || {}), options) as AsyncData<T | null, E>
 }
 
 export const useLazySanityQuery = <T = unknown, E = Error> (query: string, _params?: Record<string, any>, _options: UseSanityQueryOptions<T> = {}): AsyncData<T | null, E> => {
@@ -75,5 +82,5 @@ export const useLazySanityQuery = <T = unknown, E = Error> (query: string, _para
     options.watch = options.watch || []
     options.watch.push(params)
   }
-  return useLazyAsyncData('sanity-' + hash(query + (params ? JSON.stringify(params) : '')), () => sanity.fetch<T>(query, params), options) as AsyncData<T | null, E>
+  return useLazyAsyncData('sanity-' + hash(query + (params ? JSON.stringify(params) : '')), () => sanity.fetch<T>(query, params || {}), options) as AsyncData<T | null, E>
 }
diff --git a/src/runtime/nitro-imports.ts b/src/runtime/nitro-imports.ts
index c76be5baf..56d424755 100644
--- a/src/runtime/nitro-imports.ts
+++ b/src/runtime/nitro-imports.ts
@@ -1,7 +1,7 @@
 import { defu } from 'defu'
 
-import type { SanityConfiguration } from './client'
-import type { SanityHelper } from './composables'
+import type { SanityConfiguration } from '#build/sanity-config'
+import type { SanityHelper } from '#sanity-composables'
 
 import { useRuntimeConfig } from '#imports'
 import { createClient } from '#sanity-client'
@@ -16,7 +16,7 @@ const createSanityHelper = (options: SanityConfiguration): SanityHelper => {
   return {
     client,
     config,
-    fetch: (...args) => client.fetch(...args),
+    fetch: client.fetch,
     setToken (token) {
       config.token = token
       client = createClient(config)
@@ -29,10 +29,15 @@ export const useSanity = (client = 'default'): SanityHelper => {
     return clients[client]
   }
 
-  const { additionalClients = {}, ...options } = defu($config.sanity, $config.public.sanity)
+  const {
+    additionalClients = {},
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    visualEditing,
+    ...options
+  } = defu($config.sanity, $config.public.sanity)
 
   if (client === 'default') {
-    clients.default = createSanityHelper(options)
+    clients.default = createSanityHelper(options as SanityConfiguration) // @todo casting
     return clients.default
   }
 
diff --git a/src/runtime/plugin.ts b/src/runtime/plugin.ts
index b0c3a952e..b4978e2a2 100644
--- a/src/runtime/plugin.ts
+++ b/src/runtime/plugin.ts
@@ -1,4 +1,4 @@
-import type { SanityHelper } from './composables'
+import type { SanityHelper } from '#sanity-composables'
 import { defineNuxtPlugin, useSanity } from '#imports'
 
 export default defineNuxtPlugin((nuxtApp) => {
diff --git a/src/runtime/visual-editing/composables.ts b/src/runtime/visual-editing/composables.ts
new file mode 100644
index 000000000..16f7fe580
--- /dev/null
+++ b/src/runtime/visual-editing/composables.ts
@@ -0,0 +1,358 @@
+import { defu } from 'defu'
+import { hash } from 'ohash'
+import { type Ref, reactive } from 'vue'
+import {
+  createQueryStore as createCoreQueryStore,
+  type QueryStore,
+  type QueryStoreState,
+} from '@sanity/core-loader'
+import {
+  defineEncodeDataAttribute,
+  type EncodeDataAttributeFunction,
+} from '@sanity/core-loader/encode-data-attribute'
+import type {
+  ClientPerspective,
+  ContentSourceMap,
+  QueryParams,
+} from '@sanity/client'
+import { enableOverlays } from '@sanity/overlays'
+import type { AsyncData, AsyncDataOptions } from 'nuxt/app'
+import type { SanityConfiguration } from '#build/sanity-config'
+import type { SanityClient } from '#sanity-client/types'
+import {
+  createSanityClient,
+  useNuxtApp,
+  useRuntimeConfig,
+  useAsyncData,
+} from '#imports'
+
+export interface SanityVisualEditingConfiguration {
+  draftMode:
+    | boolean
+    | {
+        enable?: string
+        disable?: string
+      }
+  mode: 'global' | 'component'
+  token?: string
+  studioUrl: string
+  draftModeId?: string
+}
+
+export interface SanityHelperConfiguration extends SanityConfiguration {
+  visualEditing?: SanityVisualEditingConfiguration
+}
+
+export interface SanityHelper {
+  client: SanityClient
+  config: SanityHelperConfiguration
+  fetch: SanityClient['fetch']
+  setToken: (token: string) => void
+  queryStore?: QueryStore
+}
+
+type AsyncDataRequestStatus = 'idle' | 'pending' | 'success' | 'error'
+interface AsyncDataExecuteOptions {
+  _initial?: boolean
+  dedupe?: boolean
+}
+
+interface UseSanityQueryOptions<T> extends AsyncDataOptions<T> {
+  client?: string
+  perspective?: 'previewDrafts' | 'published' | 'raw'
+}
+
+interface SanityQueryResponse<T> {
+  data: T
+  sourceMap?: ContentSourceMap
+  perspective?: ClientPerspective
+}
+
+type Noop = () => void
+
+interface _AsyncSanityData<DataT, ErrorT> {
+  data: Ref<DataT>
+  sourceMap: Ref<ContentSourceMap | null>
+  encodeDataAttribute: Ref<EncodeDataAttributeFunction | Noop>
+  pending: Ref<boolean>
+  refresh: (opts?: AsyncDataExecuteOptions) => Promise<{
+    data: DataT
+    sourceMap?: ContentSourceMap | null
+  }>
+  execute: (opts?: AsyncDataExecuteOptions) => Promise<{
+    data: DataT
+    sourceMap?: ContentSourceMap | null
+  }>
+  error: Ref<ErrorT | null>
+  status: Ref<AsyncDataRequestStatus>
+}
+
+export type AsyncSanityData<Data, Error> = _AsyncSanityData<Data, Error> &
+  Promise<_AsyncSanityData<Data, Error>>
+
+const createQueryStore = (
+  visualEditing: SanityVisualEditingConfiguration,
+  client: SanityClient,
+  tag?: string,
+) => {
+  const queryStore = createCoreQueryStore({
+    tag: tag || 'nuxt-loader',
+    client: false,
+    ssr: true,
+  })
+
+  if (import.meta.server) {
+    const serverClient = client.withConfig({
+      perspective: 'previewDrafts',
+      token: visualEditing?.token,
+      useCdn: false,
+    })
+    queryStore.setServerClient(serverClient)
+  }
+
+  return queryStore
+}
+
+const createSanityHelper = (
+  options: SanityHelperConfiguration,
+): SanityHelper => {
+  const config = { ...options }
+  const { visualEditing, ...clientConfig } = config;
+  let client = createSanityClient(clientConfig)
+
+  const visualEditingEnabled =
+    visualEditing &&
+    (!visualEditing.draftMode || useState('_sanity_visualEditing').value)
+
+  let queryStore = visualEditingEnabled
+    ? createQueryStore(visualEditing, client)
+    : undefined
+
+  return {
+    client,
+    config,
+    // @ts-expect-error
+    fetch: (...args) => client.fetch(...args),
+    queryStore,
+    setToken(token) {
+      config.token = token
+      client = createSanityClient(clientConfig)
+      if (queryStore && visualEditing) {
+        queryStore = createQueryStore(visualEditing, client)
+      }
+    },
+  }
+}
+
+export const useSanity = (client = 'default'): SanityHelper => {
+  const nuxtApp = useNuxtApp()
+  if (nuxtApp._sanity?.[client]) {
+    return nuxtApp._sanity[client]
+  }
+
+  nuxtApp._sanity = nuxtApp._sanity || {}
+
+  const $config = useRuntimeConfig()
+  const { additionalClients = {}, visualEditing, ...options } = defu(
+    $config.sanity,
+    $config.public.sanity,
+  )
+
+  if (client === 'default') {
+    nuxtApp._sanity.default = createSanityHelper({
+      ...options,
+      visualEditing: visualEditing || undefined,
+    } as SanityConfiguration) // @todo casting
+    return nuxtApp._sanity.default
+  }
+
+  nuxtApp._sanity[client] = createSanityHelper(
+    defu(additionalClients[client], options),
+  )
+  return nuxtApp._sanity[client]
+}
+
+export const useSanityQuery = <T = unknown, E = Error>(
+  query: string,
+  _params?: QueryParams,
+  _options: UseSanityQueryOptions<SanityQueryResponse<T | null>> = {},
+): AsyncSanityData<T | null, E> => {
+  const { client, perspective: _perspective, ...options } = _options
+  const sanity = useSanity(client)
+  const params = _params ? reactive(_params) : undefined
+  if (params) {
+    options.watch = options.watch || []
+    options.watch.push(params)
+  }
+
+  const perspective = (
+    _perspective || sanity.queryStore ? 'previewDrafts' : 'published'
+  ) as ClientPerspective
+
+  const queryKey =
+    'sanity-' + hash(query + (params ? JSON.stringify(params) : ''))
+
+  const data = ref<T | null>(null) as Ref<T | null> // Generic must be cast
+  const sourceMap = ref<ContentSourceMap | null>(null)
+  const encodeDataAttribute = ref<EncodeDataAttributeFunction | Noop>(() => {})
+  const updateRefs = (newData: T | null, newSourceMap?: ContentSourceMap) => {
+    data.value = newData
+    sourceMap.value = newSourceMap || null
+    encodeDataAttribute.value = defineEncodeDataAttribute(
+      newData,
+      newSourceMap,
+      sanity.config.visualEditing?.studioUrl,
+    )
+  }
+
+  let result: AsyncData<SanityQueryResponse<T | null>, E>
+
+  if (!sanity.queryStore) {
+    result = useAsyncData<SanityQueryResponse<T | null>, E>(
+      queryKey,
+      async () => {
+        const data = await sanity.fetch<T>(query, params || {}, {
+          perspective,
+        })
+        return { data }
+      },
+      options,
+    ) as AsyncData<SanityQueryResponse<T | null>, E>
+  } else {
+    let unsubscribe = () => {}
+
+    const setupFetcher = (
+      cb?: (state: Readonly<QueryStoreState<T, E>>) => void,
+    ) => {
+      unsubscribe()
+
+      const fetcher = sanity.queryStore!.createFetcherStore<T, E>(
+        query,
+        _params,
+        undefined,
+      )
+
+      unsubscribe = fetcher.subscribe(newSnapshot => {
+        if (newSnapshot.data) {
+          updateRefs(newSnapshot.data as unknown as T, newSnapshot.sourceMap)
+          cb?.(newSnapshot)
+        }
+      })
+    }
+
+    result = useAsyncData<SanityQueryResponse<T | null>, E>(
+      queryKey,
+      async () => {
+        if (import.meta.server) {
+          const client =
+            sanity.queryStore!.unstable__serverClient.instance || sanity.client
+          const { result: data, resultSourceMap: sourceMap } =
+            await client.fetch<T>(query, params || {}, {
+              perspective,
+              filterResponse: false,
+              resultSourceMap: 'withKeyArraySelector',
+            })
+          return sourceMap ? { data, sourceMap } : { data }
+        } else {
+          return new Promise<{
+            data: T | null
+            sourceMap: ContentSourceMap | undefined
+          }>(resolve => {
+            setupFetcher(newSnapshot => {
+              resolve({
+                data: newSnapshot.data || null,
+                sourceMap: newSnapshot.sourceMap,
+              })
+            })
+          })
+        }
+      },
+      options,
+    ) as AsyncData<SanityQueryResponse<T | null>, E>
+
+    if (result.status.value === 'success' && import.meta.client) {
+      setupFetcher()
+    }
+
+    onScopeDispose(unsubscribe)
+  }
+
+  return new Promise(resolve => {
+    result.then(value => {
+      updateRefs(value.data.value.data, value.data.value.sourceMap)
+      resolve({
+        ...result,
+        data,
+        sourceMap,
+        encodeDataAttribute,
+      })
+    })
+  }) as AsyncSanityData<T | null, E>
+}
+
+export function useSanityLiveMode({ client = 'default' }: { client?: string }) {
+  let disable = () => {}
+
+  if (import.meta.client) {
+    const sanity = useSanity(client)
+    if (sanity.queryStore) {
+      disable = sanity.queryStore.enableLiveMode({
+        client: sanity.client,
+      })
+    }
+  }
+
+  onScopeDispose(disable)
+
+  return disable
+}
+
+export function useSanityOverlays() {
+  let disable = () => {}
+
+  if (import.meta.client) {
+    const router = useRouter()
+    disable = enableOverlays({
+      history: {
+        subscribe: navigate => {
+          router.isReady().then(() => {
+            navigate({
+              type: 'replace',
+              url: router.currentRoute.value.fullPath,
+            })
+          })
+          return router.afterEach(to => {
+            // There is no mechanism to determine navigation type in a Vue Router navigation guard, so just push
+            // https://github.com/vuejs/vue-router/issues/1620
+            navigate({ type: 'push', url: to.fullPath })
+          })
+        },
+        update: update => {
+          if (update.type === 'push' || update.type === 'replace') {
+            router[update.type](update.url)
+          } else if (update.type === 'pop') {
+            router.back()
+          }
+        },
+      },
+    })
+  }
+
+  onScopeDispose(() => {
+    disable()
+  })
+
+  return disable
+}
+
+export function useSanityVisualEditing(
+  options: { client?: string } | Array<{ client?: string }> = {},
+) {
+  const _options = Array.isArray(options) ? options : [options]
+
+  useSanityOverlays()
+
+  _options.forEach(option => {
+    useSanityLiveMode(option)
+  })
+}
diff --git a/src/runtime/visual-editing/draft/disable.ts b/src/runtime/visual-editing/draft/disable.ts
new file mode 100644
index 000000000..163ca3649
--- /dev/null
+++ b/src/runtime/visual-editing/draft/disable.ts
@@ -0,0 +1,6 @@
+import { defineEventHandler, deleteCookie, sendRedirect } from 'h3'
+
+export default defineEventHandler(async event => {
+  deleteCookie(event, '__sanity_draft')
+  sendRedirect(event, '/')
+})
diff --git a/src/runtime/visual-editing/draft/enable.ts b/src/runtime/visual-editing/draft/enable.ts
new file mode 100644
index 000000000..d6309370b
--- /dev/null
+++ b/src/runtime/visual-editing/draft/enable.ts
@@ -0,0 +1,32 @@
+import { defineEventHandler, setCookie, sendRedirect } from 'h3'
+import { validatePreviewUrl } from '@sanity/preview-url-secret'
+
+export default defineEventHandler(async event => {
+  const $config = useRuntimeConfig()
+  const sanity = useSanity()
+
+  const client = sanity.client.withConfig({
+    token: $config.sanity.visualEditing!.token,
+  })
+
+  const { isValid, redirectTo = '/' } = await validatePreviewUrl(
+    client,
+    getRequestURL(event).toString(),
+  )
+
+  if (!isValid) {
+    throw createError({
+      statusCode: 401,
+      statusMessage: 'Invalid secret',
+    })
+  }
+
+  setCookie(event, '__sanity_draft', $config.sanity.visualEditing!.draftModeId, {
+    httpOnly: true,
+    sameSite: process.env.NODE_ENV !== 'development' ? 'none' : 'lax',
+    secure: process.env.NODE_ENV !== 'development',
+    path: '/',
+  })
+
+  await sendRedirect(event, redirectTo, 307)
+})
diff --git a/src/runtime/visual-editing/plugins/client.ts b/src/runtime/visual-editing/plugins/client.ts
new file mode 100644
index 000000000..805f3a1cd
--- /dev/null
+++ b/src/runtime/visual-editing/plugins/client.ts
@@ -0,0 +1,5 @@
+import { defineNuxtPlugin, useSanityVisualEditing } from '#imports'
+
+export default defineNuxtPlugin(() => {
+  useSanityVisualEditing()
+})
diff --git a/src/runtime/visual-editing/plugins/server.ts b/src/runtime/visual-editing/plugins/server.ts
new file mode 100644
index 000000000..d8a83c0cc
--- /dev/null
+++ b/src/runtime/visual-editing/plugins/server.ts
@@ -0,0 +1,21 @@
+import {
+  defineNuxtPlugin,
+  useRuntimeConfig,
+  useState,
+  useCookie,
+} from '#imports'
+
+export default defineNuxtPlugin(() => {
+  const enabled = useState('_sanity_visualEditing', () => false)
+
+  const $config = useRuntimeConfig()
+
+  const { visualEditing } = $config.sanity
+
+  if (visualEditing?.draftMode) {
+    const draftModeCookie = useCookie('__sanity_draft')
+    enabled.value = draftModeCookie.value === visualEditing.draftModeId
+  } else if (typeof visualEditing === 'object' && !visualEditing.draftMode) {
+    enabled.value = true
+  }
+})
diff --git a/src/types/client.ts b/src/types/client.ts
new file mode 100644
index 000000000..869db7ee1
--- /dev/null
+++ b/src/types/client.ts
@@ -0,0 +1,3 @@
+import { createClient } from '#sanity-client'
+
+export type SanityClient = ReturnType<typeof createClient>