@slicemachine/adapter-sveltekit - v0.0
@slicemachine/adapter-sveltekit
adds support for SvelteKit in Slice Machine.
This package works in a SvelteKit project with slice-machine-ui
installed.
The best way to configure a project with Slice Machine is by running the following command in a SvelteKit project. This command will install @slicemachine/adapter-sveltekit
along with other Prismic packages and add Prismic-specific configurations to your project.
npx @slicemachine/init@latest
For more information on configuring a SvelteKit project with Slice Machine, see our SvelteKit guide.
If you want to install this package on its own, run this command:
npm install --save-dev @slicemachine/adapter-sveltekit
{
"repositoryName": "example-prismic-repo",
"adapter": "@slicemachine/adapter-sveltekit",
"libraries": ["./src/lib/slices"],
"localSliceSimulatorURL": "http://localhost:5173/slice-simulator"
}
You can also specify options for the adapter:
{
"repositoryName": "example-prismic-repo",
"adapter": {
"resolve": "@slicemachine/adapter-sveltekit",
"options": {
"typescript": true
}
},
"libraries": ["./src/lib/slices"]
}
Here are the available options:
format
boolean
Determines if generated files should be formatted using Prettier (default: true
).
typescript
boolean
Determines if generated files should use TypeScript rather than JavaScript (default: true
only if the project contains a tsconfig.json
file, otherwise false
).
generatedTypesFilePath
string
A filepath denoting where generated TypeScript types will be saved (default: prismicio-types.d.ts
).
In order to simulate slices in Slice Machine, the adapter requires a page that renders the <SliceSimulator>
component from @slicemachine/adapter-sveltekit/simulator
. The URL for this page should be specified in the localSliceSimulatorURL
property of slicemachine.config.json
.
<script>
import { SliceSimulator } from '@slicemachine/adapter-sveltekit/simulator';
import { SliceZone } from '@prismicio/svelte';
import { components } from '$lib/slices';
</script>
<SliceSimulator let:slices>
<SliceZone {slices} {components} />
</SliceSimulator>
Was this article helpful?
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.