@prismicio/slice-simulator-vue3 Deprecation Guide

@prismicio/slice-simulator-vue3 is deprecated. Its functionalities are now distributed through @slicemachine/adapter-nuxt.

@prismicio/slice-simulator-vue3, a package providing a component to simulate Slices in Slice Machine UI and the Page Builder, is deprecated. Its functionalities are now distributed through @slicemachine/adapter-nuxt.

Update packages in package.json

  • Remove @prismicio/slice-simulator-vue3 from your package.json.
package.json
  {
    "devDependencies": {
-     "@prismicio/slice-simulator-vue3": "^0.1.0"
    }
  }
  • Update your package.json to use the latest version of @slicemachine/adapter-nuxt.
package.json
  {
    "devDependencies": {
+     "@slicemachine/adapter-nuxt": "^0.3.0"
    }
  }
  • Update your installed packages with npm.
npm install

Handling breaking changes

The following changes are required when upgrading your simulator to @slicemachine/adapter-nuxt v0.

Replace imports

Replace imports for @prismicio/slice-simulator-vue3 with @slicemachine/adapter-nuxt on your simulator page.

./pages/slice-simulator.vue
- import { SliceSimulator } from '@prismicio/slice-simulator-vue3'
+ import { SliceSimulator } from '@slicemachine/adapter-nuxt/simulator'

Remove state prop if still present

The deprecated state prop from @prismicio/slice-simulator-vue3 has been removed with @slicemachine/adapter-nuxt. If you were still using it, you now have to remove it:

./pages/slice-simulator.vue
  <template>
    <SliceSimulator
- 	  :state="state"
		  #default="{ slices }"
		 >
      <SliceZone :slices="slices" :components="components" />
    </SliceSimulator>
  </template>

  <script setup lang="ts">
  import { SliceSimulator } from '@slicemachine/adapter-nuxt/simulator'
- import state from '~~/.slicemachine/libraries-state.json'
  import { components } from '~/slices'
  </script>