@prismicio/vue - v3

Overview

@prismicio/vue is the official Prismic package for creating web apps with Prismic and Vue.js.

This version of the package targets Vue 3

To integrate Vue 2 with Prismic use the current latest version of this package, @prismicio/vue@^2

@prismicio/vue provides three main functionalities:

  • Plugin: It provides an @prismicio/client instance, preconfigures and exposes helpers from @prismicio/helpers, and registers components globally.
  • Components: It provides a collection of components to render content from Prismic documents.
  • Client composables: It provides Vue composables to use with the Composition API to query content from a Prismic repository.

Dependencies and requirements

This package can only be used in a Vue project. It provides @prismicio/client and @prismicio/helpers so you don't need to install them explicitly. However, if you need to import things directly from them for any reason, you can still install them alongside @prismicio/vue.

Since this is a general-purpose Vue.js library, it can be used in simple setups like Vue CLI and Vite or in more advanced frameworks that use Vue, like Nuxt, although we also offer a specific integration for the latter: @nuxtjs/prismic.

Installation

Install packages

Add @prismicio/vue to your Vue project via the command line:

  • npm
  • Yarn
npm
Copy
npm install @prismicio/vue
Yarn
Copy
yarn add @prismicio/vue

Create an optional Link Resolver

Create a Link Resolver function. This is one of the two ways to tell Vue how to handle internal links in Prismic documents. (The other way to do so is with a Route Resolver, which works better for more complex routes. Read a comparison.)

A Link Resolver function takes a document from Prismic as an argument and returns the URL path for that document. Here's a basic example of a linkResolver.js file.

Copy
export function linkResolver(document) {
  if (document.type === "post") {
    return "/blog/" + document.uid;
  }

  return "/";
}

Set up the plugin

The plugin allows settings for @prismicio/vue's Vue components, composables, client and helpers to be configured in one central location. This is done using Vue plugin system.

Here's an example of setting up the plugin in a prismic.js file.

Copy
import { createPrismic } from "@prismicio/vue";

import { linkResolver } from "./linkResolver";

const prismic = createPrismic({
  endpoint: "your-endpoint",
  linkResolver,
});

export default prismic;

Additional options for createPrismic() are described below.

Once created, you can add the plugin to your Vue application.

Copy
import { createApp } from "vue";
import App from "./App.vue";
import prismic from "./prismic";

createApp(App).use(prismic).mount("#app");

Plugin usage

createPrismic()

Copy
createPrismic(options)

A factory function used to create a configured plugin instance to be used by the Vue application.

Copy
import { createApp } from "vue";
import { createPrismic } from "@prismicio/vue";
import App from "./App.vue";

const prismic = createPrismic({
  endpoint: "your-repo-name",
});

createApp(App).use(prismic).mount("#app");

createPrismic() object accepts the following properties. Only endpoint or client are mandatory (at least one of the two):

endpoint

A Prismic repository endpoint to init the plugin's @prismicio/client instance used to fetch content from a Prismic repository with. Can be either just the repository ID (your-repo-name) or the full API endpoint (https://your-repo-name.cdn.prismic.io/api/v2).

clientConfig

An optional object used to configure the created @prismicio/client instance further. See the @prismicio/client documentation for configuration options.

client

A @prismicio/client instance used to fetch content from a Prismic repository to configure the plugin with. This option is to be used instead of the two previous ones (endpoint & clientConfig).

linkResolver

An optional link resolver function used to resolve links to Prismic documents when not using the Route Resolver parameter with @prismicio/client. See the Link Resolver documentation.

htmlSerializer

An optional HTML serializer to customize the way Rich Text fields are rendered.

injectComponents

Whether or not to inject components globally. Defaults to true.

components

An optional options object used to configure injected components default behavior, see details below.

components.linkBlankTargetRelAttribute

Value of the rel attribute to use on links rendered with target="_blank". Defaults to "noopener noreferrer".

components.linkInternalComponent

