diff --git a/src/module.ts b/src/module.ts index 94986fe..15d6e72 100644 --- a/src/module.ts +++ b/src/module.ts @@ -16,6 +16,7 @@ export interface ModuleOptions { devtools: boolean, // enable nuxt/devtools integration apiOptions: any, // storyblok-js-client options componentsDir: string, // enable storyblok global directory for components + asyncDataOutput: boolean, // enable asyncData output, will become default } export default defineNuxtModule({ @@ -31,6 +32,7 @@ export default defineNuxtModule({ devtools: false, componentsDir: '~/storyblok', apiOptions: {}, + asyncDataOutput: false, }, setup(options, nuxt) { const resolver = createResolver(import.meta.url); diff --git a/src/runtime/composables/useAsyncStoryblok.ts b/src/runtime/composables/useAsyncStoryblok.ts index f0281af..30449a5 100644 --- a/src/runtime/composables/useAsyncStoryblok.ts +++ b/src/runtime/composables/useAsyncStoryblok.ts @@ -1,11 +1,14 @@ import { useStoryblokApi, useStoryblokBridge } from "@storyblok/vue"; import type { ISbStoriesParams, StoryblokBridgeConfigV2, ISbStoryData } from '@storyblok/vue'; -import { useState, onMounted, useAsyncData } from "#imports"; +import { useState, onMounted, useAsyncData, useRuntimeConfig } from "#imports"; +import { type AsyncDataOptions } from "#imports"; +import deprecate from "util-deprecate"; export const useAsyncStoryblok = async ( url: string, apiOptions: ISbStoriesParams = {}, - bridgeOptions: StoryblokBridgeConfigV2 = {} + bridgeOptions: StoryblokBridgeConfigV2 = {}, + asyncOptions: AsyncDataOptions = undefined ) => { const storyblokApiInstance = useStoryblokApi(); const uniqueKey = `${JSON.stringify(apiOptions)}${url}`; @@ -21,16 +24,31 @@ export const useAsyncStoryblok = async ( } }); - if (!story.value) { - const { data } = await useAsyncData(uniqueKey, () => { - return storyblokApiInstance.get( - `cdn/stories/${url}`, - apiOptions - ); - }) - if(data) { - story.value = data.value?.data.story + const options = useRuntimeConfig().public.storyblok; + if (!options.asyncDataOutput && asyncOptions === undefined) { + if (!story.value) { + deprecate(() => {}, "`useAsyncStoryblok` will return an `AsyncData` object ({ data, pending, ... }) in the future. You can change this behavior now by passing an AsyncDataOptions object as the last argument or setting `asyncDataOutput: true` in module options in `nuxt.config`.", "STORYBLOK-DEPR-ASYNC")(); + const { data } = await useAsyncData(uniqueKey, () => { + return storyblokApiInstance.get( + `cdn/stories/${url}`, + apiOptions + ); + }) + if(data) { + story.value = data.value?.data.story + } } + + return story } - return story + + return await useAsyncData( + uniqueKey, + () => { + return storyblokApiInstance + .get(`cdn/stories/${url}`, apiOptions) + .then((r) => r.data.story) + }, + asyncOptions + ) };