@prismicio/svelte - 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>
  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>`

Copy

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

Copy

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

Copy

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

Copy

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

Can't find what you're looking for?

Need technical Support? Spot an error in the documentation? Get in touch with us on our Community Forum.