1

I am following along with Lucie Habere creating a recipe site w/Vue Router & Prismic. The problem I am having is that prismic-link component on my index.vue page is not generating the anchor tags href field for vue router.

In looking in dev tools I see that in my response the results objects url field is blank where as on the sample site page it returns the relative path to the page:

(i.e. url "/recipes/gluten-free-oat-dumplings").

So, obviously the anchor tags that prismic-link generate have href="" attributes values. And therein I assume lies the problem.

Also I notice my initial query to Prismic does not include query parameters:

(https://mybestrecipes.cdn.prismic.io/api/v2/documents/search?ref=YWhMghIAAElp5kmP&q=[[at(document.type, "recipe")]]&pageSize=100)

whereas Lucie's example does

(https://the-last-straw.cdn.prismic.io/api/v2/documents/search?ref=YRv4vBIAAB8AWKJm&q=[[at(document.type, "recipes")]]&routes=[{"type":"home","path":"/"},{"type":"recipes","path":"/recipes/:uid"}]&pageSize=100).

I have also added added "runtimeCompiler :true into vue.config.js file. All to no avail. I dont know if the problem lies with my content modeling because you don't get to see the Prismic schema from the video. Here is my prismic.js:

import { createPrismic } from "@prismicio/vue";

const prismic = createPrismic({
  endpoint: "mybestrecipes",
  clientConfig: {
    defaultParams: {
      routes: [
        { type: "home", path: "/" },
        { type: "recipe", path: "/recipe/:uid" },
      ],
    },
  },
});

export default prismic;

Here are some snapshots from devtools:

url="null

tags

Headers

Coincidentally I cloned her repo and the same problem occurred. And yet the demo site works ok.

Any help in getting this straightened out is appreciated.

Alan
  • 1,067
  • 1
  • 23
  • 37
  • 1
    Actually the demo from the example exhibits the same trouble. If you goto https://github.com/lihbr/prismic-demo-the-last-straw and clone it and run it you get the same problem – Alan Oct 19 '21 at 14:25

1 Answers1

4

Lucie here~

Indeed on the stream with Alex we used the alpha version of the kit. We have since released some breaking changes to the underlying client kit (because we're in alpha): the routes parameter is no longer nested under defaultParams, you should be fine going with something like this now:

import { createPrismic } from "@prismicio/vue";

const prismic = createPrismic({
  endpoint: "mybestrecipes",
  clientConfig: {
    routes: [
      { type: "home", path: "/" },
      { type: "recipe", path: "/recipe/:uid" },
    ],
  },
});

export default prismic;

The live demo is still working because still using an old version of the kit :relaxed: I'll update it later this week!

Let us know if anything!

lihbr
  • 141
  • 4