@storyblok/nuxt 4.6.0 → 5.0.1

package/README.md

@@ -72,11 +72,12 @@ export default defineNuxtConfig({
 });
 ```
 
+> ⚠️ This SDK uses the Fetch API under the hood. If your environment doesn't support it, you need to install a polyfill like [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch). More info on [storyblok-js-client docs](https://github.com/storyblok/storyblok-js-client#fetch-use-polyfill-if-needed---version-5).
+
 #### Options
 
 When you initialize the module, you can pass all [_@storyblok/vue_ options](https://github.com/storyblok/storyblok-vue#storyblok-api) plus a `useApiClient` option. For spaces created in the United States, you have to set the `region` parameter accordingly `{ apiOptions: { region: 'us' } }`.
 
-
 ```js
 // Defaults
 ["@storyblok/nuxt", {
@@ -163,7 +164,7 @@ You can easily render rich text by using the `renderRichText` function that come
 </template>
 
 <script setup>
-  const props = defineProps({ blok: Object })
+  const props = defineProps({ blok: Object });
   const articleContent = computed(() => renderRichText(blok.articleContent));
 </script>
 ```
@@ -172,27 +173,27 @@ You can also set a **custom Schema and component resolver** by passing the optio
 
 ```html
 <script setup>
-  import cloneDeep from 'clone-deep'
+  import cloneDeep from "clone-deep";
 
-  const mySchema = cloneDeep(RichTextSchema) // you can make a copy of the default RichTextSchema
+  const mySchema = cloneDeep(RichTextSchema); // you can make a copy of the default RichTextSchema
   // ... and edit the nodes and marks, or add your own.
   // Check the base RichTextSchema source here https://github.com/storyblok/storyblok-js-client/blob/v4/source/schema.js
 
-  const props = defineProps({ blok: Object })
+  const props = defineProps({ blok: Object });
 
   const articleContent = computed(() =>
     renderRichText(props.blok.articleContent, {
       schema: mySchema,
       resolver: (component, blok) => {
         switch (component) {
-          case 'my-custom-component':
-            return `<div class="my-component-class">${blok.text}</div>`
+          case "my-custom-component":
+            return `<div class="my-component-class">${blok.text}</div>`;
           default:
-            return 'Resolver not defined'
+            return "Resolver not defined";
         }
-      },
+      }
     })
-  )
+  );
 </script>
 ```
 

package/dist/module.d.ts

@@ -1,37 +1,26 @@
-import { resolve } from 'path';
-import { fileURLToPath } from 'url';
-import { defineNuxtModule, addComponentsDir, addPlugin, addImports, addImportsDir } from '@nuxt/kit';
-
-// -- Unbuild CommonJS Shims --
-import __cjs_url__ from 'url';
-import __cjs_path__ from 'path';
-import __cjs_mod__ from 'module';
-const __filename = __cjs_url__.fileURLToPath(import.meta.url);
-const __dirname = __cjs_path__.dirname(__filename);
-const require = __cjs_mod__.createRequire(import.meta.url);
-
+import { defineNuxtModule, createResolver, addComponentsDir, addPlugin, addImports, addImportsDir } from '@nuxt/kit';
 
 var module = defineNuxtModule({
   meta: {
     name: "@storyblok/nuxt",
     configKey: "storyblok"
   },
-  defaults: {},
+  defaults: {
+    usePlugin: true
+  },
   setup(options, nuxt) {
-    const axiosIndex = nuxt.options.build.transpile.indexOf("axios");
-    if (axiosIndex !== -1) {
-      nuxt.options.build.transpile.splice(axiosIndex, 1);
-    }
+    const resolver = createResolver(import.meta.url);
     nuxt.options.vite.optimizeDeps.include = nuxt.options.vite.optimizeDeps.include || [];
-    nuxt.options.vite.optimizeDeps.include.push("axios");
+    nuxt.options.vite.optimizeDeps.include.push("@storyblok/nuxt");
+    nuxt.options.vite.optimizeDeps.include.push("@storyblok/vue");
     addComponentsDir({ path: "~/storyblok", global: true, pathPrefix: false });
-    const runtimeDir = fileURLToPath(new URL("./runtime", import.meta.url));
-    nuxt.options.build.transpile.push(runtimeDir);
+    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;
-    if (options.usePlugin !== false)
-      addPlugin(resolve(__dirname, "runtime", `./plugin`));
+    if (options.usePlugin !== false) {
+      addPlugin(resolver.resolve("./runtime/plugin"));
+    }
     const names = [
       "useStoryblok",
       "useStoryblokApi",
@@ -39,8 +28,10 @@ var module = defineNuxtModule({
       "renderRichText",
       "RichTextSchema"
     ];
-    names.forEach((name) => addImports({ name, as: name, from: "@storyblok/vue" }));
-    addImportsDir(resolve(runtimeDir, `./composables`));
+    for (const name of names) {
+      addImports({ name, as: name, from: "@storyblok/vue" });
+    }
+    addImportsDir(resolver.resolve("./runtime/composables"));
   }
 });
 

package/dist/module.mjs

@@ -1,37 +1,26 @@
-import { resolve } from 'path';
-import { fileURLToPath } from 'url';
-import { defineNuxtModule, addComponentsDir, addPlugin, addImports, addImportsDir } from '@nuxt/kit';
-
-// -- Unbuild CommonJS Shims --
-import __cjs_url__ from 'url';
-import __cjs_path__ from 'path';
-import __cjs_mod__ from 'module';
-const __filename = __cjs_url__.fileURLToPath(import.meta.url);
-const __dirname = __cjs_path__.dirname(__filename);
-const require = __cjs_mod__.createRequire(import.meta.url);
-
+import { defineNuxtModule, createResolver, addComponentsDir, addPlugin, addImports, addImportsDir } from '@nuxt/kit';
 
 const module = defineNuxtModule({
   meta: {
     name: "@storyblok/nuxt",
     configKey: "storyblok"
   },
-  defaults: {},
+  defaults: {
+    usePlugin: true
+  },
   setup(options, nuxt) {
-    const axiosIndex = nuxt.options.build.transpile.indexOf("axios");
-    if (axiosIndex !== -1) {
-      nuxt.options.build.transpile.splice(axiosIndex, 1);
-    }
+    const resolver = createResolver(import.meta.url);
     nuxt.options.vite.optimizeDeps.include = nuxt.options.vite.optimizeDeps.include || [];
-    nuxt.options.vite.optimizeDeps.include.push("axios");
+    nuxt.options.vite.optimizeDeps.include.push("@storyblok/nuxt");
+    nuxt.options.vite.optimizeDeps.include.push("@storyblok/vue");
     addComponentsDir({ path: "~/storyblok", global: true, pathPrefix: false });
-    const runtimeDir = fileURLToPath(new URL("./runtime", import.meta.url));
-    nuxt.options.build.transpile.push(runtimeDir);
+    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;
-    if (options.usePlugin !== false)
-      addPlugin(resolve(__dirname, "runtime", `./plugin`));
+    if (options.usePlugin !== false) {
+      addPlugin(resolver.resolve("./runtime/plugin"));
+    }
     const names = [
       "useStoryblok",
       "useStoryblokApi",
@@ -39,8 +28,10 @@ const module = defineNuxtModule({
       "renderRichText",
       "RichTextSchema"
     ];
-    names.forEach((name) => addImports({ name, as: name, from: "@storyblok/vue" }));
-    addImportsDir(resolve(runtimeDir, `./composables`));
+    for (const name of names) {
+      addImports({ name, as: name, from: "@storyblok/vue" });
+    }
+    addImportsDir(resolver.resolve("./runtime/composables"));
   }
 });
 

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@storyblok/nuxt",
-  "version": "4.6.0",
-  "description": "Storyblok Nuxt.js module",
-  "main": "./src/module.js",
-  "module": "./src/module.js",
+  "version": "5.0.1",
+  "description": "Storyblok Nuxt module",
+  "type": "module",
   "exports": {
     ".": {
-      "import": "./src/module.js",
-      "require": "./src/module.js"
+      "import": "./dist/module.mjs",
+      "require": "./dist/module.cjs"
     }
   },
+  "main": "./dist/module.cjs",
+  "types": "./dist/types.d.ts",
   "files": [
-    "src",
     "dist"
   ],
   "repository": "https://github.com/storyblok/storyblok-nuxt",
@@ -27,16 +27,16 @@
     "test:e2e-watch": "start-server-and-test playground:run http://localhost:3000 cy:open"
   },
   "dependencies": {
-    "@storyblok/vue": "^6.3.0"
+    "@storyblok/vue": "^7.0.0",
+    "@nuxt/kit": "^3.0.0"
   },
   "devDependencies": {
-    "@nuxt/kit": "^3.0.0-rc.7",
     "@babel/core": "^7.15.0",
     "@nuxt/module-builder": "latest",
     "babel-jest": "^28.1.3",
     "cypress": "^8.3.0",
     "eslint-plugin-cypress": "^2.12.1",
-    "jest": "^26.6.3",
+    "jest": "^29.3.1",
     "start-server-and-test": "^1.14.0",
     "vite": "^2.9.14"
   },

package/src/module.js

@@ -1,54 +0,0 @@
-import { resolve } from "path";
-import { fileURLToPath } from "url";
-
-import {
-  defineNuxtModule,
-  addPlugin,
-  addComponentsDir,
-  addImports,
-  addImportsDir
-} from "@nuxt/kit";
-
-export default defineNuxtModule({
-  meta: {
-    name: "@storyblok/nuxt",
-    configKey: "storyblok"
-  },
-  defaults: {},
-  setup(options, nuxt) {
-    const axiosIndex = nuxt.options.build.transpile.indexOf("axios");
-    if (axiosIndex !== -1) {
-      nuxt.options.build.transpile.splice(axiosIndex, 1);
-    }
-    nuxt.options.vite.optimizeDeps.include =
-      nuxt.options.vite.optimizeDeps.include || [];
-    nuxt.options.vite.optimizeDeps.include.push("axios");
-
-    // Enable dirs
-    // nuxt.options.components.dirs = ["~/components/storyblok"];
-    addComponentsDir({ path: "~/storyblok", global: true, pathPrefix: false });
-
-    const runtimeDir = fileURLToPath(new URL("./runtime", import.meta.url));
-    nuxt.options.build.transpile.push(runtimeDir);
-    nuxt.options.build.transpile.push("@storyblok/nuxt");
-    nuxt.options.build.transpile.push("@storyblok/vue");
-
-    // Add plugin
-    nuxt.options.runtimeConfig.public.storyblok = options;
-    if (options.usePlugin !== false)
-      addPlugin(resolve(__dirname, "runtime", `./plugin`));
-
-    // Autoimports
-    const names = [
-      "useStoryblok",
-      "useStoryblokApi",
-      "useStoryblokBridge",
-      "renderRichText",
-      "RichTextSchema"
-    ];
-    names.forEach((name) =>
-      addImports({ name, as: name, from: "@storyblok/vue" })
-    );
-    addImportsDir(resolve(runtimeDir, `./composables`));
-  }
-});

package/src/runtime/composables/useAsyncStoryblok.js

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

package/src/runtime/plugin.js

@@ -1,8 +0,0 @@
-import { StoryblokVue, apiPlugin } from "@storyblok/vue";
-import { defineNuxtPlugin, useRuntimeConfig } from "#app";
-
-export default defineNuxtPlugin(({ vueApp }) => {
-  let { storyblok } = useRuntimeConfig();
-  storyblok = JSON.parse(JSON.stringify(storyblok));
-  vueApp.use(StoryblokVue, { ...storyblok, use: [apiPlugin] });
-});