@storyblok/nuxt 5.5.1 → 5.6.0

package/playground/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@storyblok/nuxt-playground",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "demo-ssl": "NODE_TLS_REJECT_UNAUTHORIZED=0 nuxt dev --https",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "devDependencies": {
+    "@nuxt/devtools": "^0.7.1",
+    "@types/node": "^18",
+    "nuxt": "^3.6.5"
+  }
+}

package/playground/pages/[...slug].vue

@@ -0,0 +1,17 @@
+<script setup>
+const { slug } = useRoute().params;
+const story = await useAsyncStoryblok(
+  slug && slug.length > 0 ? slug.join("/") : "home",
+  {
+    version: "draft",
+    language: "en",
+    resolve_relations: ["popular-articles.articles"]
+  }
+);
+</script>
+
+<template>
+  <div>
+    <StoryblokComponent v-if="story" :blok="story.content" />
+  </div>
+</template>

package/playground/pages/index.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+// const storyblokApi = useStoryblokApi();
+// // Checking custom Flush method
+// storyblokApi.flushCache();
+
+const story = await useAsyncStoryblok("vue", {
+  version: "draft",
+  language: "en",
+  resolve_relations: "popular-articles.articles"
+});
+
+const richText = computed(() => renderRichText(story.value.content.richText));
+</script>
+
+<template>
+  <div>
+    <NuxtLink to="vue"> Vue </NuxtLink>
+    <div v-html="richText" />
+    <StoryblokComponent v-if="story" :blok="story.content" />
+  </div>
+</template>

package/playground/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

package/playground/storyblok/sub/Feature.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineProps({
+  blok: {
+    type: Object,
+    required: true
+  }
+});
+</script>
+
+<template>
+  <div v-editable="blok" class="py-2" data-test="feature">
+    <h1 class="text-lg">
+      {{ blok.name }}
+    </h1>
+  </div>
+</template>

package/playground/storyblok/sub/Grid.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps({
+  blok: {
+    type: Object,
+    required: true
+  }
+});
+</script>
+<template>
+  <div v-editable="blok" class="flex py-8 mb-6" data-test="grid">
+    <div
+      v-for="subBlok in blok.columns"
+      :key="subBlok._uid"
+      class="flex-auto px-6"
+    >
+      <StoryblokComponent :blok="subBlok" />
+    </div>
+  </div>
+</template>

package/playground/storyblok/sub/Page.vue

@@ -0,0 +1,19 @@
+<script setup>
+defineProps({
+  blok: {
+    type: Object,
+    required: true
+  }
+});
+</script>
+
+<template>
+  <div v-editable="blok" class="px-6" data-test="page">
+    <component
+      :is="subBlok.component"
+      v-for="subBlok in blok.body"
+      :key="subBlok._uid"
+      :blok="subBlok"
+    />
+  </div>
+</template>

package/playground/storyblok/sub/Teaser.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps({
+  blok: {
+    type: Object,
+    required: true
+  }
+});
+</script>
+
+<template>
+  <div
+    v-editable="blok"
+    :cat="$attrs.cat"
+    class="py-8 mb-6 text-5xl font-bold text-center"
+    data-test="teaser"
+  >
+    {{ blok.headline }}
+  </div>
+</template>

package/playground/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}

package/playground-e2e/nuxt.config.ts

@@ -0,0 +1,24 @@
+export default defineNuxtConfig({
+  modules: [
+    [
+      "@storyblok/nuxt",
+      {
+        accessToken: "OurklwV5XsDJTIE1NJaD2wtt",
+        apiOptions: {
+          region: ""
+        },
+        devtools: true,
+        // enableSudoMode: true /* (or legacy) usePlugin: false */
+      },
+    ],
+    '@nuxt/devtools'
+  ],
+  app: {
+    head: {
+      script: [{ src: "https://cdn.tailwindcss.com" }]
+    }
+  },
+  vite: {
+    optimizeDeps: { exclude: ["fsevents"] },
+  }
+});

