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.