@storyblok/nuxt 7.2.0 → 8.0.0

package/dist/module.json

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

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

@@ -1,6 +0,0 @@
-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;
-}>>>;

package/dist/runtime/composables/useAsyncStoryblok.js

@@ -1,28 +1,31 @@
 import { useStoryblokApi, useStoryblokBridge } from "@storyblok/vue";
-import { onMounted, useAsyncData, useState } from "#imports";
-export const useAsyncStoryblok = async (url, apiOptions = {}, bridgeOptions = {}) => {
+import { computed, useAsyncData, watch } from "#imports";
+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 const useAsyncStoryblok = async (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 {
+    ...result,
+    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.0",
   "description": "Storyblok Nuxt module",
   "homepage": "https://github.com/storyblok/monoblok/tree/main/packages/nuxt#readme",
   "repository": {
@@ -66,7 +66,7 @@
   },
   "scripts": {
     "build": "nuxt-module-build prepare && nuxt-module-build build",
-    "dev": "nuxi dev playground",
+    "dev": "nuxi dev playground-e2e",
     "dev:build": "nuxi build playground",
     "dev:preview": "nuxi preview playground",
     "prepare:playground": "nuxi prepare playground",