@storyblok/nuxt 10.1.10 → 11.0.1

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@storyblok/nuxt",
   "configKey": "storyblok",
-  "version": "10.1.10",
+  "version": "11.0.1",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -54,17 +54,15 @@ const module$1 = defineNuxtModule({
       "renderRichText",
       "StoryblokRichText",
       "useStoryblokRichText",
-      "MarkTypes",
-      "BlockTypes",
-      "LinkTypes",
-      "TextTypes",
-      "ComponentBlok",
-      "asTag",
-      "StoryblokRichTextDocumentNode",
-      "StoryblokRichTextImageOptimizationOptions",
-      "StoryblokRichTextNode",
-      "StoryblokRichTextNodeTypes",
-      "StoryblokRichTextOptions"
+      "SbRichTextDoc",
+      "SbRichTextImageOptions",
+      "SbRichTextMark",
+      "SbRichTextNode",
+      "SbRichTextProps",
+      "SbRichTextRenderContext",
+      "SbVueRichTextComponentMap",
+      "SbVueRichTextProps",
+      "SbVueRichTextRenderContext"
     ];
     for (const name of names) {
       addImports({ name, as: name, from: "@storyblok/vue" });

package/dist/runtime/composables/useAsyncStoryblok.d.ts

@@ -1,13 +1,21 @@
-import { type ISbResult, type ISbStoriesParams, type StoryblokBridgeConfigV2 } from '@storyblok/vue';
-import { type ComputedRef, type Ref } from 'vue';
 import type { AsyncDataOptions, NuxtError } from '#app';
+import { type ISbResult, type ISbStoriesParams, type StoryblokBridgeConfigV2 } from '@storyblok/vue';
+import { type ComputedRef, type MaybeRefOrGetter, type Ref } from 'vue';
 /**
  * Options for the useAsyncStoryblok composable.
  * Extends Nuxt's AsyncDataOptions with Storyblok-specific configuration.
  */
 export interface UseAsyncStoryblokOptions extends AsyncDataOptions<ISbResult> {
-    /** Storyblok API parameters for fetching stories */
-    api: ISbStoriesParams;
+    /**
+     * Storyblok API parameters for fetching stories.
+     *
+     * Accepts a plain object, a ref, a computed, or a getter. The current value
+     * is read (via `toValue`) on every fetch, so reactive params stay in sync.
+     * Note that changing a reactive value does not auto-refetch on its own —
+     * trigger a re-fetch by calling `refresh()` or by passing a `watch` option
+     * (e.g. `watch: [version]`), which Nuxt's `useAsyncData` re-runs on.
+     */
+    api: MaybeRefOrGetter<ISbStoriesParams>;
     /** Storyblok Bridge configuration for live preview */
     bridge: StoryblokBridgeConfigV2;
 }
@@ -63,6 +71,20 @@ export interface UseAsyncStoryblokResult {
  * </template>
  * ```
  *
+ * @example
+ * Reactive params: pass a getter/computed and refetch when it changes.
+ * ```vue
+ * <script setup>
+ * const version = ref('draft')
+ * const { story, refresh } = await useAsyncStoryblok('home', {
+ *   api: () => ({ version: version.value }),
+ *   bridge: {},
+ *   // re-fetch automatically when `version` changes
+ *   watch: [version],
+ * })
+ * // ...or trigger manually: version.value = 'published'; await refresh()
+ * </script>
+ * ```
  */
 export declare function useAsyncStoryblok(url: string, options: UseAsyncStoryblokOptions): Promise<UseAsyncStoryblokResult>;
 export {};

package/dist/runtime/composables/useAsyncStoryblok.js

@@ -1,6 +1,6 @@
-import { useStoryblokApi, useStoryblokBridge } from "@storyblok/vue";
-import { computed, watch } from "vue";
 import { useAsyncData } from "#app";
+import { useStoryblokApi, useStoryblokBridge } from "@storyblok/vue";
+import { computed, toValue, watch } from "vue";
 const stableStringify = (obj) => {
   const sortedKeys = Object.keys(obj).sort();
   const sortedObj = sortedKeys.reduce((acc, key) => {
@@ -12,41 +12,34 @@ const stableStringify = (obj) => {
 export async function useAsyncStoryblok(url, options) {
   const storyblokApiInstance = useStoryblokApi();
   const { api, bridge = {}, ...rest } = options;
-  const uniqueKey = `${stableStringify(api)}${url}`;
+  const uniqueKey = () => `${stableStringify(toValue(api))}${url}`;
   const bridgeOptions = {
     ...bridge,
-    resolveRelations: bridge.resolveRelations ?? api.resolve_relations,
-    resolveLinks: bridge.resolveLinks ?? api.resolve_links
+    resolveRelations: bridge.resolveRelations ?? toValue(api).resolve_relations,
+    resolveLinks: bridge.resolveLinks ?? toValue(api).resolve_links
   };
-  const result = await useAsyncData(uniqueKey, () => storyblokApiInstance.get(`cdn/stories/${url}`, api), rest);
+  const result = await useAsyncData(uniqueKey, () => storyblokApiInstance.get(`cdn/stories/${url}`, { ...toValue(api) }), rest);
   if (import.meta.client) {
-    const registerBridge = (storyId) => {
-      useStoryblokBridge(storyId, (evStory) => {
-        if (result.data.value) {
+    let registeredId;
+    watch(
+      () => result.data.value?.data?.story?.id,
+      (storyId) => {
+        if (!storyId || storyId === registeredId) {
+          return;
+        }
+        registeredId = storyId;
+        useStoryblokBridge(storyId, (evStory) => {
+          if (!result.data.value) {
+            return;
+          }
           result.data.value = {
             ...result.data.value,
-            data: {
-              ...result.data.value.data,
-              story: evStory
-            }
+            data: { ...result.data.value.data, story: evStory }
           };
-        }
-      }, bridgeOptions);
-    };
-    const id = result.data.value?.data?.story?.id;
-    if (id) {
-      registerBridge(id);
-    } else {
-      const stopWatch = watch(
-        () => result.data.value?.data?.story?.id,
-        (storyId) => {
-          if (storyId) {
-            stopWatch();
-            registerBridge(storyId);
-          }
-        }
-      );
-    }
+        }, bridgeOptions);
+      },
+      { immediate: true }
+    );
   }
   return {
     data: result.data,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@storyblok/nuxt",
   "type": "module",
-  "version": "10.1.10",
+  "version": "11.0.1",
   "description": "Storyblok Nuxt module",
   "homepage": "https://github.com/storyblok/monoblok/tree/main/packages/nuxt#readme",
   "repository": {
@@ -30,7 +30,7 @@
     "nuxt": "^3.15.0 || ^4.0.0"
   },
   "dependencies": {
-    "@storyblok/vue": "10.1.10"
+    "@storyblok/vue": "11.0.1"
   },
   "devDependencies": {
     "@cypress/vite-dev-server": "^6.0.3",