An HTML tag name, a component, or a functional component used to render internal links. Defaults to Vue Router <RouterLink> component if available.

components.linkExternalComponent

An HTML tag name, a component, or a functional component used to render external links. Defaults to "a".

components.imageComponent

An HTML tag name, a component, or a functional component used to render images. Defaults to "img".

components.imageWidthSrcSetDefaults

Default widths to use when rendering an image with widths="defaults". Defaults to @prismicio/helpers defaults.

components.imagePixelDensitySrcSetDefaults

Default pixel densities to use when rendering an image with pixel-densities="defaults". Defaults to @prismicio/helpers defaults.

components.sliceZoneDefaultComponent

A component or a functional component rendered if a component mapping from the components prop cannot be found. Defaults to null when process.env.NODE_ENV === "production". When not, it defaults to a TODO slice component.

usePrismic() and this.$prismic

Copy
usePrismic()
this.$prismic

By default, the plugin configures and injects in Vue context:

  • An @prismicio/client instance at client, as well as predicate and cookie
  • asText, asHTML, asLink, asDate, asImageSrc, asImageWidthSrcSet, asImagePixelDensitySrcSet helpers from @prismicio/helpers

All those properties and methods can be accessed using the usePrismic() composable when using the Composition API.

Copy
import { usePrismic } from "@prismicio/vue";

const { client, asDate } = usePrismic();

// ...

When using the Options API they can be accessed through the Vue instance.

Copy
export default {
  mounted() {
    this.$prismic.client(/* ... */);
    this.$prismic.asDate(/* ... */);

    // ...
  }
};

All components described below will also be injected globally by the plugin when leaving the injectComponents option to true. No imports are required.

Copy
<template>
  <PrismicRichText :field="document.data.myRichTextField" />
</template>

Components usage

@prismicio/vue provides a collection of components to render content from Prismic documents. These components are injected globally when the plugin is configured.

<PrismicRichText>

Copy
// Not necessary when using the plugin
import { PrismicRichText } from "@prismicio/vue";

A Vue component that renders content from a Prismic Rich Text or Title field.

By default, HTML elements are rendered for each piece of content. For example, a heading1 block will render an <h1> HTML element. Internal links will use Vue Router, if available, for routing.

Copy
<PrismicRichText :field="document.data.myRichTextField" />

This component wraps its output in a <div> tag, if you need another wrapper tag, or component, to be used, use the wrapper prop.

Copy
<PrismicRichText :field="document.data.myRichTextField" wrapper="article" />

A fallback prop can be provided to define an HTML string to render when the Rich Text or Title field is empty. If a fallback prop is not provided, "" (nothing) is rendered by default for an empty field.

Copy
<PrismicRichText :field="document.data.myRichTextField" fallback="<p>No content</p>" />

By default, if you're using the plugin, the component will use the link resolver and custom HTML serializer provided to it through its linkResolver and htmlSerializer options. In any case, you can still provide those explicitly to the component using the linkResolver and htmlSerializer props:

Copy
<PrismicRichText
  :field="document.data.myRichTextField"
  :link-resolver="linkResolver"
  :html-serializer="htmlSerializer"
/>

For lower-level use cases, a composable is also available to replicate this component behavior. It uses the same props as options, except the wrapper prop, which is omitted.

Copy
import { usePrismicRichText } from "@prismicio/vue";

const { html } = usePrismicRichText({ field: document.data.myRichTextField });

<PrismicText>

Copy
// Not necessary when using the plugin
import { PrismicText } from "@prismicio/vue";

Vue component that renders content from a Prismic Rich Text or Title field as plain text.

Copy
<PrismicText :field="document.data.myTitleField" />

This component wraps its output in a <div> tag. To use a different wrapper tag or wrapper component, use the wrapper prop.

Copy
<PrismicText :field="document.data.myTitleField" wrapper="h1" />

A fallback prop can be provided to define a string to render when the Rich Text or Title field is empty. If a fallback prop is not provided, "" (nothing) is rendered by default for an empty field.

