Add the Slice Zone to your page

The Slice Zone component is used to seamlessly insert your component libraries on to your page. It does all the hard work of correctly importing all the relevant components and you can learn how to add it below.

Add the Slice Zone to a new page

Inside the pages folder, create a new file called '_uid.vue' and add the following code. The default type of the Slice Zone is the Prismic custom type 'page'. This page's route will dynamically be populated by the URL.

Copy
<template>
    <slice-zone
       type="page"
       :uid="$route.params.uid"
    />
</template>

<script>
import SliceZone from 'vue-slicezone'

export default {
   components: {
       SliceZone
   },
}
</script>

Add the Slice Zone to an existing page

Adding the Slice Zone to any page is a breeze. First, import the component in the script section of your Vue page file.

Copy
import SliceZone from 'vue-slicezone'

Then make sure to add it to your components list.

Copy
components: {
  SliceZone
},

The last thing to do is to add the slice-zone component tag to your template.

Copy
<slice-zone type="page" uid="pageUid"/>

In this component we have specified the Prismic custom type of 'page' and we have the generic UID of 'pageUid', you will replace this UID with the one you add in your Prismic repo.

This is all the code you need to add the SliceZone to your project 😊