Developers / Svelte / Install Prismic

Set up Prismic

This technology has no Slice Machine integration

This framework has no integration with Prismic's developer tool, Slice Machine. You can still build a Prismic website with this technology by using Prismic's Legacy Builder. However, if you're starting a new project with Prismic, we strongly recommend using a technology that integrates with Slice Machine: Next.js or Nuxt.

By the end of this page, you will have a Svelte project set up with basic utilities from Prismic.

Before you start

This guide assumes you have a basic knowledge of Svelte. For an introduction, we recommend Svelte's introductory tutorial.

You will need a Svelte or SvelteKit project initialized. If you don't have one, check out the Svelte or SvelteKit docs for instructions to get started.

Create a repository in Prismic

This is where you will create and manage your content. If you don't already have one, create a repo:

Create Repository

Then, add some content to your repo, so that you have something to template in your Svelte project.

Need some tips on how to get started with your repo? Check out our guides to creating content:

Install Prismic packages

Run this command in your terminal to Install Prismic dependencies:

Copy
npm install @prismicio/client @prismicio/svelte

Further Learning: What do these dependencies do?

@prismicio/client helps with querying the Prismic API. @prismicio/svelte provides a set of components to template the content.

Create an API client

An API client is a collection of methods for querying the Prismic API.

Create a conveniently-located file called prismicio.js. If you're in SvelteKit, we recommend placing this file inside src/lib, so you can access it from your components with the $lib/prismicio alias.

Open src/lib/prismicio.js and paste in the following code, filling in your repository name, optional access token, and routes:

  • SvelteKit
  • Svelte
SvelteKit
src/lib/prismicio.js
Copy
import * as prismic from '@prismicio/client'

const repoName = 'your-repo-name' // Fill in your repository name
const accessToken = '' // If your repository is private, add an access token

// This defines how you will structure URL paths in your project.
// Update the types to match the custom types in your project, and edit
// the paths to match the folder-based routing in your project.
const routes = [
  {
    type: 'page',
    uid: 'homepage',
    path: '/',
  },
  {
    type: 'page',
    path: '/:uid',
  },
]

const createClient = ({ request, fetch } = {}) => {
  const clientOptions = {
    fetch,
    accessToken,
    routes,
  }
  const client = prismic.createClient(repoName, clientOptions)

  if (request) {
    client.enableAutoPreviewsFromReq(request)
  }

  return client
}

export default createClient
Svelte
prismicio.js
Copy
import * as prismic from '@prismicio/client'

const repoName = 'your-repo-name' // Fill in your repository name
const accessToken = '' // If your repository is private, add an access token

// This defines how you will structure URL paths in your project.
// Update the types to match the custom types in your project, and edit
// the paths to match the folder-based routing in your project.
const routes = [
  {
    type: 'page',
    uid: 'homepage',
    path: '/',
  },
  {
    type: 'page',
    path: '/:uid',
  },
]

const createClient = ({ request, fetch } = {}) => {
  const clientOptions = {
    fetch,
    accessToken,
    routes,
  }
  const client = prismic.createClient(repoName, clientOptions)

  if (request) {
    client.enableAutoPreviewsFromReq(request)
  }

  return client
}

export default createClient

Update the routes to match the custom types in your repository. Learn more about Route Resolving.

You will also need to make the following changes:

  • Update the repoName to your own
  • Add an access token if you have one

If you're using SvelteKit, create src/routes/+page.server.js and src/routes/page.svelte and paste in the following content:

  • page.server.js
  • page.svelte
page.server.js
src/routes/+page.server.js
Copy
import { error } from '@sveltejs/kit'
import createClient from '$lib/prismicio'

export async function load({ fetch, request }) {
  const client = createClient({ fetch, request })
  const document = client.getFirst()

  if (document) {
    return { document }
  }

  error(404, 'Not found')
}
page.svelte
src/routes/+page.svelte
Copy
<script>
  import { PrismicRichText } from '@prismicio/svelte'
  export let data
</script>

<PrismicRichText field={data.document.data.title} />
<PrismicRichText field={data.document.data.description} />

For a vanilla Svelte app, paste this content into src/App.svelte:

src/App.svelte
Copy
<script>
  import createClient from './../prismicio' // Update this path if necessary
  import { PrismicText, PrismicRichText } from '@prismicio/svelte'
  import  * as prismic from '@prismicio/client'
  
  const client = createClient()
  const prismicQuery = client.getFirst()
</script>

{#await prismicQuery}
  <p>Loading...</p>
{:then prismicResponse}
 8
	<PrismicRichText field={prismicResponse.data.title} />
  <PrismicRichText field={prismicResponse.data.description} />
{:catch error}
  <pre>{error.message}</pre>
{/await}

Then, run:

Copy
npm run dev

The terminal output should show a server running. When you open it, you should see the start of your site.

← Previous

Overview

Next →

Fetch Data

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.