I’m working with nuxt3 and prismic as cms. For the page content I’m using the slice machine. When adding the slice zone to my template, it displays only “Placeholder component for hero (variation: default) Slices”-text. This case my component being hero. But same for all component.

How can i get some real data?

Page:

<script setup>
  import { components } from '~/slices'
  const { client } = usePrismic()
  const route = useRoute()

  const { data: chapter } = await useAsyncData('doc', () => 
    client.getByUID('chapter', route.params.slug, { fetchLinks: [''] }).then((d) => {
      return d;
    })
  )
</script>

<template>
  <slice-zone :components="components" :slices="chapter.data.slices" />
</template>

Hero component

<script>
  export default {
    name: 'Hero'
  }
</script>

<template>
  <div>
    {{ slice.primary.date }}
  </div>
</template>