Query with the Slice Zone

The SliceZone is a component you can use to dynamically insert components into your Nuxt app. It's possible to install the SliceZone alone, but in this guide we're assuming that you installed the SliceZone as part of SliceMachine.

With SliceMachine, the SliceZone queries the API based on basic parameters — such as the document type and UID — and receives the slice data for a single document. It then matches the slices from the API with slice components in your Nuxt app and renders them accordingly.

💡Queries outside the Slice Zone

As the name would suggest, the slice-zone component only queries content from the Slice Zone. To query content that is not in slices, you can use the $prismic object.

A Basic SliceZone API Call

The snippet below queries a document in Prismic with the type page and UID (unique identifier) home:

<template>
    <slice-zone
        type="page"
        uid="home"
    />
</template>

<script>
import SliceZone from 'vue-slicezone'

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

Some of the properties you can use on the slice-zone component:

type: the custom type of document you're querying.

uid: the UID (unique identifier) of the document you're querying.

queryType: to specify whether the document type is single or multi (repeatable). Defaults to multi.

lang: the language code for the document.

params: query options, such as fetchLinks.

body: (advanced) in case your slices are not stored in a key called 'body,' the name of the key.

Single Types

When you only need one instance of a certain document type, like a homepage, it's best to create a singleton custom type for that document. This creates a clear structure for your content and prevents you from inadvertently creating multiples.

To query a single type, you can pass the custom type (type) and query type (queryType) to the slice-zone like in the snippet below which queries a singleton document in Prismic with the type about:

<template>
    <slice-zone
        type="about"
        queryType="single"
    />
</template>

<script>
import SliceZone from 'vue-slicezone'

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

⚠️Package Version

To query single types, please make sure you're using nuxt-sm version 0.0.28 or higher.

Repeatable Types

When you have a repeating content type where every document follows a similar format — such as blog posts, videos, or pages — you can model it in Prismic with a repeatable content type. You can query this content with the slice-zone manually, by specifying the uid of the document you want, or dynamically, by getting the uid from the route.

Query Manually

If you want to query a specific document, specify the type of document and uid of the document, the snippet below queries a blog post in Prismic with the UID hello-world:

<template>
    <slice-zone
        type="post"
        uid="hello-world"
    />
</template>

<script>
import SliceZone from 'vue-slicezone'

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

Query Dynamically

In Nuxt, dynamic routes are created by appending an underscore to the beginning of the page component. With Prismic, it's common to render document dynamically with a file called _uid.vue. For instance, the file /pages/blog/_uid.vue will render when you visit example.com/blog/hello-world, with the param hello-world available in $route.params.uid.

This snippet queries a blog post in Prismic with a UID inferred from the route:

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

<script>
import SliceZone from 'vue-slicezone'

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

When someone visits example.com/blog/hello-world, SliceZone will find the document in Prismic of type post and with the UID hello-world and render the slices for that post.

By Language

Do you have multiple versions of your content in different languages? If so, it's very easy to specify which version you want with the slice-zone component. Simply pass the language code (eg: en-us) to the lang attribute: <slice-zone type="page" uid="home" lang="fr-fr">.

Querying Language Dynamically

You can also specify the language dynamically in your URL. To do so, created a folder called /_lang inside your /pages directory, and put all of your pages inside.

/
└── pages/
    └── _lang/
        ├── _uid.vue
        └── index.vue

example.com/en-us will render the content of /pages/_lang/index.vue with $route.params.lang defined as en-us. Similarly, example.com/fr-fr/hello-world will render the content of /pages/_lang/_uid.vue with $route.params.lang defined as fr-fr and $route.params.uid defined as hello-world.

This snippet queries a blog post in Prismic with the UID & Lang derived from the url which matches the folder route /pages/_lang/_uid.vue:

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

<script>
import SliceZone from 'vue-slicezone'

export default {
    components: {
        SliceZone
    },
}
</script>
9 Rue de la Pierre Levée, 75011 Paris