@nuxtjs/prismic 3.0.0-rc.2 → 3.0.0-rc.3

package/dist/module.d.ts

@@ -10,6 +10,11 @@ type PrismicModuleOptions = Omit<PrismicPluginOptions, 'endpoint' | 'client' | '
     toolbar?: boolean;
 };
 
+declare module '@nuxt/schema' {
+    interface PublicRuntimeConfig {
+        prismic: PrismicModuleOptions;
+    }
+}
 declare const _default: _nuxt_schema.NuxtModule<PrismicModuleOptions>;
 
-export { PrismicModuleOptions as ModuleOptions, PrismicModuleOptions, _default as default };
+export { PrismicModuleOptions, _default as default };

package/dist/module.json

@@ -2,7 +2,7 @@
   "name": "@nuxtjs/prismic",
   "configKey": "prismic",
   "compatibility": {
-    "nuxt": "^3.0.0-rc.6"
+    "nuxt": "^3.0.0"
   },
-  "version": "3.0.0-rc.2"
+  "version": "3.0.0-rc.3"
 }

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { join } from 'node:path';
+import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addPlugin, addComponent, addImports, extendPages, addTemplate } from '@nuxt/kit';
-import { isRepositoryEndpoint, getRepositoryName } from '@prismicio/client';
 import * as prismicVue from '@prismicio/vue';
 import consola from 'consola';
 import { existsSync } from 'node:fs';
@@ -17,12 +17,11 @@ const fileExists = (path, extensions = ["js", "ts"]) => {
   return extension ? `${path}.${extension}` : null;
 };
 
