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

Was this article helpful?

Not really

Yes, Thanks

Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum or using the feedback form above.