@storyblok/nuxt 4.4.2 → 4.5.0

package/README.md

@@ -74,7 +74,8 @@ export default defineNuxtConfig({
 
 #### Options
 
-When you initialize the module, you can pass all [_@storyblok/vue_ options](https://github.com/storyblok/storyblok-vue#storyblok-api) plus a `useApiClient` 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
@@ -162,10 +163,39 @@ You can easily render rich text by using the `renderRichText` function that come
 </template>
 
 <script setup>
+  const props = defineProps({ blok: Object })
   const articleContent = computed(() => renderRichText(blok.articleContent));
 </script>
 ```
 
+You can also set a **custom Schema and component resolver** by passing the options as the second parameter of the `renderRichText` function:
+
+```html
+<script setup>
+  import cloneDeep from 'clone-deep'
+
+  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 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>`
+          default:
+            return 'Resolver not defined'
+        }
+      },
+    })
+  )
+</script>
+```
+
 ### API
 
 #### useAsyncStoryblok(slug, apiOptions, bridgeOptions)

package/dist/module.d.ts

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

package/dist/module.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storyblok/nuxt",
-  "version": "4.4.2",
+  "version": "4.5.0",
   "description": "Storyblok Nuxt.js module",
   "main": "./src/module.js",
   "module": "./src/module.js",

package/src/module.js

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