Prismic Components 3.0.0-alpha

🤔 Something feels wrong with the components kit? Let us know in the ongoing Vue 3 Kit RFC!

The Components kit takes care of injecting helper components inside your Vue.js application.

Configuration

You can customize the behavior of some of the injected components through the kit configuration.

interface ComponentsOptions {
    link?: {
        anchorTag?: string;
        frameworkLink?: string;
        blankTargetRelAttribute?: string;
    };
}

interface PrismicPluginOptions {
    /* ... */
    components?: ComponentsOptions;
}

const prismic = createPrismic({
    /* ... */
    components: {
        link: {
            anchorTag: "a",
            frameworkLink: "router-link",
            blankTargetRelAttribute: "noopener",
        },
    },
});

const prismic = createPrismic({
    /* ... */
    components: false,
});

Key	Type	Required	Default	Description
`link.anchorTag`	`string`	No	`"a"`	HTML tag to render external links
`link.frameworkLink`	`string`	No	`"router-link"`	Vue component to use to render internal links, has to receive its `href` value through a `to` prop
`link.blankTargetRelAttribute`	`string`	No	`"noopener"`	Value of the `rel` attribute on links with `target="_blank"`

Components

Injected components are made available globally! There's no need to import and register them manually.

Rich Text

The rich text component is a handy helper to display the content of a rich text field inside your application:

<prismic-rich-text :field="doc.richtext" />

<prismic-rich-text
    :field="doc.richtext"
    :link-resolver="anotherLinkResolver"
    :html-serializer="anotherHtmlSerializer"
    wrapper="article"
/>

Prop	Type	Required	Default	Description
`field`	`RichTextField`	Yes		Rich text field to display
`linkResolver`	`LinkResolver`	No	The link resolver provided to `@prismicio/vue` or its default one	Link resolver to use when resolving links inside the provided field
`htmlSerializer`	`HtmlSerializer<string>`	No	The HTML serializer provided to `@prismicio/vue` or its default one	HTML serializer to use when serializing the provided field
`wrapper`	`string`	No	`"div"`	Wrapper tag used to wrap output

Link

The link component takes care of displaying with the right tag/component a link field inside your application:

<prismic-link :field="doc.link">My link</prismic-link>

<prismic-link :field="doc.link" :link-resolver="anotherLinkResolver">
    My link
</prismic-link>

<prismic-link :field="doc.link" v-slot="href"
    >My link to: {{ href }}</prismic-link
>

Prop	Type	Required	Default	Description
`field`	`LinkField`	Yes		Link field to display
`linkResolver`	`LinkResolver`	No	The link resolver provided to `@prismicio/vue` or its default one	Link resolver to use when resolving the provided link field

Image

The image component is a handy helper to display the content of an image field inside your application:

<prismic-image :field="doc.image" />

Prop	Type	Required	Default	Description
`field`	`ImageField`	Yes		Image field to display

Embed

The embed component is a handy helper to display the content of an embed field inside your application:

<prismic-embed :field="doc.embed" />

Prop	Type	Required	Default	Description
`field`	`EmbedField`	Yes		Embed field to display

Edit this page on GitHub Updated at Thu, Aug 12, 2021

Development Kits Prismic DOM

Providers Prismic Provider