@storyblok/nuxt 4.2.2 → 4.4.0

package/README.md

@@ -114,11 +114,11 @@ To link your Vue components to their equivalent you created in Storyblok:
 
 #### Composition API
 
-The simplest way is by using the `useStoryblok` one-liner composable (it's autoimported) and passing as a first parameter a name of your content page from Storyblok (in this case, our content page name is `vue`, by default you get a content page named `home`):
+The simplest way is by using the `useAsyncStoryblok` one-liner composable (it's autoimported) and passing as a first parameter a name of your content page from Storyblok (in this case, our content page name is `vue`, by default you get a content page named `home`):
 
 ```html
 <script setup>
-  const story = await useStoryblok("vue", { version: "draft" });
+  const story = await useAsyncStoryblok("vue", { version: "draft" });
 </script>
 
 <template>
@@ -126,16 +126,19 @@ The simplest way is by using the `useStoryblok` one-liner composable (it's autoi
 </template>
 ```
 
-Which is the short-hand equivalent to using `useStoryblokApi` and `useStoryblokBridge` functions separately:
+Which is the short-hand equivalent to using `useStoryblokApi` inside `useAsyncData` and `useStoryblokBridge` functions separately:
 
 ```html
 <script setup>
   const story = ref(null);
   const storyblokApi = useStoryblokApi();
-  const { data } = await storyblokApi.get("cdn/stories/vue", {
+  const { data } = await useAsyncData(
+    'vue',
+    async () => await storyblokApi.get(`cdn/stories/vue`, {
     version: "draft"
-  });
-  story.value = data.story;
+  })
+  );
+  story.value = data.value.data.story;
 
   onMounted(() => {
     useStoryblokBridge(story.value.id, (evStory) => (story.value = evStory));
@@ -147,6 +150,8 @@ Which is the short-hand equivalent to using `useStoryblokApi` and `useStoryblokB
 </template>
 ```
 
+> Using `useAsyncData` SSR and SSG capabilities are enabled.
+
 #### Rendering Rich Text
 
 You can easily render rich text by using the `renderRichText` function that comes with `@storyblok/nuxt` and a Vue computed property:
@@ -163,8 +168,16 @@ You can easily render rich text by using the `renderRichText` function that come
 
 ### API
 
+#### useAsyncStoryblok(slug, apiOptions, bridgeOptions)
+
+(Recommended Option) Use [`useAsyncData`](https://v3.nuxtjs.org/api/composables/use-async-data/) and [`useState`](https://v3.nuxtjs.org/api/composables/use-state) under the hood for generating SSR or SSG applications.
+
+Check the available [apiOptions](https://github.com/storyblok/storyblok-js-client#class-storyblok) (passed to `storyblok-js-client`) and [bridgeOptions](https://www.storyblok.com/docs/Guides/storyblok-latest-js?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt) (passed to the Storyblok Bridge).
+
 #### useStoryblok(slug, apiOptions, bridgeOptions)
 
+It could be helpful to use `useStoryblok` instead of `useAsyncStoryblok` when we need to make client-side requests, for example, getting personalized data for a logged user.
+
 Check the available [apiOptions](https://github.com/storyblok/storyblok-js-client#class-storyblok) (passed to `storyblok-js-client`) and [bridgeOptions](https://www.storyblok.com/docs/Guides/storyblok-latest-js?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt) (passed to the Storyblok Bridge).
 
 #### useStoryblokApi()

package/dist/module.d.ts

@@ -1,6 +1,6 @@
 import { resolve } from 'path';
 import { fileURLToPath } from 'url';
-import { defineNuxtModule, addComponentsDir, addPlugin, addAutoImport } from '@nuxt/kit';
+import { defineNuxtModule, addComponentsDir, addPlugin, addAutoImport, addAutoImportDir } from '@nuxt/kit';
 
 // -- Unbuild CommonJS Shims --
 import __cjs_url__ from 'url';
@@ -37,6 +37,7 @@ var module = defineNuxtModule({
       "renderRichText"
     ];
     names.forEach((name) => addAutoImport({ name, as: name, from: "@storyblok/vue" }));
+    addAutoImportDir(resolve(runtimeDir, `./composables`));
   }
 });
 

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { resolve } from 'path';
 import { fileURLToPath } from 'url';
-import { defineNuxtModule, addComponentsDir, addPlugin, addAutoImport } from '@nuxt/kit';
+import { defineNuxtModule, addComponentsDir, addPlugin, addAutoImport, addAutoImportDir } from '@nuxt/kit';
 
 // -- Unbuild CommonJS Shims --
 import __cjs_url__ from 'url';
@@ -37,6 +37,7 @@ const module = defineNuxtModule({
       "renderRichText"
     ];
     names.forEach((name) => addAutoImport({ name, as: name, from: "@storyblok/vue" }));
+    addAutoImportDir(resolve(runtimeDir, `./composables`));
   }
 });
 

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

@@ -0,0 +1 @@
+export function useAsyncStoryblok(url: any, apiOptions?: {}, bridgeOptions?: {}): Promise<any>;

package/dist/runtime/composables/useAsyncStoryblok.mjs

@@ -0,0 +1,29 @@
+import { useStoryblokApi, useStoryblokBridge } from "@storyblok/vue";
+import { useAsyncData, useState, onMounted } from "#imports";
+
+export const useAsyncStoryblok = async (
+  url,
+  apiOptions = {},
+  bridgeOptions = {}
+) => {
+  const story = useState(url, () => null);
+  const storyblokApiInstance = useStoryblokApi();
+
+  onMounted(() => {
+    if (story.value && story.value.id) {
+      useStoryblokBridge(
+        story.value.id,
+        (evStory) => (story.value = evStory),
+        bridgeOptions
+      );
+    }
+  });
+
+  const { data } = await useAsyncData(
+    url,
+    async () => await storyblokApiInstance.get(`cdn/stories/${url}`, apiOptions)
+  );
+  story.value = data.value.data.story;
+
+  return story;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storyblok/nuxt",
-  "version": "4.2.2",
+  "version": "4.4.0",
   "description": "Storyblok Nuxt.js module",
   "main": "./src/module.js",
   "module": "./src/module.js",
@@ -27,7 +27,7 @@
     "test:e2e-watch": "start-server-and-test playground:run http://localhost:3000 cy:open"
   },
   "dependencies": {
-    "@storyblok/vue": "^6.2.1"
+    "@storyblok/vue": "^6.3.0"
   },
   "devDependencies": {
     "@nuxt/kit": "^3.0.0-rc.7",

package/src/module.js

@@ -5,7 +5,8 @@ import {
   defineNuxtModule,
   addPlugin,
   addComponentsDir,
-  addAutoImport
+  addAutoImport,
+  addAutoImportDir
 } from "@nuxt/kit";
 
 export default defineNuxtModule({
@@ -46,5 +47,6 @@ export default defineNuxtModule({
     names.forEach((name) =>
       addAutoImport({ name, as: name, from: "@storyblok/vue" })
     );
+    addAutoImportDir(resolve(runtimeDir, `./composables`));
   }
 });

package/src/runtime/composables/useAsyncStoryblok.js

@@ -0,0 +1,29 @@
+import { useStoryblokApi, useStoryblokBridge } from "@storyblok/vue";
+import { useAsyncData, useState, onMounted } from "#imports";
+
+export const useAsyncStoryblok = async (
+  url,
+  apiOptions = {},
+  bridgeOptions = {}
+) => {
+  const story = useState(url, () => null);
+  const storyblokApiInstance = useStoryblokApi();
+
+  onMounted(() => {
+    if (story.value && story.value.id) {
+      useStoryblokBridge(
+        story.value.id,
+        (evStory) => (story.value = evStory),
+        bridgeOptions
+      );
+    }
+  });
+
+  const { data } = await useAsyncData(
+    url,
+    async () => await storyblokApiInstance.get(`cdn/stories/${url}`, apiOptions)
+  );
+  story.value = data.value.data.story;
+
+  return story;
+};