@storyblok/nuxt 6.1.0 → 6.2.0

package/README.md

@@ -44,11 +44,11 @@ npx nuxi@latest module add storyblok
 Add following code to modules section of `nuxt.config.js` and replace the accessToken with API token from Storyblok space.
 
 ```js
-import { defineNuxtConfig } from "nuxt";
+import { defineNuxtConfig } from 'nuxt';
 
 export default defineNuxtConfig({
   modules: [
-    ["@storyblok/nuxt", { accessToken: "<your-access-token>" }]
+    ['@storyblok/nuxt', { accessToken: '<your-access-token>' }]
     // ...
   ]
 });
@@ -57,12 +57,12 @@ export default defineNuxtConfig({
 You can also use the `storyblok` config if you prefer:
 
 ```js
-import { defineNuxtConfig } from "nuxt";
+import { defineNuxtConfig } from 'nuxt';
 
 export default defineNuxtConfig({
-  modules: ["@storyblok/nuxt"],
+  modules: ['@storyblok/nuxt'],
   storyblok: {
-    accessToken: "<your-access-token>"
+    accessToken: '<your-access-token>'
   }
 });
 ```
@@ -97,9 +97,9 @@ While the recommended approach covers most cases, there are specific instances w
 // nuxt.config.ts
 modules: [
   [
-    "@storyblok/nuxt",
+    '@storyblok/nuxt',
     {
-      accessToken: "<your-access-token>",
+      accessToken: '<your-access-token>',
       enableSudoMode: true
     }
   ]
@@ -110,17 +110,17 @@ To include additional functionalities in the SDK's `apiOptions`, such as custom
 
 ```js
 // plugins/storyblok.js
