URL path appended rather than replaced

Question

I'd actually use some help with the dynamic routing when grouping pages in folder in storyblok.

For some reason, the name of the slug folder attaches to all the link that are currently in the header. So after clicking on a blog, the url changes to localhost:3000/blogs/blog-name and fetches the components of that page which is fine. But then everything gets the 'blogs' word before the url. So home page becomes localhost:3000/blogs/home or about page becomes localhost:3000/blogs/about

This is how I get the links:

<script setup>
const storyblokApi = useStoryblokApi();
const { data } = await storyblokApi.get("cdn/stories/config", {
  version: "draft",
  resolve_links: "url",
});
const headerMenu = ref(null);
headerMenu.value = data.story.content.header_menu;
</script>

<template>
  <header class="w-full h-24 bg-[#f7f6fd]">
    <div class="container h-full mx-auto flex items-center justify-between">
      <NuxtLink to="/">
        <h1 class="text-[#50b0ae] text-3xl font-bold">Storyblok Nuxt</h1>
      </NuxtLink>
      <nav v-if="headerMenu">
        <ul class="flex space-x-8 text-lg font-bold">
          <li v-for="blok in headerMenu" :key="blok._uid">
            <NuxtLink :to="blok.link.cached_url" class="hover:text-[#50b0ae]">
              {{ blok.link.story.name }}
            </NuxtLink>
          </li>
        </ul>
      </nav>
    </div>
  </header>
</template>

and this is the slug

<script setup>
const storyblokApi = useStoryblokApi();
const route = useRoute();
const slug = route.params.slug;
const story = await useStoryblok("blogs/" + slug, {
  version: "draft",
});
</script>

<template>
  <div>
    <StoryblokComponent v-if="story" :blok="story.content" />
  </div>
</template>

Answer 1

Write it like this useStoryblok("/blogs/"..., wit a slash at the beginning.