Basic dynamic routing - Nuxtjs

Developing with Prismic
1

Hi,

still learning, i'm trying to render a blog post named "article-1" which i created on my dashboard. I put an uid on it and i followed your doc but i have the error when i type : localhost:3000/article-1 :

Capture d’écran 2022-10-17 à 16.13.21
Capture d’écran 2022-10-17 à 16.13.212556×1236 213 KB

This is my code _uid.vue

<template>
  <div>
    <slice-zone type="blog" :uid="$route.params.uid" />
  </div>
</template>
  
  <script>
    import SliceZone from 'vue-slicezone'
  
    export default {
      components: {
        SliceZone,
      },
      async asyncData({ $prismic, params, error }) {
    const document = await $prismic.api.getByUID("blog", params.uid)
    if (document) {
      return { document }
    } else {
      error({ statusCode: 404, message: "Page not found" })
    }
  }
    }
  </script>type or paste code here

and finally my github link :

Thanks for your help !

2

Hey @ducuingg, seems like you're still using a deprecated package: vue-slicezone.

Now you can use @prismicio/vue instead:

1 Like
4

Thanks, the error message is gone but the content of my blog don't appear, can you tell me if something is wrong in my _uid.vue ?

<template>
  <div class="content">
    <slice-zone type="blog" :uid="$route.params.uid" />
  </div>
</template>
  
  <script>
    import { SliceZone } from "@prismicio/vue";
  
    export default {
      components: {
        SliceZone,
      },
      async asyncData({ $prismic, params, error }) {
    const document = await $prismic.api.getByUID("blog", params.uid)
    console.log(document)
    if (document) {
      return { document }
    } else {
      error({ statusCode: 404, message: "Page not found" })
    }
  }
    }
  </script>
  
  <style scoped>
.content{
  margin-top:500px;
}
</style>```
5

Hey Guillaume,

Try passing the SliceZone a prop of the document slices like:
<SliceZone :slices="document.data.body" />

You may also need to pass the SliceZone an component object of your slices.
like:
:components="defineSliceZoneComponents({ text: TextSlice, images: ImagesSlice, })

2 Likes