Working with variable user data within Slices and pulling in Content Type user data in to a slice

Developing with Prismic
1

I've searched the documentation but it's not clear how to reference variables in a slice.

1. How do I refer to variables included in the slice UI in the slice code?

The dummy code provided on a new slice provides this for example:

<prismic-rich-text v-if="slice.primary.title" :field="slice.primary.title" />

So if I create a new slice in the UI, is that how I refer to things?
slice.primary.name_of_field?

What is slice.primary?
What else is in slice?

2. How do I pull in data from the outer page or template that the slice is on?

How?

2

The best way for looking at the data is either using Vue devtools, or simply logging it out:

<pre>{{ slice }}</pre>

As for getting external data, you can pass data around in the usual Vue way (I assume you are familiar).

It sounds like you have a lot of questions, so it might be easier to break them up and deal with individually.

1 Like
3

Hey @online!

When creating a project using Slice machine, fields inside slices are referenced as easily as you saw in the code snippet that you shared. Are you using Next or Nuxt?

Slice Machine simplifies the way data is retrieved and does the hard work for you; connecting your repository endpoint to your project, as well as the queries made to retrieve each document so you only have to worry about creating content and templating it when working with the Slice Zone.

slice.primary is just calling entering the response of a slice. After that you just need to call all the fields inside of it. So take this example. I have a Slice called HeroText and inside of it it has

  • A Title field with the API Id of title
  • A Rich Text field with the API Id of description
  • An image field with the API Id of illustration

My template would look like this:

<template>
  <section class="section">
    <prismic-rich-text v-if="slice.primary.title" :field="slice.primary.title" />
    <prismic-rich-text v-if="slice.primary.description" :field="slice.primary.description" />
    <prismic-image :field="slice.primary.illustration" />
  </section>
</template>

The easiest way to create Slices and Components with Slice machine is by using the create slice command, read the article (this one is for nuxt): Creating your own Slices & Components

1 Like
4

Thanks both for your insights.

I think I’ve not been totally clear.
So let’s say I have a content_type for Posts which itself includes it’s own title, tagline and author.

I want to access fields from the parent that’s calling the slice from within my slice, how do I reference them?

Eg. What do I need to do in the posts file to send an object across to the slice… and within the slice how do I reference the parents paramaters, preferably accessing them in the slice html as something like doc.title and doc.author.

Thanks!

Here’s my current nuxt file for posts.

posts/_uid.vue

<template>
  <main title="post">
    <h1>post</h1>
    <h1 class="text-orange-500">{{ $prismic.asText(doc.title) }}</h1>
    <hero-contained/>
    <slice-zone type="post" :uid="$route.params.uid" :title="doc.title" />
    <share-print/>
    <related-articles/>
    <subscribe-action/>
  </main>
</template>

<script>
  import SliceZone from 'vue-slicezone'
  export default {
    name: 'post',
    components: {
      SliceZone
    },
    head() {
        return {
            title: 'Head Title',
        }
    },
    async asyncData({ $prismic, params, error }) {
      try {
        const content_type = 'post'
        const document = (await $prismic.api.getByUID('post', params.uid)).data
        return {
            doc: document,
        }
      } catch (e) {
          // error({ statusCode: 404, message: 'Page not found' })
      }
    }
  }
</script>
5

If you want to access doc inside of slice-zone, use a prop:

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

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.