Copy
<PrismicText :field="document.data.myTitleField" fallback="No content" />

For lower-level use cases, a composable is also available to replicate this component behavior. It uses the same props as options, except the wrapper prop, which is omitted.

Copy
import { usePrismicText } from "@prismicio/vue";

const { text } = usePrismicText({ field: document.data.myTitleField });

<PrismicLink>

Copy
// Not necessary when using the plugin
import { PrismicLink } from "@prismicio/vue";

Vue component that renders a link from a Prismic Link field or a Prismic document.

This component automatically resolves a field's link to a URL. It also applies the correct target and rel props if Open in new tab is enabled for the field.

Copy
<PrismicLink :field="document.data.myLinkField">
  Click me
</PrismicLink>

You can also create a link from a document the very same way.

Copy
<PrismicLink :field="document">
  Click me
</PrismicLink>

By default, the <RouterLink> component from Vue Router is used to render internal links, and an <a> HTML element is used for external ones.

These defaults can be overridden globally using the plugin components.linkInternalComponent and components.linkExternalComponent options or locally by using the internalComponent and externalComponent props.

Copy
<PrismicLink
  :field="document.data.myLinkField"
  :internalComponent="MyInternalLink"
  :externalComponent="MyExternalLink"
>
  Click me
</PrismicLink>

If your app uses Route Resolvers when querying for documents, providing a Link Resolver is optional.

If your app does not use the Route Resolver, or requires an override for specific URLs, the component will use the Link Resolver provided to the plugin through its linkResolver option if you're using it or through the component's linkResolver prop. The linkResolver component prop will take precedence over the linkResolver plugin option.

Copy
<PrismicLink
  :field="document.data.myLinkField"
  :linkResolver="linkResolver"
>
  Click me
</PrismicLink>

By default, if "Open in new tab" is enabled for the field, the component will render the rel attribute with a value of "noopener noreferrer".

This default can be overridden globally using the plugin components.linkBlankTargetRelAttribute option or locally by using the blankTargetRelAttribute prop.

Copy
<PrismicLink
  :field="document.data.myLinkField"
  blank-target-rel-attribute="noopener"
>
  Click me
</PrismicLink>

The target and rel props allows your to set explicit value for those attributes.

Copy
<PrismicLink
  :field="document.data.myLinkField"
  target="_top"
  rel="noopener"
>
  Click me
</PrismicLink>

For lower-level use cases, a composable is also available to replicate this component behavior. It uses the same props as options.

Copy
import { usePrismicLink } from "@prismicio/vue";

const {
  type, // suggested, unresolved, component to render
  href,
  target,
  rel
} = usePrismicLink({ field: document.data.myLinkField });

<PrismicImage>

Copy
// Not necessary when using the plugin
import { PrismicImage } from "@prismicio/vue";

<PrismicImage :field="document.data.myImageField" />

By default, an <img /> HTML element is used to render images.

This default can be overridden globally using the plugin components.imageComponent option or locally by using the imageComponent prop.

Copy
<PrismicImage
  :field="document.data.myImageField"
  :image-component="MyImageComponent"
/>

When using a custom image component, it receives src, srcset, alt, and copyright values as additional props.

Imgix parameters can be applied to the rendered image using the imgix-params prop.

Copy
<PrismicImage
  :field="document.data.myImageField"
  :imgix-params="{ sat: 100 }"
/>

Refer to Imgix URL parameters reference for all available options.

An image with a width-based srcset attribute can be rendered using the widths prop.

Copy
<PrismicImage
  :field="document.data.myImageField"
  :widths="[600, 900, 1200]"
/>
<!--
<img alt="..." src="..." srcset="...?width=600 600w, ...?width=900 900w, ...?width=1200 1200w" />
-->

The widths prop accepts two special values:

  • thumbnails bases the widths on your Image field and its responsive views.
  • defaults bases the widths on the plugin components.imageWidthSrcSetDefaults option and fallbacks to @prismicio/helpers defaults if not specified.