-const PACKAGE_NAME = "@nuxtjs/prismic";
 const module = defineNuxtModule({
   meta: {
-    name: PACKAGE_NAME,
+    name: "@nuxtjs/prismic",
     configKey: "prismic",
-    compatibility: { nuxt: "^3.0.0-rc.6" }
+    compatibility: { nuxt: "^3.0.0" }
   },
   defaults: (nuxt) => ({
     endpoint: "",
@@ -36,9 +35,9 @@ const module = defineNuxtModule({
     toolbar: true
   }),
   hooks: {},
-  setup(mergedOptions, nuxt) {
-    var _a, _b, _c;
-    if (!mergedOptions.endpoint) {
+  setup(options, nuxt) {
+    var _a;
+    if (!options.endpoint) {
       logger.warn("Options `endpoint` is required, disabling module...");
       return;
     }
@@ -61,14 +60,14 @@ const module = defineNuxtModule({
         });
       }
     };
-    proxyUserFileWithUndefinedFallback("client", mergedOptions.client);
-    proxyUserFileWithUndefinedFallback("linkResolver", mergedOptions.linkResolver);
-    proxyUserFileWithUndefinedFallback("htmlSerializer", mergedOptions.htmlSerializer);
+    proxyUserFileWithUndefinedFallback("client", options.client);
+    proxyUserFileWithUndefinedFallback("linkResolver", options.linkResolver);
+    proxyUserFileWithUndefinedFallback("htmlSerializer", options.htmlSerializer);
     (_a = nuxt.options.runtimeConfig).public || (_a.public = {});
-    nuxt.options.runtimeConfig.public[PACKAGE_NAME] = mergedOptions;
+    nuxt.options.runtimeConfig.public.prismic = defu(nuxt.options.runtimeConfig.public.prismic, options);
     addPlugin(resolver.resolve("runtime/plugin"));
     addPlugin(resolver.resolve("runtime/plugin.client"));
-    if (mergedOptions.injectComponents) {
+    if (options.injectComponents) {
       [
         "PrismicEmbed",
         "PrismicImage",
@@ -84,48 +83,37 @@ const module = defineNuxtModule({
         });
       });
     }
-    const composableAutoImports = Object.keys(prismicVue).filter((key) => key.startsWith("use")).map((key) => {
+    const prismicVueAutoImports = Object.keys(prismicVue).filter((key) => key.startsWith("use")).concat("getSliceComponentProps", "defineSliceZoneComponents").map((key) => {
       return {
         name: key,
         as: key,
         from: "@prismicio/vue"
       };
     });
-    addImports(composableAutoImports);
+    addImports(prismicVueAutoImports);
     addImports({
       name: "usePrismicPreview",
       as: "usePrismicPreview",
       from: resolver.resolve("runtime/usePrismicPreview")
     });
-    if (mergedOptions.preview) {
-      const maybeUserPreviewPage = fileExists(join(nuxt.options.srcDir, nuxt.options.dir.pages, mergedOptions.preview), ["js", "ts", "vue"]);
+    if (options.preview) {
+      const maybeUserPreviewPage = fileExists(join(nuxt.options.srcDir, nuxt.options.dir.pages, options.preview), ["js", "ts", "vue"]);
       if (maybeUserPreviewPage) {
-        logger.info(`Using user-defined preview page at \`${maybeUserPreviewPage.replace(join(nuxt.options.srcDir), "~").replace(nuxt.options.rootDir, "~~").replace(/\\/g, "/")}\`, available at \`${mergedOptions.preview}\``);
+        logger.info(`Using user-defined preview page at \`${maybeUserPreviewPage.replace(join(nuxt.options.srcDir), "~").replace(nuxt.options.rootDir, "~~").replace(/\\/g, "/")}\`, available at \`${options.preview}\``);
       } else {
-        logger.info(`Using default preview page, available at \`${mergedOptions.preview}\``);
+        logger.info(`Using default preview page, available at \`${options.preview}\``);
         extendPages((pages) => {
           pages.unshift({
             name: "prismic-preview",
-            path: mergedOptions.preview,
+            path: options.preview,
             file: resolver.resolve("runtime/preview.vue")
           });
         });
       }
-      if (!mergedOptions.toolbar) {
+      if (!options.toolbar) {
         logger.warn("`toolbar` option is disabled but `preview` is enabled. Previews won't work unless you manually load the toolbar.");
       }
     }
-    if (mergedOptions.toolbar) {
-      const repositoryName = isRepositoryEndpoint(mergedOptions.endpoint) ? getRepositoryName(mergedOptions.endpoint) : mergedOptions.endpoint;
-      (_b = nuxt.options.app).head || (_b.head = {});
-      (_c = nuxt.options.app.head).script || (_c.script = []);
-      nuxt.options.app.head.script.push({
-        hid: "prismic-preview",
-        src: `https://static.cdn.prismic.io/prismic.min.js?repo=${repositoryName}&new=true`,
-        async: true,
-        defer: true
-      });
-    }
   }
 });
 

package/dist/runtime/plugin.client.mjs

@@ -1,8 +1,7 @@
 import { defineNuxtPlugin, refreshNuxtData } from "#app";
-const pkgName = "@nuxtjs/prismic";
 export default defineNuxtPlugin((nuxtApp) => {
-  const mergedOptions = nuxtApp.payload.config[pkgName] ?? nuxtApp.payload.config.public[pkgName] ?? {};
-  if (mergedOptions.preview) {
+  const options = useRuntimeConfig().public.prismic;
+  if (options.preview) {
     window.addEventListener("prismicPreviewUpdate", (event) => {
       event.preventDefault();
       refreshNuxtData();

package/dist/runtime/plugin.mjs

@@ -1,14 +1,14 @@
-import { defineNuxtPlugin, useCookie, useRequestEvent, refreshNuxtData } from "#app";
 import NuxtLink from "#app/components/nuxt-link";
+import { isRepositoryEndpoint, getRepositoryName } from "@prismicio/client";
 import { createPrismic } from "@prismicio/vue";
+import { defineNuxtPlugin, useCookie, useRequestEvent, refreshNuxtData, useHead } from "#imports";
 import client from "#build/prismic/proxy/client";
 import linkResolver from "#build/prismic/proxy/linkResolver";
 import htmlSerializer from "#build/prismic/proxy/htmlSerializer";
-const pkgName = "@nuxtjs/prismic";
 export default defineNuxtPlugin((nuxtApp) => {
-  const mergedOptions = nuxtApp.payload.config[pkgName] ?? nuxtApp.payload.config.public[pkgName] ?? {};
+  const options = useRuntimeConfig().public.prismic;
   const prismicPlugin = createPrismic({
-    ...mergedOptions,
+    ...options,
     client,
     linkResolver,
     htmlSerializer,
@@ -16,11 +16,11 @@ export default defineNuxtPlugin((nuxtApp) => {
     components: {
       linkInternalComponent: NuxtLink,
       linkExternalComponent: NuxtLink,
-      ...mergedOptions.components
+      ...options.components
     }
   });
   nuxtApp.vueApp.use(prismicPlugin);
-  if (mergedOptions.preview) {
+  if (options.preview) {
     const previewCookie = useCookie("io.prismic.preview").value;
     if (process.server) {
       prismicPlugin.client.enableAutoPreviewsFromReq(useRequestEvent()?.req);
@@ -36,4 +36,18 @@ export default defineNuxtPlugin((nuxtApp) => {
       }
     }
   }
+  if (options.toolbar) {
+    const repositoryName = isRepositoryEndpoint(options.endpoint) ? getRepositoryName(options.endpoint) : options.endpoint;
+    useHead({
+      script: [{
+        key: "prismic-preview",
+        src: `https://static.cdn.prismic.io/prismic.min.js?repo=${repositoryName}&new=true`,
+        async: true,
+        defer: true
+      }]
+    });
+  }
+  return {
+    provide: { prismic: prismicPlugin }
+  };
 });

package/dist/types.d.ts

@@ -1,10 +1,6 @@
 
-import { ModuleOptions } from './module'
+import {  } from './module'
 
-declare module '@nuxt/schema' {
-  interface NuxtConfig { ['prismic']?: Partial<ModuleOptions> }
-  interface NuxtOptions { ['prismic']?: ModuleOptions }
-}
 
 
-export { ModuleOptions, PrismicModuleOptions, default } from './module'
+export { PrismicModuleOptions, default } from './module'

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nuxtjs/prismic",
-	"version": "3.0.0-rc.2",
+	"version": "3.0.0-rc.3",
 	"description": "Easily connect your Nuxt 3 application to your content hosted on Prismic",
 	"keywords": [
 		"nuxt",
@@ -36,6 +36,8 @@
 		"build": "nuxt-module-build",
 		"dev": "nuxi dev playground",
 		"dev:build": "nuxi build playground",
+		"dev:preview": "nuxi preview playground",
+		"dev:generate": "nuxi generate playground",
 		"lint": "eslint --ext .js,.ts .",
 		"prepare": "nuxi prepare playground && npm run build",
 		"release": "npm run test && standard-version && git push --follow-tags && npm run build && npm publish",
@@ -43,26 +45,27 @@
 		"release:rc:dry": "standard-version --release-as major --prerelease rc --dry-run",
 		"release:dry": "standard-version --dry-run",
 		"test": "npm run lint && npm run unit && npm run build",
+		"types": "tsc --noEmit",
 		"unit": "vitest run --coverage",
 		"unit:watch": "vitest watch"
 	},
 	"dependencies": {
-		"@nuxt/kit": "^3.0.0",
-		"@prismicio/client": "^6.7.1",
-		"@prismicio/vue": "^3.1.1",
-		"consola": "^2.15.3"
+		"@nuxt/kit": "^3.3.2",
+		"@prismicio/client": "^6.7.3",
+		"@prismicio/vue": "^3.1.3",
+		"consola": "^2.15.3",
+		"defu": "^6.1.2"
 	},
 	"devDependencies": {
 		"@nuxt/module-builder": "^0.2.1",
-		"@nuxt/test-utils": "npm:@nuxt/test-utils-edge@latest",
 		"@nuxtjs/eslint-config-typescript": "^12.0.0",
-		"@vitest/coverage-c8": "^0.25.2",
-		"eslint": "^8.27.0",
+		"@vitest/coverage-c8": "^0.29.7",
+		"eslint": "^8.36.0",
 		"mock-fs": "^5.2.0",
-		"nuxt": "^3.0.0",
+		"nuxt": "^3.3.2",
 		"standard-version": "^9.5.0",
-		"typescript": "^4.9.3",
-		"vitest": "^0.25.2"
+		"typescript": "^4.9.5",
+		"vitest": "^0.29.7"
 	},
 	"engines": {
 		"node": ">=14.15.0"

package/src/module.ts

@@ -1,5 +1,6 @@
 import { join } from 'node:path'
 
+import { defu } from 'defu'
 import {
 	defineNuxtModule,
 	createResolver,
@@ -10,7 +11,6 @@ import {
 	extendPages
 } from '@nuxt/kit'
 
-import { isRepositoryEndpoint, getRepositoryName } from '@prismicio/client'
 import * as prismicVue from '@prismicio/vue'
 
 import { logger, fileExists } from './lib'
@@ -18,16 +18,19 @@ import type { PrismicModuleOptions } from './types'
 
 // Options export
 export type { PrismicModuleOptions } from './types'
-export type { PrismicModuleOptions as ModuleOptions } from './types'
 
-const PACKAGE_NAME = '@nuxtjs/prismic'
+declare module '@nuxt/schema' {
+	interface PublicRuntimeConfig {
+		prismic: PrismicModuleOptions
+	}
+}
 
 // Module export
 export default defineNuxtModule<PrismicModuleOptions>({
 	meta: {
-		name: PACKAGE_NAME,
+		name: '@nuxtjs/prismic',
 		configKey: 'prismic',
-		compatibility: { nuxt: '^3.0.0-rc.6' }
+		compatibility: { nuxt: '^3.0.0' }
 	},
 	defaults: nuxt => ({
 		endpoint: '',
@@ -41,8 +44,8 @@ export default defineNuxtModule<PrismicModuleOptions>({
 		toolbar: true
 	}),
 	hooks: {},
-	setup (mergedOptions, nuxt) {
-		if (!mergedOptions.endpoint) {
+	setup (options, nuxt) {
+		if (!options.endpoint) {
 			logger.warn('Options `endpoint` is required, disabling module...')
 			return
 		}
@@ -73,23 +76,20 @@ export default defineNuxtModule<PrismicModuleOptions>({
 				})
 			}
 		}
-		proxyUserFileWithUndefinedFallback('client', mergedOptions.client!)
-		proxyUserFileWithUndefinedFallback('linkResolver', mergedOptions.linkResolver!)
-		proxyUserFileWithUndefinedFallback('htmlSerializer', mergedOptions.htmlSerializer!)
+		proxyUserFileWithUndefinedFallback('client', options.client!)
+		proxyUserFileWithUndefinedFallback('linkResolver', options.linkResolver!)
+		proxyUserFileWithUndefinedFallback('htmlSerializer', options.htmlSerializer!)
 
 		// Expose options through public runtime config
 		nuxt.options.runtimeConfig.public ||= {} as typeof nuxt.options.runtimeConfig.public
-		// @ts-expect-error - Inferred type by `nuxi prepare` might vary depending on previous run.
-		//                    However, this is the source of truth for the runtime config and types
-		//                    will be inferred after it.
-		nuxt.options.runtimeConfig.public[PACKAGE_NAME] = mergedOptions
+		nuxt.options.runtimeConfig.public.prismic = defu(nuxt.options.runtimeConfig.public.prismic, options)
 
 		// Add plugin
 		addPlugin(resolver.resolve('runtime/plugin'))
 		addPlugin(resolver.resolve('runtime/plugin.client'))
 
 		// Add components auto import
-		if (mergedOptions.injectComponents) {
+		if (options.injectComponents) {
 			[
 				'PrismicEmbed',
 				'PrismicImage',
@@ -106,10 +106,11 @@ export default defineNuxtModule<PrismicModuleOptions>({
 			})
 		}
 
-		// Add composable auto import
-		const composableAutoImports = Object
+		// Add auto imports
+		const prismicVueAutoImports = Object
 			.keys(prismicVue)
 			.filter(key => key.startsWith('use'))
+			.concat('getSliceComponentProps', 'defineSliceZoneComponents')
 			.map((key) => {
 				return {
 					name: key,
@@ -117,7 +118,7 @@ export default defineNuxtModule<PrismicModuleOptions>({
 					from: '@prismicio/vue'
 				}
 			})
-		addImports(composableAutoImports)
+		addImports(prismicVueAutoImports)
 		addImports({
 			name: 'usePrismicPreview',
 			as: 'usePrismicPreview',
@@ -125,42 +126,27 @@ export default defineNuxtModule<PrismicModuleOptions>({
 		})
 
 		// Add preview route
-		if (mergedOptions.preview) {
-			const maybeUserPreviewPage = fileExists(join(nuxt.options.srcDir, nuxt.options.dir.pages, mergedOptions.preview), ['js', 'ts', 'vue'])
+		if (options.preview) {
+			const maybeUserPreviewPage = fileExists(join(nuxt.options.srcDir, nuxt.options.dir.pages, options.preview), ['js', 'ts', 'vue'])
 
 			if (maybeUserPreviewPage) {
 				logger.info(`Using user-defined preview page at \`${maybeUserPreviewPage.replace(join(nuxt.options.srcDir), '~').replace(nuxt.options.rootDir, '~~').replace(/\\/g, '/')
-				}\`, available at \`${mergedOptions.preview}\``)
+				}\`, available at \`${options.preview}\``)
 			} else {
-				logger.info(`Using default preview page, available at \`${mergedOptions.preview}\``)
+				logger.info(`Using default preview page, available at \`${options.preview}\``)
 
 				extendPages((pages) => {
 					pages.unshift({
 						name: 'prismic-preview',
-						path: mergedOptions.preview as string, // Checked before
+						path: options.preview as string, // Checked before
 						file: resolver.resolve('runtime/preview.vue')
 					})
 				})
 			}
 
-			if (!mergedOptions.toolbar) {
+			if (!options.toolbar) {
 				logger.warn('`toolbar` option is disabled but `preview` is enabled. Previews won\'t work unless you manually load the toolbar.')
 			}
 		}
-
-		if (mergedOptions.toolbar) {
-			// Add toolbar
-			const repositoryName = isRepositoryEndpoint(mergedOptions.endpoint)
-				? getRepositoryName(mergedOptions.endpoint)
-				: mergedOptions.endpoint
-			nuxt.options.app.head ||= {}
-			nuxt.options.app.head.script ||= []
-			nuxt.options.app.head.script.push({
-				hid: 'prismic-preview',
-				src: `https://static.cdn.prismic.io/prismic.min.js?repo=${repositoryName}&new=true`,
-				async: true,
-				defer: true
-			})
-		}
 	}
 })

package/src/runtime/plugin.client.ts

@@ -1,19 +1,12 @@
 import { defineNuxtPlugin, refreshNuxtData } from '#app'
 
-// import { name as pkgName } from '../../package.json'
 import { PrismicModuleOptions } from '../types'
 
-// TODO: Revert when fixed
-const pkgName = '@nuxtjs/prismic'
-
 export default defineNuxtPlugin((nuxtApp) => {
-	const mergedOptions: PrismicModuleOptions =
-		nuxtApp.payload.config[pkgName] ??
-		nuxtApp.payload.config.public[pkgName] ??
-		{}
+	const options: PrismicModuleOptions = useRuntimeConfig().public.prismic
 
 	// Hot reload preview updates
-	if (mergedOptions.preview) {
+	if (options.preview) {
 		window.addEventListener('prismicPreviewUpdate', (event) => {
 			event.preventDefault()
 			refreshNuxtData()

package/src/runtime/plugin.ts

@@ -1,10 +1,10 @@
-import { defineNuxtPlugin, useCookie, useRequestEvent, refreshNuxtData } from '#app'
 import NuxtLink from '#app/components/nuxt-link'
 
+import { isRepositoryEndpoint, getRepositoryName } from '@prismicio/client'
 import { createPrismic } from '@prismicio/vue'
 
-// import { name as pkgName } from '../../package.json'
 import { PrismicModuleOptions } from '../types'
+import { defineNuxtPlugin, useCookie, useRequestEvent, refreshNuxtData, useHead } from '#imports'
 
 // @ts-expect-error vfs cannot be resolved here
 import client from '#build/prismic/proxy/client'
@@ -13,17 +13,11 @@ import linkResolver from '#build/prismic/proxy/linkResolver'
 // @ts-expect-error vfs cannot be resolved here
 import htmlSerializer from '#build/prismic/proxy/htmlSerializer'
 
-// TODO: Revert when fixed
-const pkgName = '@nuxtjs/prismic'
-
 export default defineNuxtPlugin((nuxtApp) => {
-	const mergedOptions: PrismicModuleOptions =
-		nuxtApp.payload.config[pkgName] ??
-		nuxtApp.payload.config.public[pkgName] ??
-		{}
+	const options: PrismicModuleOptions = useRuntimeConfig().public.prismic
 
 	const prismicPlugin = createPrismic({
-		...mergedOptions,
+		...options,
 		client,
 		linkResolver,
 		htmlSerializer,
@@ -31,13 +25,13 @@ export default defineNuxtPlugin((nuxtApp) => {
 		components: {
 			linkInternalComponent: NuxtLink,
 			linkExternalComponent: NuxtLink,
-			...mergedOptions.components
+			...options.components
 		}
 	})
 
 	nuxtApp.vueApp.use(prismicPlugin)
 
-	if (mergedOptions.preview) {
+	if (options.preview) {
 		const previewCookie = useCookie('io.prismic.preview').value
 
 		// Update client with req when running server side
@@ -64,4 +58,24 @@ export default defineNuxtPlugin((nuxtApp) => {
 			}
 		}
 	}
+
+	if (options.toolbar) {
+		// Add toolbar
+		const repositoryName = isRepositoryEndpoint(options.endpoint)
+			? getRepositoryName(options.endpoint)
+			: options.endpoint
+
+		useHead({
+			script: [{
+				key: 'prismic-preview',
+				src: `https://static.cdn.prismic.io/prismic.min.js?repo=${repositoryName}&new=true`,
+				async: true,
+				defer: true
+			}]
+		})
+	}
+
+	return {
+		provide: { prismic: prismicPlugin }
+	}
 })