@prismicio/svelte v0

Overview

@prismicio/svelte is the official Prismic package for creating web apps with Prismic and Svelte.

To learn to develop with Prismic and Svelte, see our user-friendly Svelte guide.

Dependencies and requirements

This package can only be used in a Svelte project.

Installation

Install this package in your Svelte project:

npm install --save-dev @prismicio/svelte

Example

Here is an example in a Svelte project. The App.svelte file will import the SliceZone and use it to render slices as Svelte components.

src/App.svelte

<script>
  import * as prismic from "@prismicio/client";
  import { SliceZone } from "@prismicio/svelte";

  // Import Slices components and map them to API IDs
  import ExampleSlice from "./slices/ExampleSlice.svelte";

  const components = {
    example_slice_a: ExampleSlice,
  };

  // Query a document from Prismic
  const client = prismic.createClient(
    "example-prismic-repo",
  );
  const promise = client.getFirst();
</script>

{#await promise}
  <p>Loading Slices</p>
{:then document}
  <SliceZone slices={document.data.body} {components} />
{:catch error}
  <pre>{JSON.stringify(error.message, null, 2)}</pre>
{/await}

Each slice component receives a slice object as a prop.

src/slices/ExampleSlice.svelte

<script>
  export let slice;
</script>

<h1>{slice.primary.example_key_text_in_slice}</h1>

Usage

@prismicio/svelte exports the following components to render content from the Prismic API.

`<SliceZone>`

<script>
  import { SliceZone } from "@prismicio/svelte";
  import {
    ExampleSliceA,
    ExampleSliceB,
  } from "$lib/slices";

  export let data;
</script>

<SliceZone
  slices={data.document.data.body}
  components={{
    example_slice_a: ExampleSliceA,
    example_slice_b: ExampleSliceB,
  }}
  context={{ foo: "bar" }}
/>

The SliceZone is a Svelte component that renders an array of Prismic slices with corresponding slice components.

The SliceZone accepts five props:

`slices` array	An array of slices from the Prismic API.
`components` object	An object mapping Svelte slice components to API IDs.
`context` object	Arbitrary data to pass to slice components.
`defaultComponent` object	The component that the `SliceZone` will render when a component cannot be found for a slice. Receives the `slice` object and the `dev` property as props. A built-in default component will be rendered if none is provided. The built-in component will render nothing if `dev` is `false`.
`dev` boolean	Should specify whether the application is in development (`true`) or production (`false`).

`<PrismicLink>`

<script>
  import { PrismicLink } from "@prismicio/svelte";

  export let data;
</script>

<!-- With default text property -->
<PrismicLink field={document.data.example_link} />;

<!-- Overriding with custom children -->
<PrismicLink field={document.data.example_link}>
  Example Link
</PrismicLink>

PrismicLink is a Svelte component that renders a link field, content relationship field, or document from the Prismic API as an a element. PrismicLink accepts all standard a attributes and SvelteKit link options as props. It also accepts the following Prismic-specific props:

`field` object (required)	A link field, content relationship field, or document from the Prismic API.
`linkResolver` function	A function that accepts a document object and returns a URL path, which will be used to resolve the URL for internal links. This option is unnecessary if your client is configured with a Route Resolver. More info.
`target` string	An HTML target attribute. If left `undefined`, links that are set to open in a new window will have a `target="_blank"` attribute applied.
`rel` string	An HTML rel attribute. If undefined and target is `"_blank"`, a value of `"noopener noreferrer"` will be applied.

`<PrismicRichText>`

<script>
  import { PrismicRichText } from "@prismicio/svelte";
  import Title from "../components/Title.svelte";

  export let data;

  const components = {
    h1: Title,
  };
</script>

<PrismicRichText
  field={data.document.data.example_rich_text}
  {components}
/>

PrismicRichText is a Svelte component that renders a title or rich text field from the Prismic API. PrismicRichText accepts the following props:

`field` object (required)	A rich text or title field from the Prismic API.
`components` object	An object to render elements with Svelte components. The key for each property should be a rich text element type (e.g. `paragraph`, `heading1`), and the value should be a Svelte component. The component will receive the element’s `type`, `node`, `text`, and `key` (if provided) as props, and the content as a slot. For more information, see the Rich Text article.

`<PrismicText>`

<script>
  import { PrismicText } from "@prismicio/svelte";

  export let data;
</script>

<PrismicText field={data.document.data.example_rich_text} />

PrismicText is a Svelte component that renders a title or rich text field from the Prismic API as plain text. PrismicText accepts the following props:

`field` object (required)	A rich text or title field from the Prismic API.
`separator` string	An optional separator used to split blocks. Defaults to `\n`.

`<PrismicImage>`

<script>
  import { PrismicImage } from "@prismicio/svelte";

  export let data;
</script>

<PrismicImage field={data.document.data.example_image} />

PrismicImage is a Svelte component that renders an image field from the Prismic API as an optimized image with alt text and an automatically-generated srcset attribute.

`field` object (required)	An image field from the Prismic API.
`imgixParams` object	An object of Imgix URL API parameters to transform the image, e.g. `{ sat: -100 }` for grayscale. See imgix’s Image URL API Reference for a full list of the available parameters.
`widths` array \| string	Widths to be used for the `srcset` attribute, e.g. `[400, 800, 1600]`. Defaults to `[640, 750, 828, 1080, 1200, 1920, 2048, 3840]`.
`pixelDensities` array \| string	Pixel densities to be used for the srcset attribute, e.g. `[2, 4]`. The default values are: `[1, 2, 3]` and can be applied by passing `"defaults"`.
`alt` string	An empty string to declare an image as decorative (such as a patterned background). Any other value is invalid.
`fallbackAlt` string	An empty string to declare an image as decorative (such as a patterned background) only if no alt text has been defined in Prismic. Any other value is invalid.

`<PrismicEmbed>`

<script>
  import { PrismicEmbed } from "@prismicio/svelte";

  export let data;
</script>

<PrismicEmbed field={data.document.data.example_embed} />

PrismicEmbed is a Svelte component that renders an embed field from the Prismic API as an iframe element. PrismicEmbed accepts one prop:

field object (required)

An embed field from the Prismic API.