Copy
<PrismicImage
  :field="document.data.myImageField"
  widths="thumbnails"
/>
<!-- `srcset` is based on your responsive views
<img alt="..." src="..." srcset="...?width=400 400w, ...?width=800 800w, ...?width=1200 1200w" />
-->

<PrismicImage
  :field="document.data.myImageField"
  widths="defaults"
/>
<!-- `srcset` is based on the plugin option
<img alt="..." src="..." srcset="...?width=600 600w, ...?width=900 900w, ...?width=1200 1200w" />
-->

See MDN's Responsive Images guide to learn more about srcset and its variations.

An image with a pixel-density-based srcset attribute can be rendered using the pixel-densities prop.

Copy
<PrismicImage
  :field="document.data.myImageField"
  :pixel-densities="[1, 2]"
/>
<!--
<img alt="..." src="..." srcset="...?dpr=1 1x, ...?dpr=2 2x" />
-->

The pixel-densities prop accepts one special value of defaults. It bases the pixel densities on the plugin components.imagePixelDensitySrcSetDefaults option and fallbacks to defaults if not specified.

Copy
<PrismicImage
  :field="document.data.myImageField"
  pixel-densities="defaults"
/>
<!-- `srcset` is based on the plugin option
<img alt="..." src="..." srcset="...?dpr=1 1x, ...?dpr=2 2x, ...?dpr=3 3x" />
-->

To learn more about srcset and its variations, see MDN’s Responsive Images guide.

For lower-level use cases, a composable is also available to replicate this component behavior. It uses the same props as options, except the image-component prop, which is omitted.

Copy
import { usePrismicImage } from "@prismicio/vue";

const {
  src,
  srcset,
  alt,
  copyright
} = usePrismicImage({ field: document.data.myImageField });

<PrismicEmbed>

Copy
// Not necessary when using the plugin
import { PrismicEmbed } from "@prismicio/vue";

Vue component that renders content from a Prismic Embed field.

Copy
<PrismicEmbed :field="document.data.myEmbedField" />

This component wraps its output in a <div> tag. To use another wrapper tag or wrapper component, use the wrapper prop.

Copy
<PrismicEmbed :field="document.data.myEmbedField" wrapper="h1" />

This component's role is to render a Prismic Embed field safely. Because Prismic is not able to predict the nature of your embed output, it's your duty to style it accordingly. For that purpose you can target the data attributes generated by <PrismicEmbed> in your CSS.

Copy
/* Style text type embed */
[data-oembed-type="text"] {
  /* ... */
}

/* Style YouTube embed */
[data-oembed-provider="YouTube"] {
  /* ... */
}

/* Style embed from figma.com */
[data-oembed*="figma.com"] {
  /* ... */
}

<SliceZone>

Copy
// Not necessary when using the plugin
import { SliceZone } from "@prismicio/vue";

Vue component that renders content from a Prismic Slice Zone using Vue components for each type of Slice.

For example, if a Slice Zone contains a Text Slice followed by an Images Slice, <SliceZone> will render <TextSlice> and <ImagesSlice> in a list.

Copy
<SliceZone
  :slices="document.data.body"
  :components="defineSliceZoneComponents({
    text: TextSlice,
    images: ImagesSlice,
  })"
/>

Alongside the slices prop, an object of Slice type IDs (for example: "text") mapped to its Vue component (for example: <TextSlice>) should be provided to the components prop. Components can be supplied in a variety of ways.

To ensure that the map is defined properly — and to handle some edge-cases — we provide defineSliceZoneComponents() as a helper. We highly recommend using it when defining your components map.

Copy
import { defineAsyncComponent } from "vue";
import { defineSliceZoneComponents } from "@prismicio/vue";

import FooSlice from "~/slices/FooSlice";

const components = defineSliceZoneComponents({
  // Explicit import
  foo: FooSlice,

  // Assuming "BarSlice" is registered globally in your Vue application
  bar: "BarSlice",

  // Async components are also a great way to achieve code splitting
  baz: defineAsyncComponent(() => import("~/slices/BazSlice.vue")),
});