package/playground-e2e/package.json

@@ -0,0 +1,15 @@
+{
+  "private": true,
+  "scripts": {
+    "demo": "nuxt dev",
+    "demo-ssl": "NODE_TLS_REJECT_UNAUTHORIZED=0 nuxt dev --https",
+    "build": "nuxt build",
+    "generate": "nuxt generate",
+    "start": "nuxt preview"
+  },
+  "devDependencies": {
+    "@nuxt/devtools": "^0.6.1",
+    "@storyblok/nuxt": "^0.0.1",
+    "nuxt": "^3.5.3"
+  }
+}

package/playground-e2e/pages/[...slug].vue

@@ -0,0 +1,20 @@
+<script setup>
+const route = useRoute();
+
+const story = ref();
+try {
+  story.value = await useAsyncStoryblok(route.path, {
+    version: "draft",
+    language: "en",
+    resolve_relations: ["popular-articles.articles"]
+  });
+} catch (error) {
+  console.log(error);
+}
+</script>
+
+<template>
+  <div>
+    {{ story }}
+  </div>
+</template>

package/playground-e2e/pages/index.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+// const storyblokApi = useStoryblokApi();
+// // Checking custom Flush method
+// storyblokApi.flushCache();
+
+const story = await useAsyncStoryblok("vue", {
+  version: "draft",
+  language: "en",
+  resolve_relations: "popular-articles.articles"
+});
+const richText = computed(() => renderRichText(story.value.content.richText));
+</script>
+
+<template>
+  <div>
+    <div v-html="richText"></div>
+    <StoryblokComponent v-if="story" :blok="story.content" />
+  </div>
+</template>

package/playground-e2e/pages/test.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+const story = await useStoryblok("vue/test", { version: "draft" });
+</script>
+
+<template>
+  <StoryblokComponent v-if="story" :blok="story.content" />
+</template>

package/playground-e2e/pages/vcalong.vue

@@ -0,0 +1,17 @@
+<script setup lant="ts">
+const story = ref(null);
+
+onMounted(async () => {
+  const storyblokApi = useStoryblokApi();
+  const { data } = await storyblokApi.get("cdn/stories/vue/test", {
+    version: "draft"
+  });
+  story.value = data.story;
+
+  useStoryblokBridge(story.value.id, (evStory) => (story.value = evStory));
+});
+</script>
+
+<template>
+  <StoryblokComponent v-if="story" :blok="story.content" />
+</template>

package/playground-e2e/plugins/storyblok.js

@@ -0,0 +1,21 @@
+/* import { StoryblokVue, apiPlugin } from "@storyblok/vue";
+
+export default defineNuxtPlugin(({ vueApp }) => {
+  vueApp.use(StoryblokVue, {
+    accessToken: "OurklwV5XsDJTIE1NJaD2wtt",
+    apiOptions: {
+      cache: {
+        type: "custom",
+        custom: {
+          flush() {
+            console.log("all right");
+          }
+        }
+      }
+    },
+    use: [apiPlugin]
+  });
+});
+ */
+
+export default defineNuxtPlugin(() => {});

package/playground-e2e/storyblok/sub/Feature.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+defineProps({
+  blok: {
+    type: Object,
+    required: true
+  }
+});
+</script>
+
+<template>
+  <div v-editable="blok" class="py-2" data-test="feature">
+    <h1 class="text-lg">{{ blok.name }}</h1>
+  </div>
+</template>

package/playground-e2e/storyblok/sub/Grid.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps({
+  blok: {
+    type: Object,
+    required: true
+  }
+});
+</script>
+<template>
+  <div v-editable="blok" class="flex py-8 mb-6" data-test="grid">
+    <div
+      v-for="subBlok in blok.columns"
+      :key="subBlok._uid"
+      class="flex-auto px-6"
+    >
+      <StoryblokComponent :blok="subBlok" />
+    </div>
+  </div>
+</template>

package/playground-e2e/storyblok/sub/Page.vue

