<prismic-link> component not generating url's for vue router

Question

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:

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.

Actually the demo from the example exhibits the same trouble. If you goto github.com/lihbr/prismic-demo-the-last-straw and clone it and run it you get the same problem — Alan
– Alan, Commented Oct 19, 2021 at 14:25

lihbr · Accepted Answer · 2021-10-19 15:09:42Z

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!

answered Oct 19, 2021 at 15:09

lihbr

1415 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

<prismic-link> component not generating url's for vue router

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related