@storyblok/nuxt 7.2.0 → 8.0.1

package/dist/module.d.mts

@@ -1,5 +1,21 @@
 import * as _nuxt_schema from '@nuxt/schema';
+import { AsyncDataOptions, AsyncData, NuxtError } from 'nuxt/app';
+import { ISbResult, ISbStoriesParams, StoryblokBridgeConfigV2 } from '@storyblok/vue';
+import { ComputedRef } from 'vue';
 
+/**
+ * Options for the useAsyncStoryblok composable.
+ * Extends Nuxt's AsyncDataOptions with Storyblok-specific configuration.
+ */
+interface UseAsyncStoryblokOptions extends AsyncDataOptions<ISbResult> {
+    /** Storyblok API parameters for fetching stories */
+    api: ISbStoriesParams;
+    /** Storyblok Bridge configuration for live preview */
+    bridge: StoryblokBridgeConfigV2;
+}
+interface UseAsyncStoryblokResult extends AsyncData<ISbResult, NuxtError<unknown>> {
+    story: ComputedRef<ISbResult['data']['story']>;
+}
 interface ModuleOptions {
     accessToken: string;
     enableSudoMode: boolean;
@@ -9,7 +25,8 @@ interface ModuleOptions {
     apiOptions: any;
     componentsDir: string;
 }
+
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
 export { _default as default };
-export type { ModuleOptions };
+export type { ModuleOptions, UseAsyncStoryblokOptions, UseAsyncStoryblokResult };

package/dist/module.d.ts

@@ -1,5 +1,21 @@
 import * as _nuxt_schema from '@nuxt/schema';
+import { AsyncDataOptions, AsyncData, NuxtError } from 'nuxt/app';
+import { ISbResult, ISbStoriesParams, StoryblokBridgeConfigV2 } from '@storyblok/vue';
+import { ComputedRef } from 'vue';
 
+/**
+ * Options for the useAsyncStoryblok composable.
+ * Extends Nuxt's AsyncDataOptions with Storyblok-specific configuration.
+ */
+interface UseAsyncStoryblokOptions extends AsyncDataOptions<ISbResult> {
+    /** Storyblok API parameters for fetching stories */
+    api: ISbStoriesParams;
+    /** Storyblok Bridge configuration for live preview */
+    bridge: StoryblokBridgeConfigV2;
+}
+interface UseAsyncStoryblokResult extends AsyncData<ISbResult, NuxtError<unknown>> {
+    story: ComputedRef<ISbResult['data']['story']>;
+}
 interface ModuleOptions {
     accessToken: string;
     enableSudoMode: boolean;
@@ -9,7 +25,8 @@ interface ModuleOptions {
     apiOptions: any;
     componentsDir: string;
 }
+
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
 export { _default as default };
-export type { ModuleOptions };
+export type { ModuleOptions, UseAsyncStoryblokOptions, UseAsyncStoryblokResult };

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@storyblok/nuxt",
   "configKey": "storyblok",
-  "version": "7.2.0",
+  "version": "8.0.1",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, addComponentsDir, addPlugin, addImports, addImportsDir } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir, addPlugin, addImports } from '@nuxt/kit';
 
 const module = defineNuxtModule({
   meta: {
@@ -29,6 +29,7 @@ const module = defineNuxtModule({
     nuxt.options.build.transpile.push(resolver.resolve("./runtime"));
     nuxt.options.build.transpile.push("@storyblok/nuxt");
     nuxt.options.build.transpile.push("@storyblok/vue");
+    addImportsDir(resolver.resolve("./runtime/composables"));
     nuxt.options.runtimeConfig.public.storyblok = options;
     const enablePluginCondition = options.usePlugin === true && options.enableSudoMode === false;
     if (enablePluginCondition) {
@@ -57,7 +58,6 @@ const module = defineNuxtModule({
       addImports({ name, as: name, from: "@storyblok/vue" });
     }
     nuxt.options.typescript.hoist.push("@storyblok/vue");
-    addImportsDir(resolver.resolve("./runtime/composables"));
     if (options.devtools) {
       nuxt.hook("devtools:customTabs", (iframeTabs) => {
         iframeTabs.push({

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

@@ -1,6 +1,68 @@
-import type { ISbStoriesParams, ISbStoryData, StoryblokBridgeConfigV2 } from '@storyblok/vue';
-export declare const useAsyncStoryblok: (url: string, apiOptions?: ISbStoriesParams, bridgeOptions?: StoryblokBridgeConfigV2) => Promise<import("vue").Ref<ISbStoryData<import("storyblok-js-client").ISbComponentType<string> & {
-    [index: string]: any;
-}>, ISbStoryData<import("storyblok-js-client").ISbComponentType<string> & {
-    [index: string]: any;
-}>>>;
+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 { DedupeOption } from 'nuxt/app/defaults';
+/**
+ * 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 Bridge configuration for live preview */
+    bridge: StoryblokBridgeConfigV2;
+}
+interface AsyncDataExecuteOptions {
+    dedupe?: DedupeOption;
+    cause?: 'initial' | 'refresh:hook' | 'refresh:manual' | 'watch';
+}
+export interface UseAsyncStoryblokResult {
+    story: ComputedRef<ISbResult['data']['story']>;
+    data: Ref<ISbResult>;
+    pending: Ref<boolean>;
+    error: Ref<NuxtError<unknown> | null>;
+    refresh: (opts?: AsyncDataExecuteOptions) => Promise<void>;
+    execute: (opts?: AsyncDataExecuteOptions) => Promise<void>;
+    clear: () => void;
+}
+/**
+ * Composable for fetching Storyblok stories with async data handling and live preview support.
+ *
+ * This composable combines Nuxt's useAsyncData with Storyblok's bridge functionality to provide:
+ * - Async data fetching with loading and error states
+ * - Automatic caching based on URL and API parameters
+ * - Live preview updates when editing in Storyblok
+ * - SSR/SSG compatibility
+ *
+ * @param url - The story URL path (e.g., 'home', 'blog/my-post')
+ * @param options - Configuration options for AsyncData, API calls and bridge setup
+ * @returns An object containing the async data result with additional story computed property
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * const { data, pending, error, story } = await useAsyncStoryblok('home', {
+ *   api: {
+ *     version: 'published', // or 'draft' for preview
+ *     cv: Date.now()
+ *   },
+ *   bridge: {
+ *     resolveRelations: ['featured-posts.posts', 'featured-posts.authors'],
+ *     resolveLinks: 'url'
+ *   }
+ * })
+ * </script>
+ *
+ * <template>
+ *   <div v-if="pending">Loading...</div>
+ *   <div v-else-if="error">Error: {{ error.message }}</div>
+ *   <div v-else>
+ *     <h1>{{ story?.content?.title }}</h1>
+ *     <div v-html="story?.content?.body"></div>
+ *   </div>
+ * </template>
+ * ```
+ *
+ */
+export declare function useAsyncStoryblok(url: string, options: UseAsyncStoryblokOptions): Promise<UseAsyncStoryblokResult>;
+export {};

package/dist/runtime/composables/useAsyncStoryblok.js

@@ -1,28 +1,38 @@
 import { useStoryblokApi, useStoryblokBridge } from "@storyblok/vue";
-import { onMounted, useAsyncData, useState } from "#imports";
-export const useAsyncStoryblok = async (url, apiOptions = {}, bridgeOptions = {}) => {
+import { computed, watch } from "vue";
+import { useAsyncData } from "#app";
+const stableStringify = (obj) => {
+  const sortedKeys = Object.keys(obj).sort();
+  const sortedObj = sortedKeys.reduce((acc, key) => {
+    acc[key] = obj[key];
+    return acc;
+  }, {});
+  return JSON.stringify(sortedObj);
+};
+export async function useAsyncStoryblok(url, options) {
   const storyblokApiInstance = useStoryblokApi();
-  const uniqueKey = `${JSON.stringify(apiOptions)}${url}`;
-  const story = useState(`${uniqueKey}-state`);
-  onMounted(() => {
-    if (story.value && story.value.id) {
-      useStoryblokBridge(
-        story.value.id,
-        (evStory) => story.value = evStory,
-        bridgeOptions
-      );
-    }
-  });
-  if (!story.value) {
-    const { data } = await useAsyncData(uniqueKey, () => {
-      return storyblokApiInstance.get(
-        `cdn/stories/${url}`,
-        apiOptions
-      );
+  const { api, bridge, ...rest } = options;
+  const uniqueKey = `${stableStringify(api)}${url}`;
+  const result = await useAsyncData(uniqueKey, () => storyblokApiInstance.get(`cdn/stories/${url}`, api), rest);
+  if (import.meta.client) {
+    watch(result.data, (newData) => {
+      if (newData?.data.story && newData.data.story.id) {
+        useStoryblokBridge(newData.data.story.id, (evStory) => {
+          newData.data.story = evStory;
+        }, bridge);
+      }
+    }, {
+      immediate: true
     });
-    if (data) {
-      story.value = data.value?.data.story;
-    }
   }
-  return story;
-};
+  return {
+    data: result.data,
+    pending: result.pending,
+    error: result.error,
+    refresh: result.refresh,
+    execute: result.execute,
+    clear: result.clear,
+    story: computed(() => result.data.value?.data.story)
+  };
+}
+;

package/dist/runtime/plugin.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
 export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@storyblok/nuxt",
   "type": "module",
-  "version": "7.2.0",
+  "version": "8.0.1",
   "description": "Storyblok Nuxt module",
   "homepage": "https://github.com/storyblok/monoblok/tree/main/packages/nuxt#readme",
   "repository": {
@@ -25,7 +25,7 @@
     "dist"
   ],
   "dependencies": {
-    "@storyblok/vue": "9.2.0"
+    "@storyblok/vue": "9.2.1"
   },
   "devDependencies": {
     "@cypress/vite-dev-server": "^6.0.3",