prismic-svelte v1.0.13
prismic-svelte
WARNING: This project is in early development. See issues and planning on the GitHub repo.
A set of helpers for developing Prismic projects with Svelte.
To do
- Add HTML Serializer to config (and asHTML)
- Add Slices to config
- Create a SliceZone component
- Make SliceZone component work
- Handle the API options
- Add TypeScript and re-enable
config.kit.emitTypes
- Configure previews with client v6
Do we want to add an Image component?
Installation
To add prismic-svelte
, first install:
npm i prismic-svelte@alpha
At the root of your project, create a file called prismic.config.js
. Paste in the following code, and update the values:
const prismicConfig = {
// Fill in your repo name
repoName: 'sam-onboarding-nuxt-blog',
// Define a route for each Custom Type
routes: [
{
type: 'page',
path: '/:uid',
},
{
type: 'post',
path: '/blog/:uid',
},
],
// Add an access token (only if your repo is private)
accessToken: null,
// Add any API options
options: {},
}
export default prismicConfig
In svelte.config.js
, import the plugin and add it to Svelte's preprocessor. Update the repo name.
import { usePrismic } from 'prismic-svelte'
import { repoName } from './prismic.config.js'
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
// hydrate the <div id="svelte"> element in src/app.html
target: '#svelte',
},
preprocess: [usePrismic({ repoName })],
}
Fill in the config options. Only repoName
is required.
repoName
: The name of your repository in Prismic (required).
routes
: A collection of routes for Prismic's Route Resolver.
accessToken
: An access token for the Prismic API; required only when your repo is private.
options
: Options for your Prismic API queries.
To configure previews, create the file /src/routes/preview.js
and paste in the following code:
import { createPreview } from 'prismic-svelte'
import prismicConfig from './../../prismic.config.js'
export async function get({ query, headers }) {
return await createPreview(query, headers, prismicConfig.repoName)
}
Usage
The plugin injects a SliceZone
component and prismic
object into components in the src
folder as needed.
The prismic
object includes a client
method, which you can use to query the Prismic API. The client
is already initialized with the repoName
and options that you specified in svelte.config.js
. You can also pass the fetch
variable (available globally in Svelte, and provided as an argument in SvelteKit's load function) and the session
variable. Passing the session
variable is necessary for previews to work.
In a standard Svelte component:
<!-- Standard .svelte component -->
<script>
$: clientData = null
const getData = async () => {
clientData = await prismic.client(fetch).getAll()
}
getData()
</script>
In a SvelteKit project:
<!-- In a SvelteKit project -->
<script context="module">
export async function load({ fetch, session }) {
const allDocs = await prismic.client(fetch, session).getAll()
return { props: { allDocs } }
}
</script>
<script>
export let allDocs
</script>
The SliceZone accepts a slices
prop and a body
prop. Slices is an object of Slice components. body
is an array of Slice contents.
<SliceZone slices={slices} body={doc.data.body} />
The plugin exports the following properties and methods:
asText()
asHTML()
asLink()
documentAsLink()
asDate()
setClientOptions()
initClient()
usePrismic()
See prismic.io/docs for information on how to use these methods.