Slice components are passed four props:

  • slice: The Slice object being rendered.
  • index: The index of the Slice within the Slice Zone.
  • slices: The list of all Slices objects in the Slice Zone.
  • context: Arbitrary data passed to the <SliceZone>'s context prop.

Because defining props in Vue.js is verbose, we provide a helper function to do so: getSliceComponentProps(). With it, a simple Slice component could look like this.

Copy
<template>
  <PrismicRichText :field="slice.primary.text" />
</template>

<!-- Composition API -->
<script setup>
import { getSliceComponentProps } from "@prismicio/vue";

// The array passed to `getSliceComponentProps` is purely optional and acts as a visual hint for you
defineProps(getSliceComponentProps(["slice", "index", "slices", "context"]));
</script>

<!-- Options API -->
<script>
import { getSliceComponentProps } from "@prismicio/vue";

export default {
  // The array passed to `getSliceComponentProps` is purely optional and acts as a visual hint for you
  props: getSliceComponentProps(["slice", "index", "slices", "context"])
}
</script>

If you have data that needs to be shared with all Slice components, provide a value to the context prop of the <SliceZone> component. The value will be passed to each Slice component as a context prop.

Copy
<SliceZone
  :slices="document.data.body"
  :components="defineSliceZoneComponents({
    text: TextSlice,
    images: ImagesSlice,
  })"
  :context="{ foo: 'bar' }"
/>

By default, a "TODO" component will be rendered with a warning if a component is not provided for a Slice type.

This default can be overridden globally using the plugin components.sliceZoneDefaultComponent option or locally by using the defaultComponent prop. The default component is passed the same props listed above.

Copy
<SliceZone
  :slices="document.data.body"
  :default-component="() => null"
/>

The default "TODO" component will not be rendered in production (i.e. when process.env.NODE_ENV is production).

The <SliceZone> component renders with no wrapping element around the list of Slice components. If you need a wrapper tag or component, you can use the wrapper prop.

Copy
<SliceZone
  :slices="document.data.body"
  :components="defineSliceZoneComponents({
    text: TextSlice,
    images: ImagesSlice,
  })"
  wrapper="article"
/>

Composables usage

@prismicio/vue provides Vue composables to use with the Composition API to query content from a Prismic repository.

For client-rendered pages

These composables are designed for client-rendered Vue apps or pages. If you are using a Vue framework with server-side rendering (like Nuxt.js), prefer the framework's standard data fetching practices over these composables.

Every query method from a Prismic client, such as getAllByType() and getSingle(), is provided as a composable.

Copy
import {
  useAllPrismicDocumentsByType,
  useSinglePrismicDocument,
} from "@prismicio/vue";

const { data: documents } = useAllPrismicDocumentsByType("page");
const { data: settingsDocument } = useSinglePrismicDocument("settings");

Composables return the fetching state in addition to the query result and a refresh function. This allows you to render, for example, a "loading" interface while the client is fetching results or a refresh button to get latest data.

Copy
const { data: pages, state, error, refresh } = useAllPrismicDocumentsByType("page")

state can be one of the following values:

  • "idle": The composable is waiting to query the repository.
  • "pending": The composable is querying the repository.
  • "success": The composable successfully queried the repository.
  • "error": The composable encountered an error while querying the repository.

error will contain the thrown error that can be a PrismicError object from @prismic/client if the composable fails to query the repository. The composable will be in the error state.

refresh() is a function that can be awaited. When called the composable will query again the repository.

All composables default to using the @prismicio/client instance injected by the plugin if you are using it. In any case, you can still provide an explicit @prismicio/client instance though the method's last parameter options object.

Copy
import * as prismic from "@prismicio/client";

const endpoint = prismic.getEndpoint("your-repo-name");
const otherClient = prismic.createClient(endpoint);

const { data: documents } = useAllPrismicDocumentsByType("page", {
  client: otherClient
});