@@ -0,0 +1,19 @@
+<script setup>
+defineProps({
+  blok: {
+    type: Object,
+    required: true
+  }
+});
+</script>
+
+<template>
+  <div v-editable="blok" class="px-6" data-test="page">
+    <component
+      :is="subBlok.component"
+      v-for="subBlok in blok.body"
+      :key="subBlok._uid"
+      :blok="subBlok"
+    />
+  </div>
+</template>

package/playground-e2e/storyblok/sub/Teaser.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps({
+  blok: {
+    type: Object,
+    required: true
+  }
+});
+</script>
+
+<template>
+  <div
+    v-editable="blok"
+    :cat="$attrs.cat"
+    class="py-8 mb-6 text-5xl font-bold text-center"
+    data-test="teaser"
+  >
+    {{ blok.headline }}
+  </div>
+</template>

package/playground-e2e/tsconfig.json

@@ -0,0 +1,11 @@
+{
+    // https://v3.nuxtjs.org/concepts/typescript
+    "extends": "./.nuxt/tsconfig.json",
+    "compilerOptions": {
+      "jsx": "preserve",
+      "paths": {
+        "@/*": ["src/*"]
+      },
+    },
+    "exclude": ["node_modules", "dist"]
+}

package/src/module.ts

@@ -0,0 +1,90 @@
+import {
+  defineNuxtModule,
+  addPlugin,
+  addComponentsDir,
+  addImports,
+  addImportsDir,
+  createResolver
+} from "@nuxt/kit";
+import { NuxtHookName } from "@nuxt/schema";
+
+export interface ModuleOptions {
+  accessToken: string,
+  enableSudoMode: boolean,
+  usePlugin: boolean, // legacy opt. for enableSudoMode
+  bridge: boolean, // storyblok bridge on/off
+  devtools: boolean, // enable nuxt/devtools integration
+  apiOptions: any, // storyblok-js-client options
+}
+
+export default defineNuxtModule<ModuleOptions>({
+  meta: {
+    name: "@storyblok/nuxt",
+    configKey: "storyblok"
+  },
+  defaults: {
+    accessToken: '',
+    enableSudoMode: false,
+    usePlugin: true, // legacy opt. for enableSudoMode
+    bridge: true,
+    devtools: false,
+    apiOptions: {},
+  },
+  setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+
+    if(nuxt.options.vite.optimizeDeps) {
+      nuxt.options.vite.optimizeDeps.include =
+        nuxt.options.vite.optimizeDeps.include || [];
+      nuxt.options.vite.optimizeDeps.include.push("@storyblok/nuxt");
+      nuxt.options.vite.optimizeDeps.include.push("@storyblok/vue");
+
+      nuxt.options.vite.optimizeDeps.exclude =
+        nuxt.options.vite.optimizeDeps.exclude || [];
+      nuxt.options.vite.optimizeDeps.exclude.push("fsevents");
+    }
+
+
+    // Enable dirs
+    // nuxt.options.components.dirs = ["~/components/storyblok"];
+    addComponentsDir({ path: "~/storyblok", global: true, pathPrefix: false });
+
+    nuxt.options.build.transpile.push(resolver.resolve("./runtime"));
+    nuxt.options.build.transpile.push("@storyblok/nuxt");
+    nuxt.options.build.transpile.push("@storyblok/vue");
+
+    // Add plugin
+    nuxt.options.runtimeConfig.public.storyblok = options;
+    const enablePluginCondition = options.usePlugin === true && options.enableSudoMode === false;
+    if (enablePluginCondition) {
+      addPlugin(resolver.resolve("./runtime/plugin"));
+    }
+
+    // Add auto imports
+    const names = [
+      "useStoryblok",
+      "useStoryblokApi",
+      "useStoryblokBridge",
+      "renderRichText",
+      "RichTextSchema"
+    ];
+    for (const name of names) {
+      addImports({ name, as: name, from: "@storyblok/vue" });
+    }
+    addImportsDir(resolver.resolve("./runtime/composables"));
+
+    if (options.devtools) {
+      nuxt.hook('devtools:customTabs' as NuxtHookName, (iframeTabs: Array<unknown>): void => {
+        iframeTabs.push({
+          name: 'storyblok',
+          title: 'Storyblok',
+          icon: 'i-logos-storyblok-icon',
+          view: {
+            type: 'iframe',
+            src: 'https://app.storyblok.com/#!/me/spaces/'
+          }
+        })
+      })
+    }
+  }
+});

