@nuxtjs/sanity/dist/runtime/composables/useSanityVisualEditing.js

Sanity integration for Nuxt

import { enableVisualEditing } from "@sanity/visual-editing";
import { onScopeDispose } from "vue";
import { useRouter, reloadNuxtApp } from "#imports";
import { useSanityConfig } from "./useSanityConfig.js";
export function useSanityVisualEditing(options = {}) {
  const config = useSanityConfig();
  if (!config.visualEditing) {
    throw new Error("Configure the `sanity.visualEditing` property in your `nuxt.config.ts` to use the `useSanityVisualEditing` composable. ");
  }
  const { zIndex, refresh } = options;
  let disable = () => {
  };
  if (import.meta.client) {
    const router = useRouter();
    disable = enableVisualEditing({
      zIndex,
      // It is unlikely this API will be used as much by Nuxt users, as
      // implementing fully fledged visual editing is more straightforward
      // compared with other frameworks
      refresh: (payload) => {
        function refreshDefault() {
          if (payload.source === "mutation" && payload.livePreviewEnabled) {
            return false;
          }
          return new Promise((resolve) => {
            reloadNuxtApp({ ttl: 1e3 });
            resolve();
          });
        }
        return refresh ? refresh(payload, refreshDefault) : refreshDefault();
      },
      history: {
        subscribe: (navigate) => {
          router.isReady().then(() => {
            navigate({
              type: "replace",
              url: router.currentRoute.value.fullPath
            });
          });
          return router.afterEach((to) => {
            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;
}