Your SliceZone is empty and is not (I have the version 0.1.0 from vue-slicezone)

Developing with Prismic
1

Hello everyone, sorry to open this topic again, I was reading the others topics opened with the same title. The last one by example mentioned to update the "vue-slicezone" to "0.1.0", but I already had it, so my issue might be another one or at least I think so.

My json

{
  "name": "my-website",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "slicemachine": "start-slicemachine"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/prismic": "^1.4.0",
    "@prismicio/slice-simulator-vue": "^0.2.0",
    "core-js": "^3.19.3",
    "graphql-request": "^3.7.0",
    "nuxt": "^2.15.8",
    "nuxt-sm": "^0.1.0",
    "vue": "^2.6.14",
    "vue-server-renderer": "^2.6.14",
    "vue-slicezone": "^0.1.0",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^4.46.0"
  },
  "devDependencies": {
    "@nuxtjs/tailwindcss": "^4.2.1",
    "sass": "^1.49.0",
    "sass-loader": "10",
    "slice-machine-ui": "^0.2.0"
  }
}

My nuxt.config.js (module section)

  modules: [["@nuxtjs/prismic", {
    endpoint: smConfig.apiEndpoint|| "",
    apiOptions:{ 
      routes: [
        {
          type:"cases",
          path:"showcases/:uid"
        }
      ]
  }
  }], ["nuxt-sm"]],

So I have this structure under pages folder:

pages
--showcases
----_uid.vue
index

My _id.vue component under showcases

<template>
<div>
    <slice-zone type="cases" :uid="$route.params.uid" />
</div>
</template>
<script>
import SliceZone from "vue-slicezone"

export default {
    components: {
        SliceZone
    },
}

</script>

And for now I want to try to make work the showcases section. Any advice will be really appreciate it, let me know if you need further information :slight_smile:

3

Hello @maria.arce

Welcome to the Prismic community, and thanks for reaching out to us.

If I understand your case correctly, you are trying to hit URL something like showcases/image, where uid value in folder structure /pages/showcases/_uid.vue is image. My question is, are you getting the uid value in _uid.vue?

I am also attaching a nuxt-sm boilerplate project.

Thanks,
Priyanka

4

Hello Priyanka, thank you for the answer, I can console log the uid, however after deleting and rebuilding I can see an error 400 on the console that takes me to a page with the next message "{"type":"Link resolver error","message":"[Link resolver error] Invalid URL pattern for type cases\n'/' expected but 's' found on line:1 col:1"}"

5

Hello @maria.arce

Sorry, I couldn't come back to you, I was out of the office.

It might be an issue with the link resolver configuration in your project. Could you please share your link resolver and repository name with me?

Thanks,
Priyanka

6

Hello Priyanka, thank you for the answer, however I figured out what was going on, so if other people run into that:

2 things, because I am coming from vue 3, now working for first time and nuxt, I realized on my template I needed to use $route.params.id instead ":uid" even if I use that name as a param in my nuxt.config.js.

Second and important. Not sure if this is in some part in the documentation, BUT had issue something about calling the type with "s" at the end, example "case" instead of "cases". So I tested by redoing the type, and removing the "s" at the end and then I was able to see the sliceZone.

7

@maria.arce Great. Thanks for sharing the information with us. Feel free to reach out to us if you have any questions.