---
title: "@prismicio/vue - v6"
tags: ["latest"]
category: "api-references"
audience: developers
lastUpdated: "2026-01-15T00:40:43.000Z"
---
# Overview
`@prismicio/vue` is the official Prismic package for creating [Vue.js](https://vuejs.org)-based websites.
With this package, you can:
* Query Prismic content with a dedicated [client](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#createclient).
* Display Prismic [images](https://prismic.io/docs/fields/image.md), [links](https://prismic.io/docs/fields/link.md), and [rich text](https://prismic.io/docs/fields/rich-text.md) using components.
* Display [slice zones](https://prismic.io/docs/slice.md) with custom components.
This page documents all APIs provided by `@prismicio/vue`.
> See the [Nuxt guide](https://prismic.io/docs/nuxt.md) to learn how to build websites using this package.
> **Important**
>
> We only guarantee support with Nuxt websites.
# Install
`@prismicio/vue` is automatically installed when [bootstrapping](https://prismic.io/docs/nuxt.md#set-up-a-nuxt-website) a [Nuxt](https://nuxt.com) project with `@slicemachine/init`.
```sh
npx @slicemachine/init@latest
```
It can also be manually installed in any Vue project:
```sh
npm install --save @prismicio/vue @prismicio/client
```
[`@prismicio/client`](https://prismic.io/docs/technical-reference/prismicio-client.md) is a peer dependency and must be installed.
# Register the Vue plugin
`@prismicio/vue` provides a [Vue plugin](https://vuejs.org/guide/reusability/plugins) that injects a [Prismic client](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#createclient) and [`isFilled`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#isfilled) helpers into your project.
> The plugin is automatically registered in Nuxt projects using [`@nuxtjs/prismic`](https://prismic.io/docs/technical-reference/nuxtjs-prismic/v5.md).
1. **Configure your plugin with `createPrismic`**
`createPrismic` configures a Vue plugin with your Prismic repository.
```ts filename=prismic.ts
import { createClient } from "@prismicio/client";
import { createPrismic } from "@prismicio/vue";
const client = createClient("example-prismic-repo");
const prismic = createPrismic({ client });
export default prismic;
```
2. **Register the plugin in your Vue app**
The plugin needs to be registered in your Vue app.
```ts filename=main.ts
import { createApp } from "vue";
import App from "./App.vue";
import prismic from "./prismic";
createApp(App).use(prismic).mount("#app");
```
# Access Prismic client and `isFilled` helpers
The plugin injections can be accessed with `usePrismic` in your component [setup](https://vuejs.org/api/composition-api-setup.html#composition-api-setup) and `$prismic` in your template sections.
> `usePrismic` is automatically imported in Nuxt projects using [`@nuxtjs/prismic`](https://prismic.io/docs/technical-reference/nuxtjs-prismic/v5.md).
```vue filename=App.vue
```
# API
## `createPrismic`
Creates a [Vue plugin](https://vuejs.org/guide/reusability/plugins) with your Prismic endpoint and additional configuration.
```ts
createPrismic({ client });
```
| Property | Type | Description | Default |
| ----------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------- |
| client | PrismicClient | A [Prismic client](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#createclient) instance to inject into the Vue app. | None |
| linkResolver (optional) | (field: ContentRelationshipField) => string \| null \| undefined | A default [link resolver](https://prismic.io/docs/route-resolver.md#link-resolver) used to resolve links when [route resolvers](https://prismic.io/docs/route-resolver.md) cannot be used. | None |
| components (optional) | object (see definition below) | Options to configure `@prismicio/vue`'s components. | `RouterLink \|\| NuxtLink` |
**Child properties:**
| Property | Type | Description | Default |
| -------------------------------- | ------------------------------------ | ----------------------------------------------------------------------------------- | -------------------------- |
| linkInternalComponent (optional) | Component \| string | The default component rendered for internal URLs. | `RouterLink \|\| NuxtLink` |
| linkExternalComponent (optional) | Component \| string | The default component rendered for external URLs. | `"a" \|\| NuxtLink` |
| richTextComponents (optional) | RichTextComponents & TableComponents | The default components or shorthand definitions for rich text and table components. | None |
## `usePrismic`
Returns the Prismic client instance and `isFilled` helpers injected by the plugin.
```ts
const { client, isFilled } = usePrismic();
```
# Components
## ``
Displays an optimized image from an [image field](https://prismic.io/docs/fields/image.md).
```vue-html
```
> See examples and tips on the [image field](https://prismic.io/docs/fields/image.md#display-images) page.
| Prop | Type | Description | Default |
| ------------------------- | --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
| field | ImageField | An image field to display. | None |
| imgixParams (optional) | object | An object of [imgix URL parameters](https://docs.imgix.com/apis/rendering). See an [example](https://prismic.io/docs/fields/image.md#transform-images-through-the-api). | None |
| alt (optional) | "" | Declare an image as decorative. | None |
| fallbackAlt (optional) | "" | Declare an image as decorative if the image field does not have alt text. | None |
| widths (optional) | number\[] \| "thumbnails" \| "defaults" | Widths used to build a `srcset` value for the image field. - `"thumbnails"` uses the image field's thumbnails. - `"defaults"` uses the plugin's `components.imageWidthSrcSetDefaults` value. Only one of `widths` or `pixelDensities` can be used. | `"defaults"` |
| pixelDensities (optional) | number\[] \| "defaults" | Widths used to build a `srcset` value for the image field. - `"defaults"` uses the plugin's `components.imagePixelDensitySrcSetDefaults` value. Only one of `widths` or `pixelDensities` can be used. | None |
## ``
Displays a link from a [link field](https://prismic.io/docs/fields/link.md) or a document.
```vue-html
```
> See examples and tips on the [link field](https://prismic.io/docs/fields/link.md#display-links) page.
| Prop | Type | Description | Default |
| ---------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------- |
| field | LinkField | A link field to link. Only one of `field` or `document` can be used. | None |
| document | PrismicDocument | A Prismic document to link. Only one of `field` or `document` can be used. | None |
| linkResolver (optional) | (field: ContentRelationshipField) => string \| null \| undefined | A [link resolver](https://prismic.io/docs/route-resolver.md#link-resolver) function used to determine a URL from the `field` or `document` prop. If it returns a value, it takes priority over a [route resolver](https://prismic.io/docs/route-resolver.md). Prefer using a [route resolver](https://prismic.io/docs/route-resolver.md) on your Prismic client instead. | The plugin's `linkResolver` value, if provided. |
| rel (optional) | undefined \| string \| ((metadata) => string \| undefined) | A `rel` attribute's value to apply on the link. A function can be provided to use the link's metadata to determine the `rel` value. Use `undefined` to remove the `rel` attribute. | `"noreferrer"` if the link is external. |
| internalComponent (optional) | Component \| string | The component rendered for internal URLs. | `RouterLink \|\| NuxtLink` |
| externalComponent (optional) | Component \| string | The component rendered for external URLs. | `"a" \|\| NuxtLink` |
## ``
Displays plain text from a [rich text field](https://prismic.io/docs/rich-text.md).
```vue-html
```
| Prop | Type | Description | Default |
| -------------------- | ------------- | ----------------------------------------- | ------- |
| field | RichTextField | A rich text field to render. | None |
| fallback (optional) | string | Rendered if the rich text field is empty. | None |
| separator (optional) | string | Separator used between text blocks. | `" "` |
## ``
Displays formatted text from a [rich text field](https://prismic.io/docs/rich-text.md).
```vue-html
```
> See examples and tips on the [rich text field](https://prismic.io/docs/fields/rich-text.md#display-rich-text) page.
| Prop | Type | Description | Default |
| ----------------------- | ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
| field | RichTextField | A rich text field to render. | None |
| fallback (optional) | Component | Rendered if the rich text field is empty. | None |
| components (optional) | VueRichTextSerializer | A map of rich text block types to Vue components or shorthand objects with HTML attributes and an optional `as` property.The available heading types are `heading1` to `heading6`. The available block types are `paragraph`, `preformatted`, `list`, `oList`, `listItem`, `oListItem`, `image`, and `embed`. The available inline types are `strong`, `em`, `hyperlink`, `label`, and `span`. See an [example](https://prismic.io/docs/fields/rich-text.md#use-custom-ui-components). | Standard HTML elements (e.g. `heading1` becomes a ``). |
| linkResolver (optional) | (field: ContentRelationshipField) => string \| null \| undefined | A [link resolver](https://prismic.io/docs/route-resolver.md#link-resolver) function used to determine a URL from the `field` or `document` prop. If it returns a value, it takes priority over a [route resolver](https://prismic.io/docs/route-resolver.md). Prefer using a [route resolver](https://prismic.io/docs/route-resolver.md) on your Prismic client instead. | The plugin's `linkResolver` value, if provided. |
## ``
Displays a formatted table from a [table field](https://prismic.io/docs/fields/table.md).
```vue-html
```
> See examples and tips on the [table field](https://prismic.io/docs/fields/table.md#display-tables) page.
| Prop | Type | Description | Default |
| --------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
| field | TableField | A table field to render. | None |
| fallback (optional) | Component | Rendered if the table field is empty. | None |
| components (optional) | VueTableComponents & VueRichTextSerializer | A map of table elements and rich text block types to Vue components or shorthand objects with HTML attributes.The available table elements are `table`, `thead`, `tbody`, `tr`, `th`, and `td`. The available rich text block types are `paragraph`, `em`, `strong`, and `hyperlink`. See an [example](https://prismic.io/docs/fields/table.md#use-custom-ui-components). | Standard HTML elements (e.g. `table` becomes a ``). |
## ``
Renders [slices](https://prismic.io/docs/slice.md) from a slice zone.
```vue-html
```
> See examples and tips on the [slices](https://prismic.io/docs/slices.md#display-slices) page.
| Prop | Type | Description | Default |
| --------------------------- | ----------------------------- | ------------------------------------------------------ | ------- |
| slices | SliceZone | A slice zone to render. | None |
| components | object (see definition below) | A map of slice types to Vue components. | None |
| defaultComponent (optional) | Component | Rendered if a slice does not have a component mapping. | None |
| context (optional) | any | Arbitrary data made available to all slice components. | None |
**SliceComponentProps definition:**
| Property | Type | Description | Default |
| -------- | -------- | ------------------------------------------------ | ------- |
| slice | Slice | The slice object being displayed. | None |
| slices | Slice\[] | All slices in the slice zone. | None |
| index | number | The index of the slice in the slice zone. | None |
| context | unknown | The data passed to `SliceZone`'s `context` prop. | None |
## ``
Adds support for [live slice previews](https://prismic.io/docs/nuxt.md#live-previews-in-the-page-builder) in the Page Builder and Slice Machine.
```vue-html
```
> See the [Nuxt guide](https://prismic.io/docs/nuxt.md#live-previews-in-the-page-builder) to learn how to set up live previews.
| Prop | Type | Description | Default |
| --------------------- | ------ | -------------------------------------------------------------------------------- | ----------- |
| zIndex (optional) | number | The z-index value of the simulator so that it's displayed above layout elements. | `100` |
| background (optional) | string | The background color of the simulator to match your website's design. | `"#ffffff"` |
# Prop helpers
## `getSliceComponentProps`
Returns prop types for a slice component. Components rendered by [``](#slicezone) should use this helper.
```ts
defineProps(getSliceComponentProps());
```
## `getRichTextComponentProps`
Returns prop types for a [rich text](https://prismic.io/docs/fields/rich-text.md) field block component. Components rendered by [``](#prismicrichtext) should use this helper.
```ts
defineProps(getRichTextComponentProps(type));
```
| Prop | Type | Description | Default |
| --------------- | ------ | ------------------------------------ | ------- |
| type (optional) | string | The component's rich text node type. | None |
## `getTableComponentProps`
Returns prop types for a [table](https://prismic.io/docs/fields/table.md) field component. Components rendered by [``](#prismicrichtext) should use this helper.
```ts
defineProps(getTableComponentProps.table());
defineProps(getTableComponentProps.thead());
defineProps(getTableComponentProps.tbody());
defineProps(getTableComponentProps.tr());
defineProps(getTableComponentProps.th());
defineProps(getTableComponentProps.td());
```
# Upgrading from v5
Follow these steps to upgrade an existing project to `@prismicio/vue` v6.
1. **Install `@prismicio/vue` v6**
`@prismicio/vue` v6 is automatically installed when using [`@nuxtjs/prismic` v5](https://prismic.io/docs/technical-reference/nuxtjs-prismic/v5.md).
```sh
npm install --save @prismicio/vue@^6
```
2. **Install `@prismicio/client`**
[`@prismicio/client`](https://prismic.io/docs/technical-reference/prismicio-client.md) is now a peer dependency and must be installed.
```sh
npm install --save @prismicio/client
```
3. **Update `createPrismic` configuration**
> **Important**
>
> This step is only necessary if you're not using [`@nuxtjs/prismic`](https://prismic.io/docs/technical-reference/nuxtjs-prismic/v5.md).
The plugin no longer supports creating a client from a repository name and client config. Configure it with a client instance directly.
```ts filename=prismic.ts
import { createPrismic } from "@prismicio/vue"; // [!code --:5]
const prismic = createPrismic({
endpoint: "example-prismic-repo",
});
import { createClient } from "@prismicio/client"; // [!code ++:6]
import { createPrismic } from "@prismicio/vue";
const client = createClient("example-prismic-repo");
const prismic = createPrismic({ client });
```
4. **Import components manually**
> **Important**
>
> This step is only necessary if you're not using [`@nuxtjs/prismic`](https://prismic.io/docs/technical-reference/nuxtjs-prismic/v5.md).
The `injectComponents` plugin option was removed and components are no longer globally registered. Import them manually in your components.
```vue
```
5. **Update `usePrismic()` and `$prismic` usage**
The plugin now only exposes `client` and `isFilled`. The following properties and methods are no longer available:
* `filter` and `cookie` — import them from [`@prismicio/client`](https://prismic.io/docs/technical-reference/prismicio-client.md) instead.
* `asText`, `asHTML`, `asLink`, `asLinkAttrs`, `asDate`, `asImageSrc`, `asImageWidthSrcSet`, `asImagePixelDensitySrcSet`, `documentToLinkField` — prefer using Vue components for templating, or import them from [`@prismicio/client`](https://prismic.io/docs/technical-reference/prismicio-client.md) in your component script sections.
```ts
const { // [!code --:9]
filter
cookie,
asText,
asHTML,
asLink,
asLinkAttrs,
// ...
} = usePrismic();
import { // [!code ++:9]
filter,
cookie,
asText,
asHTML,
asLink,
asLinkAttrs,
// ...
} from "@prismicio/client";
```
6. **Replace `components.linkRel` plugin option**
This option was removed. Create your own link component with defaults instead if you need to customize the default preset.
```vue filename=components/MyPrismicLink.vue
```
7. **Replace `components.imageWidthSrcSetDefaults` and `components.imagePixelDensitySrcSetDefaults` plugin options**
These options were removed. Create your own image component with defaults instead if you need to customize the default presets.
```vue filename=components/MyPrismicImage.vue
```
8. **Replace `components.sliceZoneDefaultComponent` plugin option**
This option was removed. Create your own slice zone component with defaults instead if you need to customize the default component.
```vue filename=components/MySliceZone.vue
```
9. **Replace `richTextSerializer` plugin option**
This option was removed. Use the [`components.richTextComponents`](#createprismic) option or the [`` `components` prop](#prismicrichtext) instead.
10. **Replace ``'s HTML serializer**
> **Important**
>
> This step is only necessary if you were using ``'s `serializer` prop.
HTML serializers are no longer supported. Migrate to the [component-based serializer](#prismicrichtext).
```vue
// [!code --:4]
// [!code ++:4]
```
[Learn more about templating rich text fields](https://prismic.io/docs/fields/rich-text.md#use-custom-ui-components)
11. **Wrap ``, ``, and `` output**
> **Important**
>
> This step is only necessary if you were using the `wrapper` prop on these components.
The `wrapper` prop was removed. Wrap the component in your template instead. If you had attributes like `class` directly on the component, move them to the wrapper element.
```vue-html
// [!code --:5]
// [!code ++:3]
```
12. **Replace `` with `v-html`**
`` was removed. Use `v-html` instead.
```vue-html
// [!code --:1]
// [!code ++:1]
```
[Learn more about templating embed fields](https://prismic.io/docs/fields/embed.md#display-embed-fields)
13. **Clean up your plugin configuration**
The `injectComponents`, `richTextSerializer`, `components.linkRel`, `components.imageWidthSrcSetDefaults`, `components.imagePixelDensitySrcSetDefaults`, and `components.sliceZoneDefaultComponent` options were removed.
```ts filename=prismic.ts
import { createPrismic } from "@prismicio/vue";
const prismic = createPrismic({
client,
injectComponents: true, // [!code --]
richTextSerializer: serializer, // [!code --]
components: {
linkRel: "noopener noreferrer", // [!code --]
imageWidthSrcSetDefaults: [640, 828, 1200, 2048, 3840], // [!code --]
imagePixelDensitySrcSetDefaults: [1, 2], // [!code --]
sliceZoneDefaultComponent: DefaultSlice, // [!code --]
},
});
```
14. **Replace `prismicKey` import**
`prismicKey` is no longer exported. Use `usePrismic()` directly.
```ts
import { inject } from "vue"; // [!code --:3]
import { prismicKey } from "@prismicio/vue";
const prismic = inject(prismicKey);
import { usePrismic } from "@prismicio/vue"; // [!code ++:2]
const prismic = usePrismic();
```
15. **Update type imports**
Some types have been renamed.
* `VueRichTextSerializer` is now `RichTextComponents`
* `PrismicPluginOptions` is now `PrismicPluginConfig`
```ts
import type { VueRichTextSerializer } from "@prismicio/vue"; // [!code --]
import type { RichTextComponents } from "@prismicio/vue"; // [!code ++]
import type { PrismicPluginOptions } from "@prismicio/vue"; // [!code --]
import type { PrismicPluginConfig } from "@prismicio/vue"; // [!code ++]
```