Simulator

The Simulator acts as a local development environment for your Slices. It previews your Slice components with mock data generated by Slice Machine, allowing you to quickly preview and develop your Slices.

How Does It Do That?

To enable the Simulator on your website the module has to registers a new /simulator route in the Nuxt.js application which is used by Prismic to simulate your Slices within Slice Machine.

Changing the Simulator Route

You can configure the simulator route by providing another path to the simulator key of the module options:

prismic: {
  endpoint: '...',
  simulator: '/my-simulator'
}

Disabling the Simulator

This module comes with simulator enabled by default if @prismicio/slice-simulator-vue or @slicemachine/adapter-nuxt is installed. If you want to disable the simulator on your website you can set the simulator key of the module options to false:

prismic: {
  endpoint: '...',
  simulator: false
}

The module won't inject anymore Prismic Simulator.

Customizing the Preview Page

If you want to provide a custom Simulator page, you can do so by creating it at ~/app/prismic/pages/simulator.vue. Here's its minimum scaffolding:

<template>
  <SliceSimulator v-slot="{ slices }">
    <SliceZone :slices="slices" :components="components" />
  </SliceSimulator>
</template>

<script>
import { SliceSimulator } from '@prismicio/slice-simulator-vue'

// Import your slices here
import { components } from '~/slices'

export default {
  components: {
    SliceSimulator
  },
  data () {
    return { components }
  }
}
</script>