package/src/runtime/composables/useAsyncStoryblok.ts

@@ -0,0 +1,33 @@
+import { useStoryblokApi, useStoryblokBridge } from "@storyblok/vue";
+import type { ISbStoriesParams, StoryblokBridgeConfigV2, ISbStoryData } from '@storyblok/vue';
+import { useState, onMounted } from "#imports";
+
+export const useAsyncStoryblok = async (
+  url: string,
+  apiOptions: ISbStoriesParams = {},
+  bridgeOptions: StoryblokBridgeConfigV2 = {}
+) => {
+  const uniqueKey = `${JSON.stringify(apiOptions)}${url}`;
+  const story = useState<ISbStoryData>(`${uniqueKey}-state`);
+  const storyblokApiInstance = useStoryblokApi();
+
+  onMounted(() => {
+    if (story.value && story.value.id) {
+      useStoryblokBridge(
+        story.value.id,
+        evStory => (story.value = evStory),
+        bridgeOptions,
+      );
+    }
+  });
+
+  if (!story.value) {
+    const { data } = await storyblokApiInstance.get(
+      `cdn/stories/${url}`,
+      apiOptions
+    );
+    story.value = data.story;
+  };
+
+  return story;
+};

package/{dist/runtime/plugin.mjs → src/runtime/plugin.ts}

@@ -1,5 +1,6 @@
 import { StoryblokVue, apiPlugin } from "@storyblok/vue";
 import { defineNuxtPlugin, useRuntimeConfig } from "#app";
