Use SliceSimulator with multiple target libraries

Developing with Prismic
1

Hi folks!
Had a question I was hoping someone would know the answer to. I am trying to use separate target libraries in order to keep my slices organized. Not all slices will be used on every page so I am scoping certain slices into folders by page. The issue I am running into is that the Slice Simulator cannot find any slices outside the "slices" directory by default. If I change the code to point towards my "HomeSlices" directory like this:

import { SliceSimulator } from "@prismicio/slice-simulator-react";
import { SliceZone } from "@prismicio/react";

import state from "../.slicemachine/libraries-state.json";
import { components } from "../HomeSlices";

const SliceSimulatorPage = () => (
  <SliceSimulator
    sliceZone={(props) => <SliceZone {...props} components={components} />}
    state={state}
  />
);

export default SliceSimulatorPage;

then the simulator will be unable to preview any slices in the default "Slices" directory. Could be that I am missing something fairly obvious here but I cannot find a ton of documentation on how to use the different target libraries other than initial setup so figured i'd just ask.

3

Hello @jc.lunardini

Welcome to the Prismic community, and thanks for reaching out to us.

Have you added target libraries to the sm.json file as described here?

Thanks,
Priyanka

4

Hi Priyanka,

I have indeed added the library to sm.json, and can select it when creating a new slice but can only simulate one library at a time

6

Hello @jc.lunardini

To use slicesimulator with multiple target libraries, you must import all the libraries as components in the slice-simulator.jsx file given in that example: slice-machine/slice-simulator.jsx at 77d343ce6eb5d3e995a2a1e2dc1e1fb1ce1851b6 · prismicio/slice-machine · GitHub

Let me know if you have any further assistance.

Thanks,
Priyanka

7

Thank you so much! I hadn't seen that example and now that I have, my issue is resolved.

8

Great @jc.lunardini. I am glad to help you. Feel free to reach out to us whenever you have any issues.

10

Hi Priyanka, I don't really know how to achieve this in a Nuxt 3 website.

I already added the new slices library to slicemachine.config.ts, and I can add slices there with SM, I can also import the new slices library directly in a page template, and use it through the <slize-zone> component, but I don't know how to load both slice libraries at the same time, since I want to render both. I tried to use:

<slice-zone :slices="doc.slices" :components="[components, newComponents]" />

...but doesn't work.

So just to clarify, I can use my new library slices by importing them (it should be great to do it automatically since it's defined in the config), but i don't know how to use both libraries at the same time.

Thank you.

12

Hello @cerrutti,

To be clear, are you looking to use both libraries simultaneously with the slice simulator? I'd like to understand your use case for using both libraries together. Can you explain more?

Thanks,
Priyanka

13

Hi Priyanka,

Sorry I thought I replied this message.
Yes, I needed to load 2 different slice libraries into de SliceZone Nuxt 3 component.
And this is how I finally achieved it:

<template>
  <slice-zone :slices="page?.data.slices ?? []" :components="{ ...componentsA, ...componentsB }" />
</template>

<script setup>
import { components as componentsA }  from '@/slicesA'
import { components as componentsB }  from '@/slicesB'

const { params: { uid } } = useRoute()
const { client } = usePrismic()

const { data: page } = await useAsyncData('page', () => client.getByUID('page', uid))
</script>

Hope this snippet can help someone else. The target is to have a common slice library for all projects, and a custom library to fit specific project needs.