-import { StoryblokVue, apiPlugin } from "@storyblok/vue";
+import { apiPlugin, StoryblokVue } from '@storyblok/vue';
 
 export default defineNuxtPlugin(({ vueApp }) => {
   vueApp.use(StoryblokVue, {
-    accessToken: "<your-access-token>",
+    accessToken: '<your-access-token>',
     apiOptions: {
       cache: {
-        type: "custom",
+        type: 'custom',
         custom: {
           flush() {
-            console.log("all right");
+            console.log('all right');
           }
         }
       }
@@ -271,6 +271,95 @@ Which is the short-hand equivalent to using `useStoryblokApi` inside `useState`
 
 ## Rendering Rich Text
 
+You can render rich text fields by using the `StoryblokRichText` component:
+
+```html
+<template>
+  <StoryblokRichText :doc="blok.articleContent" />
+</template>
+```
+
+Or you can have more control by using the `useStoryblokRichText` composable:
+
+```html
+<script setup>
+  const { render } = useStoryblokRichText({
+    // options like resolvers
+  })
+
+  const root = () => render(blok.articleContent);
+</script>
+
+<template>
+  <root />
+</template>
+```
+
+For more incredible options you can pass to the `useStoryblokRichText`, please consult the [Full options](https://github.com/storyblok/richtext?tab=readme-ov-file#options) documentation.
+
+
+#### Overriding the default resolvers
+
+You can override the default resolvers by passing a `resolver` prop to the `StoryblokRichText` component, for example, to use vue-router links or add a custom codeblok component: :
+
+```html
+<script setup>
+  import { NuxtLink } from '#components';
+  import type { StoryblokRichTextNode } from '@storyblok/vue';
+  import CodeBlok from "./components/CodeBlok.vue";
+
+  const resolvers = {
+    // NuxtLink example:
+    [MarkTypes.LINK]: (node: StoryblokRichTextNode<VNode>) =>
+      h(NuxtLink, {
+        to: node.attrs?.href,
+        target: node.attrs?.target,
+      }, node.text),
+    // Custom code block component example:
+    [BlockTypes.CODE_BLOCK]: (node: Node) => {
+      return h(CodeBlock, {
+        class: node?.attrs?.class,
+      }, node.children)
+    },
+  }
+</script>
+
+<template>
+  <StoryblokRichText :doc="blok.articleContent" :resolvers="resolvers" />
+</template>
+```
+
+If you want to use the `useStoryblokRichText` composable, you can pass the `resolvers` via the options object:
+
+```html
+<script setup>
+  import CodeBlok from "./components/CodeBlok.vue";
+
+  const { render } = useStoryblokRichText({
+    resolvers: {
+      // NuxtLink example:
+      [MarkTypes.LINK]: (node: StoryblokRichTextNode<VNode>) =>
+        h(NuxtLink, {
+          to: node.attrs?.href,
+          target: node.attrs?.target,
+        }, node.text),
+      // Custom code block component example:
+      [BlockTypes.CODE_BLOCK]: (node: Node) => 
+        h(CodeBlock, {
+          class: node?.attrs?.class,
+        }, node.children)
+    }
+  });
+
+  const root = () => render(blok.articleContent);
+</script>
+```
+
+### Legacy Rendering Rich Text
+
+> [!WARNING]  
+> The legacy `richTextResolver` is soon to be deprecated. We recommend migrating to the new approach described above instead.
+
 You can easily render rich text by using the `renderRichText` function that comes with `@storyblok/nuxt` and a Vue computed property:
 
 ```html
@@ -280,9 +369,7 @@ You can easily render rich text by using the `renderRichText` function that come
 
 <script setup>
   const props = defineProps({ blok: Object });
-  const articleContent = computed(() =>
-    renderRichText(props.blok.articleContent)
-  );
+  const articleContent = computed(() => renderRichText(props.blok.articleContent));
 </script>
 ```
 
@@ -290,7 +377,7 @@ 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
   // ... and edit the nodes and marks, or add your own.
@@ -303,13 +390,13 @@ You can also set a **custom Schema and component resolver** by passing the optio
       schema: mySchema,
       resolver: (component, blok) => {
         switch (component) {
-          case "my-custom-component":
+          case 'my-custom-component':
             return `<div class="my-component-class">${blok.text}</div>`;
           default:
-            return "Resolver not defined";
+            return 'Resolver not defined';
         }
-      }
-    })
+      },
+    }),
   );
 </script>
 ```
@@ -333,7 +420,7 @@ In your `nuxt.config.ts`:
 export default defineNuxtConfig({
   runtimeConfig: {
     public: {
-      storyblokVersion: process.env.STORYBLOK_VERSION || "published"
+      storyblokVersion: process.env.STORYBLOK_VERSION || 'published'
     }
   }
 });
@@ -345,19 +432,19 @@ Then you can access the runtime config in your components:
 const config = useRuntimeConfig();
 
 const story = await useAsyncStoryblok(
-  "blog",
+  'blog',
   {
     version: config.public.storyblokVersion,
-    resolve_relations: "overview.featured_story"
+    resolve_relations: 'overview.featured_story'
   },
-  { resolveRelations: "overview.featured_story" }
+  { resolveRelations: 'overview.featured_story' }
 );
 
-//or
+// or
 
-const { data: articles } = await storyblokApi.get("cdn/stories", {
+const { data: articles } = await storyblokApi.get('cdn/stories', {
   version: config.public.storyblokVersion,
-  starts_with: "blog",
+  starts_with: 'blog',
   is_startpage: false
 });
 ```

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@storyblok/nuxt",
   "configKey": "storyblok",