Additionally, if a composable requires specific parameters, they can be provided through the same options object. Those parameters are the same as the one used by the related @prismicio/client method.

Copy
const { data: frenchDocuments } = useAllPrismicDocumentsByType("page", {
  lang: "fr-fr"
});

usePrismicDocuments()

Copy
usePrismicDocuments()
usePrismicDocuments(params)

A composable that queries content from the Prismic repository.

This composable accepts the same parameters as the client's get() method.

Copy
const { data: documents, state, error, refresh } = usePrismicDocuments();

useFirstPrismicDocument()

Copy
useFirstPrismicDocument()
useFirstPrismicDocument(params)

A composable that queries content from the Prismic repository and returns only the first result, if any.

This composable accepts the same parameters as the client's getFirst() method.

Copy
const { data: document, state, error, refresh } = useFirstPrismicDocument();

usePrismicDocumentByID()

Copy
usePrismicDocumentByID(id)
usePrismicDocumentByID(id, params)

A composable that queries a document from the Prismic repository with a specific ID.

This composable accepts the same parameters as the client's getByID() method.

Copy
const { data: document, state, error, refresh } = usePrismicDocumentByID("id");

usePrismicDocumentsByIDs()

Copy
usePrismicDocumentsByIDs(arrayOfIDs)
usePrismicDocumentsByIDs(arrayOfIDs, params)

A composable that queries documents from the Prismic repository with specific IDs.

This composable accepts the same parameters as the client's getByIDs() method.

Copy
const { data: documents, state, error, refresh } = usePrismicDocumentsByIDs(["id1", "id2"]);

useAllPrismicDocumentsByIDs()

Copy
useAllPrismicDocumentsByIDs(arrayOfIDs)
useAllPrismicDocumentsByIDs(arrayOfIDs, params)

A composable that queries all documents from the Prismic repository with specific IDs.

This composable accepts the same parameters as the client's getAllByIDs() method.

Copy
const { data: documents, state, error, refresh } = useAllPrismicDocumentsByIDs(["id1", "id2"]);

usePrismicDocumentByUID()

Copy
usePrismicDocumentByUID(documentType, uid)
usePrismicDocumentByUID(documentType, uid, params)

A composable that queries a document from the Prismic repository with a specific UID and Custom Type.

This composable accepts the same parameters as the client's getByUID() method.

Copy
const { data: document, state, error, refresh } = usePrismicDocumentByUID("page", "uid");

usePrismicDocumentsByUIDs()

Copy
usePrismicDocumentsByUIDs(documentType, arrayOfUIDs)
usePrismicDocumentsByUIDs(documentType, arrayOfUIDs, params)

A composable that queries documents from the Prismic repository with specific UIDs of a Custom Type.

This composable accepts the same parameters as the client's getByUIDs() method.

Copy
const { data: documents, state, error, refresh } = usePrismicDocumentsByUIDs("page", ["uid1", "uid2"]);

useAllPrismicDocumentsByUIDs()

Copy
useAllPrismicDocumentsByUIDs(documentType, arrayOfUIDs)
useAllPrismicDocumentsByUIDs(documentType, arrayOfUIDs, params)

A composable that queries all documents from the Prismic repository with specific UIDs of a Custom Type.

This composable accepts the same parameters as the client's getAllByUIDs() method.

Copy
const { data: documents, state, error, refresh } = useAllPrismicDocumentsByUIDs("page", ["uid1", "uid2"]);

useSinglePrismicDocument()

Copy
useSinglePrismicDocument(documentType)
useSinglePrismicDocument(documentType, params)

A composable that queries a singleton document from the Prismic repository for a specific Custom Type.

This composable accepts the same parameters as the client's getSingle() method.

Copy
const { data: document, state, error, refresh } = useSinglePrismicDocument("settings");

usePrismicDocumentsByType()

Copy
usePrismicDocumentsByType(documentType)
usePrismicDocumentsByType(documentType, params)

A composable that queries documents from the Prismic repository for a specific Custom Type.

