@nuxtjs/prismic/dist/runtime/plugin.js

Easily connect your Nuxt application to your content hosted on Prismic

import { createClient } from "@prismicio/client";
import { createPrismic } from "@prismicio/vue";
import { defineNuxtPlugin } from "#app";
import NuxtLink from "#app/components/nuxt-link";
import { useCookie, useRequestEvent, onNuxtReady, refreshNuxtData, useHead, useRuntimeConfig, useRouter } from "#imports";
import _client from "#build/prismic/proxy/client";
import linkResolver from "#build/prismic/proxy/linkResolver";
import richTextSerializer from "#build/prismic/proxy/richTextSerializer";
import linkRel from "#build/prismic/proxy/linkRel";
import richTextComponents from "#build/prismic/proxy/richTextComponents";
import sliceZoneDefaultComponent from "#build/prismic/proxy/sliceZoneDefaultComponent";
export default defineNuxtPlugin({
  name: "prismic:setup",
  parallel: true,
  async setup(nuxtApp) {
    const options = useRuntimeConfig().public.prismic;
    let client;
    if (typeof _client === "function") {
      try {
        client = await nuxtApp.runWithContext(() => _client());
      } catch (error) {
        console.error("[@nuxtjs/prismic] An error happened while resolving your Prismic custom client, disabling Prismic module gracefully...", error);
        client = createClient(
          "error-resolving-custom-client",
          { ...options, documentAPIEndpoint: void 0 }
        );
      }
    } else {
      client = _client;
    }
    const endpoint = options.environment || options.endpoint || client?.documentAPIEndpoint || "";
    const prismicPlugin = createPrismic({
      ...options,
      endpoint,
      // TypeScript expects either an endpoint of a client, not both
      client,
      linkResolver,
      richTextSerializer,
      injectComponents: false,
      // Handled at module level
      components: {
        linkInternalComponent: NuxtLink,
        linkExternalComponent: NuxtLink,
        ...options.components,
        linkRel,
        richTextComponents,
        sliceZoneDefaultComponent
      }
    });
    nuxtApp.vueApp.use(prismicPlugin);
    if (options.preview) {
      const previewCookie = useCookie("io.prismic.preview").value;
      if (import.meta.server) {
        const req = useRequestEvent()?.node.req;
        if (req) {
          prismicPlugin.client.enableAutoPreviewsFromReq(req);
        }
      }
      if (previewCookie) {
        try {
          const session = typeof previewCookie === "string" ? JSON.parse(decodeURIComponent(previewCookie)) : previewCookie;
          if (Object.keys(session).some((key) => key in session && typeof session[key] === "object" && session[key] !== null && "preview" in session[key] && session[key].preview)) {
            let afterEachCalled = false;
            onNuxtReady(() => {
              if (!afterEachCalled) {
                refreshNuxtData();
              }
            });
            useRouter().afterEach(() => {
              afterEachCalled = true;
              refreshNuxtData();
            });
          }
        } catch (error) {
          console.warn("Failed to parse Prismic preview cookie", error);
        }
      }
    }
    if (options.toolbar && prismicPlugin.client?.repositoryName) {
      useHead({
        script: [{
          key: "prismic-preview",
          src: `https://static.cdn.prismic.io/prismic.min.js?repo=${prismicPlugin.client.repositoryName}&new=true`,
          async: true,
          defer: true,
          crossorigin: "anonymous"
        }]
      });
    } else {
      useCookie("io.prismic.preview").value = null;
    }
    return {
      provide: { prismic: prismicPlugin }
    };
  }
});