Basic dynamic routing - Nuxtjs

[ducuingg (Guillaume Ducuing)]

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 :

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 :

GitHub - ducuingg/eniblock-exo-prismic

Thanks for your help !

[Pau]

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

Now you can use @prismicio/vue instead:

@prismicio/vue Technical Reference

[ducuingg (Guillaume Ducuing)]

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>```

[jake (Jake Walters)]

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, })