diff --git a/playground/error.vue b/playground/error.vue index 33083176..aca0f2c3 100644 --- a/playground/error.vue +++ b/playground/error.vue @@ -1,3 +1,12 @@ + @@ -12,11 +21,3 @@ - - diff --git a/playground/package.json b/playground/package.json index 54a36593..00a55311 100644 --- a/playground/package.json +++ b/playground/package.json @@ -4,6 +4,7 @@ "scripts": { "build": "nuxt build", "dev": "nuxt dev", + "dev:https": "NODE_TLS_REJECT_UNAUTHORIZED=0 nuxt dev --https", "demo-ssl": "NODE_TLS_REJECT_UNAUTHORIZED=0 nuxt dev --https", "generate": "nuxt generate", "preview": "nuxt preview", diff --git a/playground/pages/articles/[slug].vue b/playground/pages/articles/[slug].vue new file mode 100644 index 00000000..d196aecd --- /dev/null +++ b/playground/pages/articles/[slug].vue @@ -0,0 +1,13 @@ + + + + + {{ story.content.title }} + + diff --git a/playground/pages/articles/index.vue b/playground/pages/articles/index.vue new file mode 100644 index 00000000..45a9fa1d --- /dev/null +++ b/playground/pages/articles/index.vue @@ -0,0 +1,34 @@ + + + + + Articles + Here are some articles + + + {{ article.name }} + + + + diff --git a/playground/pages/index.vue b/playground/pages/index.vue index 2255817f..0042b5bd 100644 --- a/playground/pages/index.vue +++ b/playground/pages/index.vue @@ -9,13 +9,11 @@ const story = await useAsyncStoryblok("vue", { resolve_relations: "popular-articles.articles" }); -const richText = computed(() => renderRichText(story.value.content.richText)); +/* const richText = computed(() => renderRichText(story.value.content.richText)); */ - Vue - diff --git a/src/runtime/composables/useAsyncStoryblok.ts b/src/runtime/composables/useAsyncStoryblok.ts index 0fbb6f17..41afc32a 100644 --- a/src/runtime/composables/useAsyncStoryblok.ts +++ b/src/runtime/composables/useAsyncStoryblok.ts @@ -7,9 +7,9 @@ export const useAsyncStoryblok = async ( apiOptions: ISbStoriesParams = {}, bridgeOptions: StoryblokBridgeConfigV2 = {} ) => { + const storyblokApiInstance = useStoryblokApi(); const uniqueKey = `${JSON.stringify(apiOptions)}${url}`; const story = useState(`${uniqueKey}-state`); - const storyblokApiInstance = useStoryblokApi(); onMounted(() => { if (story.value && story.value.id) { @@ -22,12 +22,15 @@ export const useAsyncStoryblok = async ( }); if (!story.value) { - const { data } = await storyblokApiInstance.get( - `cdn/stories/${url}`, - apiOptions - ); - story.value = data.story; - }; - - return story; + const { data } = await useAsyncData('story', () => { + return storyblokApiInstance.get( + `cdn/stories/${url}`, + apiOptions + ); + }) + if(data) { + story.value = data.value?.data.story + } + } + return story };
Here are some articles