-  "version": "6.1.0",
+  "version": "6.2.0",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -39,7 +39,13 @@ const module = defineNuxtModule({
       "useStoryblokApi",
       "useStoryblokBridge",
       "renderRichText",
-      "RichTextSchema"
+      "RichTextSchema",
+      "StoryblokRichText",
+      "useStoryblokRichText",
+      "MarkTypes",
+      "BlockTypes",
+      "LinkTypes",
+      "AssetTypes"
     ];
     for (const name of names) {
       addImports({ name, as: name, from: "@storyblok/vue" });

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

@@ -1,4 +1,4 @@
-import type { ISbStoriesParams, StoryblokBridgeConfigV2, ISbStoryData } from '@storyblok/vue';
+import type { ISbStoriesParams, ISbStoryData, StoryblokBridgeConfigV2 } from '@storyblok/vue';
 export declare const useAsyncStoryblok: (url: string, apiOptions?: ISbStoriesParams, bridgeOptions?: StoryblokBridgeConfigV2) => Promise<import("vue").Ref<ISbStoryData<import("@storyblok/vue").StoryblokComponentType<string> & {
     [index: string]: any;
 }>, ISbStoryData<import("@storyblok/vue").StoryblokComponentType<string> & {

package/dist/runtime/composables/useAsyncStoryblok.js

@@ -1,5 +1,5 @@
 import { useStoryblokApi, useStoryblokBridge } from "@storyblok/vue";
-import { useState, onMounted, useAsyncData } from "#imports";
+import { onMounted, useAsyncData, useState } from "#imports";
 export const useAsyncStoryblok = async (url, apiOptions = {}, bridgeOptions = {}) => {
   const storyblokApiInstance = useStoryblokApi();
   const uniqueKey = `${JSON.stringify(apiOptions)}${url}`;

package/dist/runtime/plugin.js

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

package/package.json

@@ -1,11 +1,16 @@
 {
   "name": "@storyblok/nuxt",
-  "version": "6.1.0",
-  "description": "Storyblok Nuxt module",
-  "packageManager": "pnpm@9.9.0",
   "type": "module",
-  "main": "./dist/module.cjs",
-  "types": "./dist/types.d.ts",
+  "version": "6.2.0",
+  "packageManager": "pnpm@9.9.0",
+  "description": "Storyblok Nuxt module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/storyblok/storyblok-nuxt.git"
+  },
+  "bugs": {
+    "url": "https://github.com/storyblok/storyblok-nuxt/issues"
+  },
   "exports": {
     ".": {
       "types": "./dist/types.d.ts",
@@ -13,6 +18,8 @@
       "require": "./dist/module.cjs"
     }
   },
+  "main": "./dist/module.cjs",
+  "types": "./dist/types.d.ts",
   "files": [
     "dist"
   ],
@@ -24,75 +31,45 @@
     "dev:preview": "nuxi preview playground",
     "prepare:playground": "nuxi prepare playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxi prepare playground",
-    "prepare": "husky install",
     "cy:open": "cypress open",
     "cy:run": "cypress run",
     "test:e2e": "start-server-and-test dev http://localhost:3000 cy:run",
     "test:e2e-watch": "start-server-and-test dev http://localhost:3000 cy:open",
     "pretest:e2e-static": "nuxi generate playground",
     "test:e2e-static": "start-server-and-test dev:preview http://localhost:3000 cy:run",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.vue"
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  },
+  "dependencies": {
+    "@storyblok/vue": "^8.1.1"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
     "@cypress/vite-dev-server": "^5.2.0",
+    "@nuxt/eslint": "^0.6.1",
     "@nuxt/eslint-config": "^0.5.7",
     "@nuxt/kit": "^3.13.2",
     "@nuxt/module-builder": "^0.8.4",
     "@nuxt/schema": "^3.13.2",
     "@nuxt/test-utils": "^3.14.3",
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
+    "@storyblok/eslint-config": "^0.3.0",
     "@types/node": "^20.8.10",
     "cypress": "^13.15.0",
-    "eslint": "^8.52.0",
+    "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-cypress": "^3.5.0",
     "eslint-plugin-vue": "^9.28.0",
-    "husky": "^9.1.6",
-    "lint-staged": "^15.2.10",
     "nuxt": "^3.13.2",
     "prettier": "^3.3.3",
     "start-server-and-test": "^2.0.8"
   },
-  "dependencies": {
-    "@storyblok/vue": "^8.1.1"
-  },
-  "lint-staged": {
-    "*.{vue,js,css}": [
-      "prettier --write",
-      "eslint"
-    ],
-    "*.md": [
-      "prettier --write"
-    ]
-  },
   "commitlint": {
     "extends": [
       "@commitlint/config-conventional"
     ]
   },
-  "eslintConfig": {
-    "extends": [
-      "eslint:recommended",
-      "@nuxtjs/eslint-config-typescript",
-      "plugin:vue/vue3-recommended",
-      "prettier"
-    ],
-    "rules": {
-      "vue/multi-word-component-names": 1
-    }
-  },
-  "eslintIgnore": [
-    "**/templates/plugin.js",
-    "playground/app.vue"
-  ],
-  "prettier": {
-    "trailingComma": "none",
-    "tabWidth": 2,
-    "semi": true,
-    "singleQuote": false
-  },
   "release": {
     "branches": [
       "main",