chore: added articles route to approach testing of usecase

playground/error.vue

@@ -1,3 +1,12 @@
+<script setup>
+defineProps <
+  {
+    error: { statusCode: number, statusMessage: string }
+  } >
+  {};
+
+const handleError = () => clearError({ redirect: "/" });
+</script>
 <template>
   <div class="grid place-items-center h-screen text-center">
     <div class="flex flex-col gap-y-4">
@@ -12,11 +21,3 @@
     </div>
   </div>
 </template>
-
-<script setup>
-defineProps({
-  error: Object
-});
-
-const handleError = () => clearError({ redirect: "/" });
-</script>

playground/pages/articles/[slug].vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const path = useRoute();
+const story = await useAsyncStoryblok(`vue/articles/${path.params.slug}`, {
+  version: "draft",
+  language: "en"
+});
+</script>
+
+<template>
+  <main v-editable class="container mx-auto pt-24">
+    <h2>{{ story.content.title }}</h2>
+  </main>
+</template>

playground/pages/articles/index.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const storyblokApi = useStoryblokApi();
+
+const { data: articles } = await storyblokApi.get("cdn/stories/", {
+  version: "draft",
+  starts_with: "vue/articles",
+  is_startpage: false
+});
+/* const storyblokApi = useStoryblokApi()
+
+const { data: articles } = await storyblokApi.get('cdn/stories/vue', {
+  version: 'draft',
+  starts_with: 'articles',
+  is_startpage: false,
+})
+
+console.count('Articles Fetch') */
+</script>
+
+<template>
+  <div class="container mx-auto">
+    <h1>Articles</h1>
+    <p>Here are some articles</p>
+    <div class="pt-24">
+      <NuxtLink
+        v-for="article in articles.stories"
+        :key="article.uuid"
+        :to="`/articles/${article.slug}`"
+      >
+        <h2>{{ article.name }}</h2>
+      </NuxtLink>
+    </div>
+  </div>
+</template>

playground/pages/index.vue

@@ -9,13 +9,11 @@ const story = await useAsyncStoryblok("vue", {
   resolve_relations: "popular-articles.articles"
 });
 
-const richText = computed(() => renderRichText(story.value.content.richText));
+/* const richText = computed(() => renderRichText(story.value.content.richText)); */
 </script>
 
 <template>
   <div>
-    <NuxtLink to="vue"> Vue </NuxtLink>
-    <div v-html="richText" />
     <StoryblokComponent v-if="story" :blok="story.content" />
   </div>
 </template>