+
 export default defineNuxtPlugin(({ vueApp }) => {
   let { storyblok } = useRuntimeConfig().public;
   storyblok = JSON.parse(JSON.stringify(storyblok));

package/tsconfig.json

@@ -0,0 +1,3 @@
+{
+    "extends": "./playground/.nuxt/tsconfig.json"
+}

package/dist/module.cjs

@@ -1,5 +0,0 @@
-module.exports = function(...args) {
-  return import('./module.mjs').then(m => m.default.call(this, ...args))
-}
-const _meta = module.exports.meta = require('./module.json')
-module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.ts

@@ -1,13 +0,0 @@
-import * as _nuxt_schema from '@nuxt/schema';
-
-interface ModuleOptions {
-    accessToken: string;
-    enableSudoMode: boolean;
-    usePlugin: boolean;
-    bridge: boolean;
-    devtools: boolean;
-    apiOptions: any;
-}
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
-
-export { ModuleOptions, _default as default };

package/dist/module.json

@@ -1,5 +0,0 @@
-{
-  "name": "@storyblok/nuxt",
-  "configKey": "storyblok",
-  "version": "0.0.1"
-}

package/dist/module.mjs

@@ -1,58 +0,0 @@
-import { defineNuxtModule, createResolver, addComponentsDir, addPlugin, addImports, addImportsDir } from '@nuxt/kit';
-
-const module = defineNuxtModule({
-  meta: {
-    name: "@storyblok/nuxt",
-    configKey: "storyblok"
-  },
-  defaults: {
-    accessToken: "",
-    enableSudoMode: false,
-    usePlugin: true,
-    // legacy opt. for enableSudoMode
-    bridge: true,
-    devtools: false,
-    apiOptions: {}
-  },
-  setup(options, nuxt) {
-    const resolver = createResolver(import.meta.url);
-    nuxt.options.vite.optimizeDeps.include = nuxt.options.vite.optimizeDeps.include || [];
-    nuxt.options.vite.optimizeDeps.include.push("@storyblok/nuxt");
-    nuxt.options.vite.optimizeDeps.include.push("@storyblok/vue");
-    addComponentsDir({ path: "~/storyblok", global: true, pathPrefix: false });
-    nuxt.options.build.transpile.push(resolver.resolve("./runtime"));
-    nuxt.options.build.transpile.push("@storyblok/nuxt");
-    nuxt.options.build.transpile.push("@storyblok/vue");
-    nuxt.options.runtimeConfig.public.storyblok = options;
-    const enablePluginCondition = options.usePlugin === true && options.enableSudoMode === false;
-    if (enablePluginCondition) {
-      addPlugin(resolver.resolve("./runtime/plugin"));
-    }
-    const names = [
-      "useStoryblok",
-      "useStoryblokApi",
-      "useStoryblokBridge",
-      "renderRichText",
-      "RichTextSchema"
-    ];
-    for (const name of names) {
-      addImports({ name, as: name, from: "@storyblok/vue" });
-    }
-    addImportsDir(resolver.resolve("./runtime/composables"));
-    if (options.devtools) {
-      nuxt.hook("devtools:customTabs", (iframeTabs) => {
-        iframeTabs.push({
-          name: "storyblok",
-          title: "Storyblok",
-          icon: "i-logos-storyblok-icon",
-          view: {
-            type: "iframe",
-            src: "https://app.storyblok.com/#!/me/spaces/"
-          }
-        });
-      });
-    }
-  }
-});
-
-export { module as default };

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

@@ -1,2 +0,0 @@
-import type { ISbStoriesParams, StoryblokBridgeConfigV2 } from '@storyblok/vue';
-export declare const useAsyncStoryblok: (url: string, apiOptions?: ISbStoriesParams, bridgeOptions?: StoryblokBridgeConfigV2) => Promise<any>;

package/dist/runtime/composables/useAsyncStoryblok.mjs

@@ -1,25 +0,0 @@
-import { useStoryblokApi, useStoryblokBridge } from "@storyblok/vue";
-import { useAsyncData, useState, onMounted, createError } from "#imports";
-export const useAsyncStoryblok = async (url, apiOptions = {}, bridgeOptions = {}) => {
-  const uniqueKey = `${JSON.stringify(apiOptions)}${url}`;
-  const story = useState(`${uniqueKey}-state`, () => ({}));
-  const storyblokApiInstance = useStoryblokApi();
-  onMounted(() => {
-    if (story.value && story.value.id) {
-      useStoryblokBridge(
-        story.value.id,
-        (evStory) => story.value = evStory,
-        bridgeOptions
-      );
-    }
-  });
-  const { data, error } = await useAsyncData(
-    `${uniqueKey}-asyncdata`,
-    () => storyblokApiInstance.get(`cdn/stories/${url}`, apiOptions)
-  );
-  if (error.value?.response && error.value?.response.status >= 400 && error.value?.response.status < 600) {
-    throw createError({ statusCode: error.value?.response.status, statusMessage: error.value?.message?.message || "Something went wrong when fetching from storyblok." });
-  }
-  story.value = data.value?.data.story;
-  return story;
-};

package/dist/runtime/plugin.d.ts

@@ -1,2 +0,0 @@
-declare const _default: any;
-export default _default;

package/dist/types.d.ts

@@ -1,15 +0,0 @@
-
-import { ModuleOptions } from './module'
-
-declare module '@nuxt/schema' {
-  interface NuxtConfig { ['storyblok']?: Partial<ModuleOptions> }
-  interface NuxtOptions { ['storyblok']?: ModuleOptions }
-}
-
-declare module 'nuxt/schema' {
-  interface NuxtConfig { ['storyblok']?: Partial<ModuleOptions> }
-  interface NuxtOptions { ['storyblok']?: ModuleOptions }
-}
-
-
-export { ModuleOptions, default } from './module'