This composable accepts the same parameters as the client's getByType() method.

Copy
const { data: documents, state, error, refresh } = usePrismicDocumentsByType("page");

useAllPrismicDocumentsByType()

Copy
useAllPrismicDocumentsByType(documentType)
useAllPrismicDocumentsByType(documentType, params)

A composable that queries all documents from the Prismic repository for a specific Custom Type.

This composable accepts the same parameters as the client's getAllByType() method.

Copy
const { data: documents, state, error, refresh } = useAllPrismicDocumentsByType("page");

usePrismicDocumentsByTag()

Copy
usePrismicDocumentsByTag(tag)
usePrismicDocumentsByTag(tag, params)

A composable that queries documents from the Prismic repository with a specific tag.

This composable accepts the same parameters as the client's getByTag() method.

Copy
const { data: documents, state, error, refresh } = usePrismicDocumentsByTag("fruit");

useAllPrismicDocumentsByTag()

Copy
useAllPrismicDocumentsByTag(tag)
useAllPrismicDocumentsByTag(tag, params)

A composable that queries all documents from the Prismic repository with a specific tag.

This composable accepts the same parameters as the client's getAllByTag() method.

Copy
const { data: documents, state, error, refresh } = useAllPrismicDocumentsByTag("fruit");

usePrismicDocumentsByEveryTag()

Copy
usePrismicDocumentsByEveryTag(arrayOfTags)
usePrismicDocumentsByEveryTag(arrayOfTags, params)

A composable that queries documents from the Prismic repository with specific tags. A document must be tagged with all of the queried tags to be included.

This composable accepts the same parameters as the client's getByEveryTag() method.

Copy
const { data: documents, state, error, refresh } = usePrismicDocumentsByTag(["fruit", "vegetable"]);

useAllPrismicDocumentsByEveryTag()

Copy
useAllPrismicDocumentsByEveryTag(arrayOfTags)
useAllPrismicDocumentsByEveryTag(arrayOfTags, params)

A composable that queries all documents from the Prismic repository with specific tags. A document must be tagged with all of the queried tags to be included.

This composable accepts the same parameters as the client's getAllByEveryTag() method.

Copy
const { data: documents, state, error, refresh } = useAllPrismicDocumentsByEveryTag(["fruit", "vegetable"]);

usePrismicDocumentsBySomeTags()

Copy
usePrismicDocumentsBySomeTags(arrayOfTags)
usePrismicDocumentsBySomeTags(arrayOfTags, params)

A composable that queries documents from the Prismic repository with specific tags. A document must be tagged with at least one of the queried tags to be included.

This composable accepts the same parameters as the client's getBySomeTags() method.

Copy
const { data: documents, state, error, refresh } = usePrismicDocumentsBySomeTags(["fruit", "vegetable"]);

useAllPrismicDocumentsBySomeTags()

Copy
useAllPrismicDocumentsBySomeTags(arrayOfTags)
useAllPrismicDocumentsBySomeTags(arrayOfTags, params)

A composable that queries all documents from the Prismic repository with specific tags. A document must be tagged with at least one of the queried tags to be included.

This composable accepts the same parameters as the client's getAllBySomeTags() method.

Copy
const { data: documents, state, error, refresh } = useAllPrismicDocumentsBySomeTags(["fruit", "vegetable"]);

dangerouslyUseAllPrismicDocuments()

Copy
dangerouslyUseAllPrismicDocuments(params)

A composable that queries content from the Prismic repository and returns all matching content. If no predicates are provided, all documents will be fetched.

This composable accepts the same parameters as the client's dangerouslyGetAll() method.

Copy
const { data: documents, state, error, refresh } = dangerouslyUseAllPrismicDocuments();

We recommend caution when using dangerouslyUseAllPrismicDocuments(). Querying all documents in your repository is not performant, and should only be used in unique documents from the Prismic repository with specific tags. A document must be tagged with all of the queried tags to be included. cases.


Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum or using the feedback form above.