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 >
    <div >
      <NuxtLink to="/">
        <h1 >Storyblok Nuxt</h1>
      </NuxtLink>
      <nav v-if="headerMenu">
        <ul >
          <li v-for="blok in headerMenu" :key="blok._uid">
            <NuxtLink :to="blok.link.cached_url" >
              {{ 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>

CodePudding user response：

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