Feat(typing): added generic support and imporved return type for useAsyncStoryblok

README.md

@@ -275,6 +275,36 @@ Which is the short-hand equivalent to using `useStoryblokApi` inside `useState`
 
 > The `useState` is an SSR-friendly `ref` replacement. Its value will be preserved after server-side rendering (during client-side hydration).
 
+You can also use the `useAsyncStoryblok` composable in a type-safe way:
+
+```html
+<script setup lang="ts">
+  import type { SbBlokData } from "@storyblok/js";
+
+  type MyArticleSbBlock = SbBlokData & {
+    title: string;
+    body: string;
+  };
+
+  const story = await useAsyncStoryblok<MyArticleSbBlock>(
+    "vue",
+    { version: "draft", resolve_relations: "Article.author" }, // API Options
+    { resolveRelations: ["Article.author"], resolveLinks: "url" } // Bridge Options
+  );
+
+  if (story.value.status) {
+    throw createError({
+      statusCode: story.value.status,
+      statusMessage: story.value.response
+    });
+  }
+</script>
+
+<template>
+  <StoryblokComponent v-if="story" :blok="story.content" />
+</template>
+```
+
 #### Rendering Rich Text
 
 You can easily render rich text by using the `renderRichText` function that comes with `@storyblok/nuxt` and a Vue computed property:

playground/pages/articles/[slug].vue

@@ -1,13 +1,23 @@
 <script setup lang="ts">
+import type { ISbComponentType } from "storyblok-js-client";
+
 const path = useRoute();
-const story = await useAsyncStoryblok(`vue/articles/${path.params.slug}`, {
-  version: "draft",
-  language: "en"
-});
+
+type SbArticle = ISbComponentType<"article"> & {
+  title: string;
+};
+
+const story = await useAsyncStoryblok<SbArticle>(
+  `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>
+    <h2>{{ story?.content.title }}</h2>
   </main>
 </template>

playground/pages/index.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
+import type { SbBlokData } from "@storyblok/js";
 // const storyblokApi = useStoryblokApi();
 // // Checking custom Flush method
 // storyblokApi.flushCache();
 
-const story = await useAsyncStoryblok("vue", {
+const story = await useAsyncStoryblok<SbBlokData>("vue", {
   version: "draft",
   language: "en",
   resolve_relations: "popular-articles.articles"

src/runtime/composables/useAsyncStoryblok.ts

@@ -1,15 +1,18 @@
 import { useStoryblokApi, useStoryblokBridge } from "@storyblok/vue";
 import type { ISbStoriesParams, StoryblokBridgeConfigV2, ISbStoryData } from '@storyblok/vue';
+import type { ISbComponentType } from 'storyblok-js-client';
 import { useState, onMounted, useAsyncData } from "#imports";
 
-export const useAsyncStoryblok = async (
+export const useAsyncStoryblok = async <
+  SbComponent extends ISbComponentType<string>,
+>(
   url: string,
   apiOptions: ISbStoriesParams = {},
-  bridgeOptions: StoryblokBridgeConfigV2 = {}
-) => {
+  bridgeOptions: StoryblokBridgeConfigV2 = {},
+): Promise<Ref<ISbStoryData<SbComponent> | undefined>> => {
   const storyblokApiInstance = useStoryblokApi();
   const uniqueKey = `${JSON.stringify(apiOptions)}${url}`;
-  const story = useState<ISbStoryData>(`${uniqueKey}-state`);
+  const story = useState<ISbStoryData<SbComponent>>(`${uniqueKey}-state`);
 
   onMounted(() => {
     if (story.value && story.value.id) {
@@ -28,7 +31,7 @@ export const useAsyncStoryblok = async (
         apiOptions
       );
     })
-    if(data) {
+    if (data) {
       story.value = data.value?.data.story
     }
   }