[Vue Router warn] - When routing to external page w/ PrismicLink component

Developing with Prismic
1

Describe your question/issue in detail

For links I use the PrismicLink component in Nuxt. According to my recording, it uses a regular NuxtLink under the hood.
Now I have the problem when I link to external pages. For example Instagram, Twitter, etc. I get
[Warning] [Vue Router warn]: No match found for location with path ""
Warning. On my component I have also used the external prop as recommended in the Nuxtlink documentation.

So, my whole component looks like this:

        <PrismicLink
            class="p-li"
            v-for="link in hub!.data.links"
            :field="link.pagelinkurl"
            external
         >
            {{ link.pagelinktext }}
         </PrismicLink>
2

Hi @sebastian.wolf298, thanks for opening a topic!

<PrismicLink /> uses <NuxtLink /> under the hood, however it handles the external props itself so you shouldn't need to add external to it (it's actually not supported as a prop on it)

I believe Vue Router might complain about no match found because you're trying to render an empty link field. You can check for empty links in your templates with $prismic.isFilled.link(link) or in your setup function using a computed:

const { isFilled } = usePrismic()

const filledLinks = computed(() => {
  return hub?.data.links.map((link) => isFilled.link(link))
})

Let us know if that solves your issue!

1 Like
3

Hi, thank you for your help!
The links aren't empty. In the dev tools, they're shown just as they should be.
And the computed also return true for all the links.

That's kinda weird I guess...

4

Interesting!

Would you mind sharing more details about your setup?

Sample API responses, value of hub, package.json content, anything you think might be helpful for us to help you troubleshoot your issue?

Just want to acknowledge this sounds weird and does not seem like the intended behavior.

Thanks!

2 Likes
5

Thank you for your help Lucie! But suddenly it's working and the warning is gone, lol

1 Like