Create Slices

This technology has no Slice Machine integration

This framework has no integration with Prismic's developer tool, Slice Machine. You can still build a Prismic website with this technology by using Prismic's Legacy Builder. However, if you're starting a new project with Prismic, we strongly recommend using a technology that integrates with Slice Machine: Next.js or Nuxt.

In Prismic, slices are sections of your webpage. On this page, you'll add a SliceZone component to your project, which will dynamically render slice data as website sections.

In Prismic, slices are content components. For instance, in a blog post custom type you might have a Pull Quote slice, a Text Block slice, and an Image Gallery slice. Users can compose pages with slices while developers have control over the data structure and the code.

Create a slice

Inside your components/ directory, add a folder called slices/.

In Prismic, navigate to the custom type that you're developing (for instance, "page" or "blog_post") and add a slice. For simplicity, let's call it text_slice. This slice will render a rich text field. Add a rich text field to the slice, then save your custom type.

Create a new document, add the slice, and enter some content.

Convention: Slice IDs are snake_cased and slice components are PascaleCased

Prismic recommends a casing convention for naming slices. In your content model, write the API ID for each slice in snake_case. In your project, name your slice component in PascaleCase (like any component).

For example, if the slice is called "image_gallery" in Prismic, it should be called "ImageGallery.vue" in Vue.

Now, in your slices/ directory, create a Vue component called TextSlice.vue. In TextSlice.vue, your slice data will be available as a prop called "slice." Here's how you might template it:

Copy

<template>
  <PrismicRichText :field="slice.primary.rich_text_field" />
</template>

<script>
export default {
  name: 'TextSlice',
  props: {
    slice: Object
  }
}
</script>

Add the `<SliceZone>` to a page

Open the component where you would like to render your slices. This should be the page where you make a query to Prismic and render one document. Here, we'll assume it's a document called "homepage":

Copy

<template>
  <!-- 
    Add the SliceZone to your template, and pass the slice
    data and your slice components
  -->
  <SliceZone
    :slices="document.data.slices"
    :components="{
      text_slice: TextSlice,
    }"
  />
</template>

<script>
// Import your slices
import TextSlice from './slices/TextSlice'

export default {
  data () {
    return {
      TextSlice,
      document: null,
    }
  },
  methods: {
    getContent: async () => {
      this.document = await this.$prismic.client.getByUID('page', 'homepage')
    }
  },
  created () {
    this.getContent();
  }
}
</script>

Query Prismic for your document. Your document will have a slices property, which contains all of the document's slices. You pass this to the SliceZone as one prop.

Create an object in which each property's name is a slice API ID and the value is the corresponding slice component. Pass this object to the <SliceZone> as a components prop.

Add more slices

The above example will only render your TextSlice. But, you can add many more slices. To do so:

Create a slice in Prismic and define the data model.
Create a slice component in Vue.
Import the slice component to your page and add it to the components prop.

← Previous

Template Content

Deploy Your App

Can't find what you're looking for?

Need technical Support? Spot an error in the documentation? Get in touch with us on our Community Forum.