@prismicio/vue 4.2.3 → 5.0.0-alpha.0

package/dist/package.json.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"package.json.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/package.json.js

@@ -0,0 +1,5 @@
+const version = "5.0.0-alpha.0";
+export {
+  version
+};
+//# sourceMappingURL=package.json.js.map

package/dist/package.json.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"package.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/types.d.ts

@@ -1,20 +1,21 @@
-import type { ClientConfig, CreateClient, HTMLRichTextFunctionSerializer, HTMLRichTextMapSerializer, LinkResolverFunction, asDate, asHTML, asImagePixelDensitySrcSet, asImageSrc, asImageWidthSrcSet, asLink, asLinkAttrs, asText, cookie, documentToLinkField, filter, isFilled } from "@prismicio/client";
+import type { AsLinkAttrsConfig, ClientConfig, CreateClient, HTMLRichTextFunctionSerializer, HTMLRichTextMapSerializer, LinkResolverFunction, asDate, asHTML, asImagePixelDensitySrcSet, asImageSrc, asImageWidthSrcSet, asLink, asLinkAttrs, asText, cookie, documentToLinkField, filter, isFilled } from "@prismicio/client";
 import type { App, ConcreteComponent, DefineComponent, Raw, Ref } from "vue";
-import type { SliceComponentType } from "./components/SliceZone";
+import type { VueRichTextSerializer } from "./PrismicRichText/types";
+import type { SliceComponentType } from "./SliceZone";
 /**
  * Options used by `@prismicio/vue` components.
  */
 type PrismicPluginComponentsOptions = {
     /**
-     * Value of the `rel` attribute to use on links rendered with
-     * `target="_blank"`
+     * The `rel` attribute for the link. By default, `"noreferrer"` is provided if
+     * the link's URL is external. This prop can be provided a function to use the
+     * link's metadata to determine the `rel` value.
      *
-     * @defaultValue `"noopener noreferrer"`
+     * @defaultValue `"noreferrer"`
      */
-    linkBlankTargetRelAttribute?: string;
+    linkRel?: AsLinkAttrsConfig["rel"];
     /**
-     * An HTML tag name, a component, or a functional component used to render
-     * internal links.
+     * An HTML tag name or a component used to render internal links.
      *
      * @remarks
      * HTML tag names will be rendered using the anchor tag interface (`href`,
@@ -22,12 +23,12 @@ type PrismicPluginComponentsOptions = {
      * @remarks
      * Components will be rendered using Vue Router {@link RouterLink} interface
      * (`to` props).
+     *
      * @defaultValue {@link RouterLink}
      */
-    linkInternalComponent?: string | ConcreteComponent | Raw<DefineComponent>;
+    linkInternalComponent?: ComponentOrTagName;
     /**
-     * An HTML tag name, a component, or a functional component used to render
-     * external links.
+     * An HTML tag name or a component used to render external links.
      *
      * @remarks
      * HTML tag names will be rendered using the anchor tag interface (`href`,
@@ -35,20 +36,10 @@ type PrismicPluginComponentsOptions = {
      * @remarks
      * Components will be rendered using Vue Router {@link RouterLink} interface
      * (`to` props).
-     * @defaultValue `"a"`
-     */
-    linkExternalComponent?: string | ConcreteComponent | Raw<DefineComponent>;
-    /**
-     * An HTML tag name, a component, or a functional component used to render
-     * images.
      *
-     * @remarks
-     * HTML tag names and components will be rendered using the `img` tag
-     * interface (`src` and `alt` attribute). Components will also receive an
-     * additional `copyright` props.
-     * @defaultValue `"img"`
+     * @defaultValue `"a"`
      */
-    imageComponent?: string | ConcreteComponent | Raw<DefineComponent>;
+    linkExternalComponent?: ComponentOrTagName;
     /**
      * Default widths to use when rendering an image with `widths="defaults"`
      *
@@ -56,6 +47,7 @@ type PrismicPluginComponentsOptions = {
      * Consider configuring image widths within your content type definition and
      * using `widths="auto"` instead to give content writers the ability to crop
      * images in the editor.
+     *
      * @defaultValue `@prismicio/client` defaults
      */
     imageWidthSrcSetDefaults?: number[];
@@ -66,6 +58,13 @@ type PrismicPluginComponentsOptions = {
      * @defaultValue `@prismicio/client` defaults
      */
     imagePixelDensitySrcSetDefaults?: number[];
+    /**
+     * An optional map of Rich Text block types to Vue Components. It is used to
+     * render Rich Text or title fields.
+     *
+     * @see Templating Rich Text and title fields from Prismic {@link https://prismic.io/docs/rich-text}
+     */
+    richTextComponents?: VueRichTextSerializer;
     /**
      * A component or a functional component rendered if a component mapping from
      * the `components` prop cannot be found.
@@ -93,18 +92,13 @@ type PrismicPluginOptionsBase = {
      * An optional HTML serializer to customize the way rich text fields are
      * rendered.
      *
-     * @see HTML serializer documentation {@link https://prismic.io/docs/core-concepts/html-serializer}
-     */
-    richTextSerializer?: HTMLRichTextFunctionSerializer | HTMLRichTextMapSerializer;
-    /**
-     * An optional HTML serializer to customize the way rich text fields are
-     * rendered.
-     *
-     * @deprecated Use `richTextSerializer` instead.
+     * @remarks
+     * To provide global components for the `<PrismicRichText />` component, use
+     * the `components.richTextComponents` option instead.
      *
      * @see HTML serializer documentation {@link https://prismic.io/docs/core-concepts/html-serializer}
      */
-    htmlSerializer?: HTMLRichTextFunctionSerializer | HTMLRichTextMapSerializer;
+    richTextSerializer?: HTMLRichTextFunctionSerializer | HTMLRichTextMapSerializer;
     /**
      * Whether or not to inject components globally.
      *
@@ -132,6 +126,7 @@ type PrismicPluginOptionsWithClient = PrismicPluginOptionsBase & {
      * The client will be used by `@prismicio/vue` composables, such as
      * {@link usePrismicDocuments} and exposed through `this.$prismic.client` and
      * `usePrismic().client`.
+     *
      * @see Prismic client documentation {@link https://prismic.io/docs/technologies/javascript}
      */
     client: ReturnType<CreateClient>;
@@ -162,14 +157,15 @@ type PrismicPluginOptionsWithEndpoint = PrismicPluginOptionsBase & {
      * Said client will be used by `@prismicio/vue` composables, such as
      * {@link usePrismicDocuments} and exposed through `this.$prismic.client` and
      * `usePrismic().client`.
+     *
      * @example
      *
      * ```javascript
      * // A repository ID
-     * "my-repo";
+     * "my-repo"
      *
      * //A full repository endpoint
-     * "https://my-repo.cdn.prismic.io/api/v2";
+     * "https://my-repo.cdn.prismic.io/api/v2"
      * ```
      *
      * @see Prismic client documentation {@link https://prismic.io/docs/technologies/javascript}
@@ -266,6 +262,7 @@ export type PrismicPluginHelpers = {
      * @remarks
      * If no `htmlSerializer` is provided the function will use the one provided
      * to the plugin at {@link PrismicPluginOptions.htmlSerializer} if available.
+     *
      * @see Templating rich text and title fields {@link https://prismic.io/docs/technologies/vue-template-content#rich-text-and-titles}
      */
     asHTML: typeof asHTML;
@@ -276,6 +273,7 @@ export type PrismicPluginHelpers = {
      * @remarks
      * If no `linkResolver` is provided the function will use the one provided to
      * the plugin at {@link PrismicPluginOptions.linkResolver} if available.
+     *
      * @see Templating link fields {@link https://prismic.io/docs/technologies/vue-template-content#links-and-content-relationships}
      */
     asLink: typeof asLink;
@@ -286,6 +284,7 @@ export type PrismicPluginHelpers = {
      * @remarks
      * If no `linkResolver` is provided the function will use the one provided to
      * the plugin at {@link PrismicPluginOptions.linkResolver} if available.
+     *
      * @see Templating link fields {@link https://prismic.io/docs/technologies/vue-template-content#links-and-content-relationships}
      */
     asLinkAttrs: typeof asLinkAttrs;
@@ -295,19 +294,19 @@ export type PrismicPluginHelpers = {
      */
     asDate: typeof asDate;
     /**
-     * Returns the URL of an Image field with optional image transformations (via
+     * Returns the URL of an image field with optional image transformations (via
      * Imgix URL parameters). This is `@prismicio/client` {@link asImageSrc}
      * function.
      */
     asImageSrc: typeof asImageSrc;
     /**
-     * Creates a width-based `srcset` from an Image field with optional image
+     * Creates a width-based `srcset` from an image field with optional image
      * transformations (via Imgix URL parameters). This is `@prismicio/client`
      * {@link asImageWidthSrcSet} function.
      */
     asImageWidthSrcSet: typeof asImageWidthSrcSet;
     /**
-     * Creates a pixel-density-based `srcset` from an Image field with optional
+     * Creates a pixel-density-based `srcset` from an image field with optional
      * image transformations (via Imgix URL parameters). This is
      * `@prismicio/client` {@link asImagePixelDensitySrcSet} function.
      */
@@ -343,27 +342,6 @@ export type PrismicPlugin = {
      */
     install: (app: App) => void;
 } & PrismicPluginClient & PrismicPluginHelpers;
-/**
- * States of a `@prismicio/client` composable.
- */
-export declare const enum PrismicClientComposableState {
-    /**
-     * The composable has not started fetching.
-     */
-    Idle = "idle",
-    /**
-     * The composable is fetching data.
-     */
-    Pending = "pending",
-    /**
-     * The composable sucessfully fetched data.
-     */
-    Success = "success",
-    /**
-     * The composable failed to fetch data.
-     */
-    Error = "error"
-}
 /**
  * Type to transform a static object into one that allows passing Refs as
  * values.
@@ -381,4 +359,10 @@ export type VueUseOptions<T> = {
 export type VueUseParameters<T> = {
     [K in keyof T]: T extends number ? Ref<T[K]> | T[K] : T[K];
 };
+/**
+ * A component or a tag name to be used as props.
+ *
+ * @internal
+ */
+export type ComponentOrTagName = string | ConcreteComponent | Raw<DefineComponent>;
 export {};

package/dist/usePrismic.cjs

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const vue = require("vue");
-const injectionSymbols = require("./injectionSymbols.cjs");
+const prismicKey = Symbol("prismic");
 const usePrismic = () => {
-  return vue.inject(injectionSymbols.prismicKey, { options: { endpoint: "" } });
+  return vue.inject(prismicKey, { options: { endpoint: "" } });
 };
+exports.prismicKey = prismicKey;
 exports.usePrismic = usePrismic;
 //# sourceMappingURL=usePrismic.cjs.map

package/dist/usePrismic.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"usePrismic.cjs","sources":["../../src/usePrismic.ts"],"sourcesContent":["import { inject } from \"vue\";\n\nimport { PrismicPlugin } from \"./types\";\n\nimport { prismicKey } from \"./injectionSymbols\";\n\n/**\n * Accesses `@prismicio/vue` plugin interface.\n *\n * @example\n *\n * ```javascript\n * // With the composition API\n * import { usePrismic } from \"@prismicio/vue\";\n *\n * export default {\n * \tsetup() {\n * \t\tconst prismic = usePrismic();\n *\n * \t\treturn {};\n * \t},\n * };\n * ```\n *\n * @returns The interface {@link PrismicPlugin}\n */\nexport const usePrismic = (): PrismicPlugin => {\n\treturn inject(prismicKey, { options: { endpoint: \"\" } } as PrismicPlugin);\n};\n"],"names":["inject","prismicKey"],"mappings":";;;;AA0BO,MAAM,aAAa,MAAoB;AACtC,SAAAA,IAAAA,OAAOC,iBAAAA,YAAY,EAAE,SAAS,EAAE,UAAU,MAAuB;AACzE;;"}
+{"version":3,"file":"usePrismic.cjs","sources":["../../src/usePrismic.ts"],"sourcesContent":["import type { InjectionKey } from \"vue\"\nimport { inject } from \"vue\"\n\nimport type { PrismicPlugin } from \"./types\"\n\n/**\n * `@prismicio/vue` plugin interface interface location used for\n * {@link usePrismic}.\n *\n * @internal\n */\nexport const prismicKey = Symbol(\"prismic\") as InjectionKey<PrismicPlugin>\n\n/**\n * Accesses `@prismicio/vue` plugin interface.\n *\n * @example\n *\n * ```javascript\n * // With the composition API\n * import { usePrismic } from \"@prismicio/vue\"\n *\n * export default {\n * \tsetup() {\n * \t\tconst prismic = usePrismic()\n *\n * \t\treturn {}\n * \t},\n * }\n * ```\n *\n * @returns The interface {@link PrismicPlugin}\n */\nexport const usePrismic = (): PrismicPlugin => {\n\treturn inject(prismicKey, { options: { endpoint: \"\" } } as PrismicPlugin)\n}\n"],"names":["inject"],"mappings":";;;AAWa,MAAA,aAAa,OAAO,SAAS;AAsBnC,MAAM,aAAa,MAAoB;AACtC,SAAAA,IAAAA,OAAO,YAAY,EAAE,SAAS,EAAE,UAAU,GAAA,GAAuB;AACzE;;;"}

package/dist/usePrismic.d.ts

@@ -1,4 +1,12 @@
-import { PrismicPlugin } from "./types";
+import type { InjectionKey } from "vue";
+import type { PrismicPlugin } from "./types";
+/**
+ * `@prismicio/vue` plugin interface interface location used for
+ * {@link usePrismic}.
+ *
+ * @internal
+ */
+export declare const prismicKey: InjectionKey<PrismicPlugin>;
 /**
  * Accesses `@prismicio/vue` plugin interface.
  *
@@ -6,15 +14,15 @@ import { PrismicPlugin } from "./types";
  *
  * ```javascript
  * // With the composition API
- * import { usePrismic } from "@prismicio/vue";
+ * import { usePrismic } from "@prismicio/vue"
  *
  * export default {
  * 	setup() {
- * 		const prismic = usePrismic();
+ * 		const prismic = usePrismic()
  *
- * 		return {};
+ * 		return {}
  * 	},
- * };
+ * }
  * ```
  *
  * @returns The interface {@link PrismicPlugin}

package/dist/usePrismic.js

@@ -1,9 +1,10 @@
 import { inject } from "vue";
-import { prismicKey } from "./injectionSymbols.js";
+const prismicKey = Symbol("prismic");
 const usePrismic = () => {
   return inject(prismicKey, { options: { endpoint: "" } });
 };
 export {
+  prismicKey,
   usePrismic
 };
 //# sourceMappingURL=usePrismic.js.map

package/dist/usePrismic.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePrismic.js","sources":["../../src/usePrismic.ts"],"sourcesContent":["import { inject } from \"vue\";\n\nimport { PrismicPlugin } from \"./types\";\n\nimport { prismicKey } from \"./injectionSymbols\";\n\n/**\n * Accesses `@prismicio/vue` plugin interface.\n *\n * @example\n *\n * ```javascript\n * // With the composition API\n * import { usePrismic } from \"@prismicio/vue\";\n *\n * export default {\n * \tsetup() {\n * \t\tconst prismic = usePrismic();\n *\n * \t\treturn {};\n * \t},\n * };\n * ```\n *\n * @returns The interface {@link PrismicPlugin}\n */\nexport const usePrismic = (): PrismicPlugin => {\n\treturn inject(prismicKey, { options: { endpoint: \"\" } } as PrismicPlugin);\n};\n"],"names":[],"mappings":";;AA0BO,MAAM,aAAa,MAAoB;AACtC,SAAA,OAAO,YAAY,EAAE,SAAS,EAAE,UAAU,MAAuB;AACzE;"}
+{"version":3,"file":"usePrismic.js","sources":["../../src/usePrismic.ts"],"sourcesContent":["import type { InjectionKey } from \"vue\"\nimport { inject } from \"vue\"\n\nimport type { PrismicPlugin } from \"./types\"\n\n/**\n * `@prismicio/vue` plugin interface interface location used for\n * {@link usePrismic}.\n *\n * @internal\n */\nexport const prismicKey = Symbol(\"prismic\") as InjectionKey<PrismicPlugin>\n\n/**\n * Accesses `@prismicio/vue` plugin interface.\n *\n * @example\n *\n * ```javascript\n * // With the composition API\n * import { usePrismic } from \"@prismicio/vue\"\n *\n * export default {\n * \tsetup() {\n * \t\tconst prismic = usePrismic()\n *\n * \t\treturn {}\n * \t},\n * }\n * ```\n *\n * @returns The interface {@link PrismicPlugin}\n */\nexport const usePrismic = (): PrismicPlugin => {\n\treturn inject(prismicKey, { options: { endpoint: \"\" } } as PrismicPlugin)\n}\n"],"names":[],"mappings":";AAWa,MAAA,aAAa,OAAO,SAAS;AAsBnC,MAAM,aAAa,MAAoB;AACtC,SAAA,OAAO,YAAY,EAAE,SAAS,EAAE,UAAU,GAAA,GAAuB;AACzE;"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prismicio/vue",
-	"version": "4.2.3",
+	"version": "5.0.0-alpha.0",
 	"description": "Vue plugin, components, and composables to fetch and present Prismic content",
 	"keywords": [
 		"typescript",
@@ -46,49 +46,50 @@
 		"prepare": "npm run build",
 		"release": "npm run test && standard-version && git push --follow-tags && npm run build && npm publish",
 		"release:dry": "standard-version --dry-run",
-		"release:beta": "npm run test && standard-version --release-as major --prerelease beta && git push --follow-tags && npm run build && npm publish --tag beta",
-		"release:beta:dry": "standard-version --release-as major --prerelease beta --dry-run",
-		"lint": "eslint --ext .js,.ts .",
-		"types": "vitest typecheck --run && tsc --noEmit",
-		"types:watch": "vitest typecheck",
+		"release:alpha": "npm run test && standard-version --release-as major --prerelease alpha && git push --follow-tags && npm run build && npm publish --tag alpha",
+		"release:alpha:dry": "standard-version --release-as major --prerelease alpha --dry-run",
+		"lint": "eslint",
+		"types": "vitest --typecheck.only --run && vue-tsc --noEmit",
+		"types:watch": "vitest --typecheck.only",
 		"unit": "vitest run --coverage",
 		"unit:watch": "vitest watch",
 		"size": "size-limit",
 		"test": "npm run lint && npm run types && npm run unit && npm run build && npm run size"
 	},
 	"dependencies": {
-		"@prismicio/client": "^7.4.0",
-		"isomorphic-unfetch": "^3.1.0",
-		"vue-router": "^4.3.0"
+		"@prismicio/client": "^7.12.0",
+		"esm-env": "^1.2.1",
+		"vue-router": "^4.5.0"
 	},
 	"devDependencies": {
-		"@prismicio/mock": "^0.3.1",
-		"@size-limit/preset-small-lib": "^8.2.6",
+		"@eslint/js": "^9.16.0",
+		"@prismicio/mock": "^0.4.0",
+		"@size-limit/preset-small-lib": "^11.1.6",
 		"@trivago/prettier-plugin-sort-imports": "^4.3.0",
 		"@types/jsdom-global": "^3.0.7",
-		"@typescript-eslint/eslint-plugin": "^5.62.0",
-		"@typescript-eslint/parser": "^5.62.0",
-		"@vitejs/plugin-vue": "^4.6.2",
-		"@vitest/coverage-v8": "^0.34.6",
-		"@vue/compiler-sfc": "^3.4.21",
-		"@vue/eslint-config-typescript": "^11.0.3",
-		"@vue/test-utils": "^2.4.5",
-		"eslint": "^8.57.0",
-		"eslint-config-prettier": "^8.10.0",
-		"eslint-plugin-prettier": "^4.2.1",
-		"eslint-plugin-tsdoc": "^0.2.17",
-		"eslint-plugin-vue": "^9.24.0",
-		"jsdom": "^24.0.0",
+		"@vitejs/plugin-vue": "^5.2.1",
+		"@vitest/coverage-v8": "^2.1.8",
+		"@vue/eslint-config-typescript": "^14.1.4",
+		"@vue/test-utils": "^2.4.6",
+		"eslint": "^9.16.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-prettier": "^5.2.1",
+		"eslint-plugin-tsdoc": "^0.4.0",
+		"eslint-plugin-vue": "^9.32.0",
+		"jsdom": "^25.0.1",
 		"jsdom-global": "^3.0.2",
-		"prettier": "^2.8.8",
-		"prettier-plugin-jsdoc": "^0.4.2",
-		"size-limit": "^8.2.6",
+		"prettier": "^3.4.2",
+		"prettier-plugin-jsdoc": "^1.3.0",
+		"size-limit": "^11.1.6",
 		"standard-version": "^9.5.0",
-		"typescript": "^5.4.3",
-		"vite": "^4.5.3",
-		"vite-plugin-sdk": "^0.1.2",
-		"vitest": "^0.34.6",
-		"vue": "^3.4.21"
+		"typescript": "~5.6.3",
+		"typescript-eslint": "^8.17.0",
+		"vite": "^6.0.2",
+		"vite-plugin-dts": "^4.3.0",
+		"vite-plugin-sdk": "^0.1.3",
+		"vitest": "^2.1.8",
+		"vue": "^3.5.13",
+		"vue-tsc": "^2.1.10"
 	},
 	"peerDependencies": {
 		"vue": "^3.0.0"
@@ -98,9 +99,5 @@
 	},
 	"publishConfig": {
 		"access": "public"
-	},
-	"vetur": {
-		"tags": "vetur/tags.json",
-		"attributes": "vetur/attributes.json"
 	}
 }

package/src/PrismicEmbed.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import type { EmbedField } from "@prismicio/client"
+import { isFilled } from "@prismicio/client"
+
+import type { ComponentOrTagName } from "./types"
+
+/**
+ * The default component rendered to wrap the embed.
+ */
+const defaultWrapper = "div"
+
+/**
+ * Props for `<PrismicEmbed />`.
+ */
+export type PrismicEmbedProps = {
+	/**
+	 * The Prismic EMbed field to render.
+	 */
+	field: EmbedField
+
+	/**
+	 * An HTML tag name or a component used to wrap the output.
+	 *
+	 * @defaultValue `"div"`
+	 */
+	wrapper?: ComponentOrTagName
+}
+
+defineProps<PrismicEmbedProps>()
+defineOptions({ name: "PrismicEmbed" })
+</script>
+
+<template>
+	<component
+		v-if="isFilled.embed(field)"
+		:is="wrapper || defaultWrapper"
+		:data-oembed="field.embed_url"
+		:data-oembed-type="field.type"
+		:data-oembed-provider="field.provider_name"
+		v-html="field.html"
+	/>
+</template>

package/src/PrismicImage.vue

@@ -0,0 +1,160 @@
+<script lang="ts" setup>
+import type { ImageField, asImageSrc } from "@prismicio/client"
+import {
+	asImagePixelDensitySrcSet,
+	asImageWidthSrcSet,
+	isFilled,
+} from "@prismicio/client"
+import { DEV } from "esm-env"
+import { computed, watchEffect } from "vue"
+
+import { devMsg } from "./lib/devMsg"
+
+import { usePrismic } from "./usePrismic"
+
+/**
+ * Props for `<PrismicImage />`.
+ */
+export type PrismicImageProps = {
+	/**
+	 * The Prismic image field or thumbnail to render.
+	 */
+	field: ImageField | ImageField<string>
+
+	/**
+	 * An object of Imgix URL API parameters to transform the image.
+	 *
+	 * See: https://docs.imgix.com/apis/rendering
+	 */
+	imgixParams?: Parameters<typeof asImageSrc>[1]
+
+	/**
+	 * Declare an image as decorative by providing `alt=""`.
+	 *
+	 * See:
+	 * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
+	 */
+	alt?: ""
+
+	/**
+	 * Declare an image as decorative only if the image field does not have
+	 * alternative text by providing `fallbackAlt=""`.
+	 *
+	 * See:
+	 * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
+	 */
+	fallbackAlt?: ""
+} & (
+	| {
+			/**
+			 * Widths used to build a `srcset` value for the image field.
+			 *
+			 * If a `widths` prop is not given or `"defaults"` is passed, the
+			 * following widths will be used: 640, 750, 828, 1080, 1200, 1920, 2048,
+			 * 3840.
+			 *
+			 * If the image field contains responsive views, each responsive view can
+			 * be used as a width in the resulting `srcset` by passing `"thumbnails"`
+			 * as the `widths` prop.
+			 */
+			widths?:
+				| NonNullable<Parameters<typeof asImageWidthSrcSet>[1]>["widths"]
+				| "thumbnails"
+				| "defaults"
+			/**
+			 * Not used when the `widths` prop is used.
+			 */
+			pixelDensities?: never
+	  }
+	| {
+			/**
+			 * Not used when the `widths` prop is used.
+			 */
+			widths?: never
+			/**
+			 * Pixel densities used to build a `srcset` value for the image field.
+			 *
+			 * If a `pixelDensities` prop is passed `"defaults"`, the following pixel
+			 * densities will be used: 1, 2, 3.
+			 */
+			pixelDensities:
+				| NonNullable<
+						Parameters<typeof asImagePixelDensitySrcSet>[1]
+				  >["pixelDensities"]
+				| "defaults"
+	  }
+)
+
+const props = defineProps<PrismicImageProps>()
+defineOptions({ name: "PrismicImage" })
+
+const { options } = usePrismic()
+
+if (DEV) {
+	watchEffect(() => {
+		if (typeof props.alt === "string" && props.alt !== "") {
+			console.warn(
+				`[PrismicImage] The "alt" prop can only be used to declare an image as decorative by passing an empty string (alt="") but was provided a non-empty string. You can resolve this warning by removing the "alt" prop or changing it to alt="". For more details, see ${devMsg(
+					"alt-must-be-an-empty-string",
+				)}`,
+			)
+		}
+
+		if (typeof props.fallbackAlt === "string" && props.fallbackAlt !== "") {
+			console.warn(
+				`[PrismicImage] The "fallbackAlt" prop can only be used to declare an image as decorative by passing an empty string (fallbackAlt="") but was provided a non-empty string. You can resolve this warning by removing the "fallbackAlt" prop or changing it to fallbackAlt="". For more details, see ${devMsg(
+					"alt-must-be-an-empty-string",
+				)}`,
+			)
+		}
+
+		if (props.widths && props.pixelDensities) {
+			console.warn(
+				`[PrismicImage] Only one of "widths" or "pixelDensities" props can be provided. You can resolve this warning by removing either the "widths" or "pixelDensities" prop. "widths" will be used in this case.`,
+			)
+		}
+	})
+}
+
+const image = computed(() => {
+	if (!isFilled.imageThumbnail(props.field)) {
+		return
+	}
+
+	let src: string | undefined
+	let srcSet: string | undefined
+	if (props.widths || !props.pixelDensities) {
+		const res = asImageWidthSrcSet(props.field, {
+			...props.imgixParams,
+			widths:
+				props.widths === "defaults"
+					? options.components?.imageWidthSrcSetDefaults
+					: props.widths,
+		})
+
+		src = res.src
+		srcSet = res.srcset
+	} else if (props.pixelDensities) {
+		const res = asImagePixelDensitySrcSet(props.field, {
+			...props.imgixParams,
+			pixelDensities:
+				props.pixelDensities === "defaults"
+					? options.components?.imagePixelDensitySrcSetDefaults
+					: props.pixelDensities,
+		})
+
+		src = res.src
+		srcSet = res.srcset
+	}
+
+	return {
+		src,
+		srcSet,
+		alt: props.alt ?? (props.field.alt || props.fallbackAlt),
+	}
+})
+</script>
+
+<template>
+	<img v-if="image" :src="image.src" :srcset="image.srcSet" :alt="image.alt" />
+</template>