Add the Slice Zone to your page

The Slice Zone component is used to insert your component libraries in to the page. You can learn more about how exactly it works here.

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.

<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.

import SliceZone from 'vue-slicezone'

Then make sure to add it to your components list.

components: {
  SliceZone
},

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

<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 😊

9 Rue de la Pierre Levée, 75011 Paris