Developers / @prismicio/svelte

@prismicio/svelte - 0.0

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:

Copy
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
Copy
<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
Copy
<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>

Copy
<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>

Copy
<script lang="ts">
  import { PrismicLink } from "@prismicio/svelte";

  export let data;
</script>

<PrismicLink
  data-sveltekit-preload-data
  field={data.exampleDocument.data.example_link}
>
  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 Prismic link field, content relationship field, link to media field or document.

linkResolver

function

An optional link resolver to resolve links. The link resolver is unnecessary if queries are performed with the route resolver, which is the preferred way of resolving links.

target

string

An HTML target attribute. If undefined, a target attribute with the value of "_blank" will be conditionally applied if the link is set to open in a new window in Prismic.

rel

string

An HTML rel attribute. If undefined and target is set to "_blank", a value of "noopener noreferrer" will be applied.

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.