diff --git a/README.md b/README.md
index d49205a..c5902ca 100644
--- a/README.md
+++ b/README.md
@@ -144,11 +144,11 @@ You can render rich-text fields by using the `StoryblokRichtext` component:
 
 #### 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: :
+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 { StoryblokRichtext, BlockTypes } from "@storyblok/vue";
+  import { StoryblokRichText, BlockTypes } from "@storyblok/vue";
   import { RouterLink } from "vue-router";
   import CodeBlok from "./components/CodeBlok.vue";
 
@@ -175,15 +175,15 @@ You can override the default resolvers by passing a `resolver` prop to the `Stor
 </script>
 
 <template>
-  <StoryblokRichtext :doc="blok.articleContent" :resolvers="resolvers" />
+  <StoryblokRichText :doc="blok.articleContent" :resolvers="resolvers" />
 </template>
 ```
 
-Or you can have more control by using the `useRichText` composable:
+Or you can have more control by using the `useStoryblokRichText` composable:
 
 ```html
 <script setup>
-  import { useRichText } from "@storyblok/vue";
+  import { useStoryblokRichText } from "@storyblok/vue";
   import { RouterLink } from "vue-router";
 
   const resolvers = {
@@ -201,7 +201,7 @@ Or you can have more control by using the `useRichText` composable:
     },
   }
 
-  const { render } = useStoryblokRichtext({
+  const { render } = useStoryblokRichText({
     resolvers,
   })
 
diff --git a/lib/cypress/components/index.cy.js b/lib/cypress/components/index.cy.js
index 8e9d1c6..fb210a4 100644
--- a/lib/cypress/components/index.cy.js
+++ b/lib/cypress/components/index.cy.js
@@ -5,9 +5,11 @@ import Page from "@storyblok/vue-playground/components/Page.vue";
 import Feature from "@storyblok/vue-playground/components/Feature.vue";
 import MyCustomFallback from "@storyblok/vue-playground/components/MyCustomFallback.vue";
 import { StoryblokVue, apiPlugin } from "@storyblok/vue";
+import IframeEmbed from "../testing-components/IFrameEmbed.vue";
 
 import Essential from "../testing-components/Essential.vue";
 import RealApi from "../testing-components/RealApi.vue";
+import RichText from "../testing-components/RichText.vue";
 
 const prepare = (pluginOpts = {}, comp = Essential, globalOpts = {}) => {
   mount(comp, {
@@ -195,4 +197,85 @@ describe("@storyblok/vue", () => {
       );
     });
   });
+
+  describe("StoryblokRichText", () => {
+    it("Renders the rich text using StoryblokRichText component", () => {
+      prepare({ use: [apiPlugin] }, RichText, {
+        components: { Teaser, Grid, Page, Feature },
+      });
+
+      cy.get("[data-test=root]")
+        .children()
+        .find("h1")
+        .should("have.text", "Headline 1");
+    });
+
+    it("Should render headline tags correctly", () => {
+      prepare({ use: [apiPlugin] }, RichText, {
+        components: { Teaser, Grid, Page, Feature },
+      });
+
+      cy.get("[data-test=root]")
+        .children()
+        .find("h1")
+        .should("have.text", "Headline 1");
+      cy.get("[data-test=root]")
+        .children()
+        .find("h2")
+        .should("have.text", "Headline 2");
+      cy.get("[data-test=root]")
+        .children()
+        .find("h3")
+        .should("have.text", "Headline 3");
+      cy.get("[data-test=root]")
+        .children()
+        .find("h4")
+        .should("have.text", "Headline 4");
+      cy.get("[data-test=root]")
+        .children()
+        .find("h5")
+        .should("have.text", "Headline 5");
+      cy.get("[data-test=root]")
+        .children()
+        .find("h6")
+        .should("have.text", "Headline 6");
+    });
+
+    it("Should render images correctly", () => {
+      prepare({ use: [apiPlugin] }, RichText, {
+        components: { Teaser, Grid, Page, Feature },
+      });
+
+      cy.get("[data-test=root]")
+        .children()
+        .find("img")
+        .should(
+          "have.attr",
+          "src",
+          "https://a.storyblok.com/f/279818/710x528/c53330ed26/tresjs-doge.jpg"
+        );
+    });
+
+    it("Should render links correctly", () => {
+      prepare({ use: [apiPlugin] }, RichText, {
+        components: { Teaser, Grid, Page, Feature },
+      });
+
+      cy.get("[data-test=root]")
+        .children()
+        .find("a")
+        .should("have.attr", "href", "https://storyblok.com/");
+    });
+
+    it("should render a custom iframe-embed blok component", () => {
+      prepare({ use: [apiPlugin] }, RichText, {
+        components: { IframeEmbed },
+      });
+
+      cy.get("[data-test=root]")
+        .children()
+        .find("iframe")
+        .should("have.attr", "src", "https://storyblok.com/");
+    });
+  });
 });
diff --git a/lib/cypress/testing-components/IFrameEmbed.vue b/lib/cypress/testing-components/IFrameEmbed.vue
new file mode 100644
index 0000000..1904481
--- /dev/null
+++ b/lib/cypress/testing-components/IFrameEmbed.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+defineProps({
+  blok: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+<template>
+  <iframe
+    :src="blok.url.url"
+    class="w-full aspect-video"
+    frameborder="0"
+  ></iframe>
+</template>
diff --git a/lib/cypress/testing-components/RichText.vue b/lib/cypress/testing-components/RichText.vue
new file mode 100644
index 0000000..2c541c4
--- /dev/null
+++ b/lib/cypress/testing-components/RichText.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import RichTextChild from "./RichTextChild.vue";
+</script>
+<template>
+  <div data-test="root">
+    <Suspense>
+      <RichTextChild />
+    </Suspense>
+  </div>
+</template>
diff --git a/lib/cypress/testing-components/RichTextChild.vue b/lib/cypress/testing-components/RichTextChild.vue
new file mode 100644
index 0000000..f203346
--- /dev/null
+++ b/lib/cypress/testing-components/RichTextChild.vue
@@ -0,0 +1,10 @@
+<script setup>
+import { useStoryblok, StoryblokRichText } from "@storyblok/vue";
+const story = await useStoryblok("vue/test-richtext", { version: "draft" });
+</script>
+
+<template>
+  <h2>RichText</h2>
+  <!-- <pre>{{ story.content.richText }}</pre> -->
+  <StoryblokRichText v-if="story.content" :doc="story.content.richText" />
+</template>
diff --git a/lib/types.ts b/lib/types.ts
index 8dfd818..a6b1a7e 100644
--- a/lib/types.ts
+++ b/lib/types.ts
@@ -33,7 +33,6 @@ export type {
   ISbAlternateObject,
   ISbStoriesParams,
   ISbStoryParams,
-  IStoryblokRichtext,
   SbBlokData,
   SbBlokKeyDataTypes,
   SbSDKOptions,
diff --git a/package-lock.json b/package-lock.json
index 560e55f..7b97e01 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -681,7 +681,6 @@
     },
     "node_modules/@babel/parser": {
       "version": "7.24.7",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -3666,7 +3665,6 @@
     },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
@@ -4648,7 +4646,6 @@
     },
     "node_modules/@vue/compiler-core": {
       "version": "3.4.27",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.24.4",
@@ -4660,7 +4657,6 @@
     },
     "node_modules/@vue/compiler-core/node_modules/entities": {
       "version": "4.5.0",
-      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"
@@ -4671,7 +4667,6 @@
     },
     "node_modules/@vue/compiler-dom": {
       "version": "3.4.27",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/compiler-core": "3.4.27",
@@ -4680,7 +4675,6 @@
     },
     "node_modules/@vue/compiler-sfc": {
       "version": "3.4.27",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.24.4",
@@ -4696,16 +4690,19 @@
     },
     "node_modules/@vue/compiler-ssr": {
       "version": "3.4.27",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/compiler-dom": "3.4.27",
         "@vue/shared": "3.4.27"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.3",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.3.tgz",
+      "integrity": "sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw=="
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.4.27",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/shared": "3.4.27"
@@ -4713,7 +4710,6 @@
     },
     "node_modules/@vue/runtime-core": {
       "version": "3.4.27",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/reactivity": "3.4.27",
@@ -4722,7 +4718,6 @@
     },
     "node_modules/@vue/runtime-dom": {
       "version": "3.4.27",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/runtime-core": "3.4.27",
@@ -4732,7 +4727,6 @@
     },
     "node_modules/@vue/server-renderer": {
       "version": "3.4.27",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/compiler-ssr": "3.4.27",
@@ -4744,7 +4738,6 @@
     },
     "node_modules/@vue/shared": {
       "version": "3.4.27",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@vue/test-utils": {
@@ -5879,7 +5872,6 @@
     },
     "node_modules/csstype": {
       "version": "3.1.3",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/cypress": {
@@ -6724,7 +6716,6 @@
     },
     "node_modules/estree-walker": {
       "version": "2.0.2",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/esutils": {
@@ -8928,7 +8919,6 @@
     },
     "node_modules/magic-string": {
       "version": "0.30.10",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.4.15"
@@ -10451,7 +10441,7 @@
     },
     "node_modules/typescript": {
       "version": "4.9.5",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -10685,7 +10675,6 @@
     },
     "node_modules/vue": {
       "version": "3.4.27",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/compiler-dom": "3.4.27",
@@ -10731,6 +10720,20 @@
         "eslint": ">=6.0.0"
       }
     },
+    "node_modules/vue-router": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.3.tgz",
+      "integrity": "sha512-sv6wmNKx2j3aqJQDMxLFzs/u/mjA9Z5LCgy6BE0f7yFWMjrPLnS/sPNn8ARY/FXw6byV18EFutn5lTO6+UsV5A==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/vue-template-compiler": {
       "version": "2.7.16",
       "dev": true,
@@ -10938,7 +10941,8 @@
       "name": "@storyblok/vue-playground",
       "version": "0.0.0",
       "dependencies": {
-        "@vitejs/plugin-basic-ssl": "^1.1.0"
+        "@vitejs/plugin-basic-ssl": "^1.1.0",
+        "vue-router": "^4.4.3"
       },
       "devDependencies": {
         "@storyblok/vue": "^0.0.1",
diff --git a/playground/App.vue b/playground/App.vue
index 62cd764..c911de5 100644
--- a/playground/App.vue
+++ b/playground/App.vue
@@ -1,11 +1,22 @@
-<script setup>
-import Home from "./pages/Home.vue";
+<script setup lang="ts">
+import { watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+const router = useRouter();
+
+console.log(router.getRoutes());
+const route = useRoute();
+function setBodyClass(routeName: string) {
+  document.title = `Core Playground - ${routeName}`;
+  document.body.className = routeName;
+}
+watch([route], () => setBodyClass(route.name?.toString() ?? ""));
 </script>
 
 <template>
   <Suspense>
     <template #default>
-      <Home />
+      <RouterView />
     </template>
 
     <template #fallback>
diff --git a/playground/components/IFrameEmbed.vue b/playground/components/IFrameEmbed.vue
new file mode 100644
index 0000000..1904481
--- /dev/null
+++ b/playground/components/IFrameEmbed.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+defineProps({
+  blok: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+<template>
+  <iframe
+    :src="blok.url.url"
+    class="w-full aspect-video"
+    frameborder="0"
+  ></iframe>
+</template>
diff --git a/playground/main.ts b/playground/main.ts
index 50da292..679d3f2 100644
--- a/playground/main.ts
+++ b/playground/main.ts
@@ -6,6 +6,8 @@ import Teaser from "./components/Teaser.vue";
 import Grid from "./components/Grid.vue";
 import Feature from "./components/Feature.vue";
 // import MyCustomFallback from "./components/MyCustomFallback.vue";
+import { router } from "./router";
+import IframeEmbed from "./components/IFrameEmbed.vue";
 
 const app = createApp(App);
 
@@ -17,11 +19,11 @@ app.use(StoryblokVue, {
   // enableFallbackComponent: true,
   // customFallbackComponent: "MyCustomFallback"
 });
-
 app.component("Page", Page);
 app.component("Teaser", Teaser); // Comment to check fallback behavior
 app.component("Grid", Grid);
 app.component("Feature", Feature);
+app.component("IframeEmbed", IframeEmbed);
 // app.component("MyCustomFallback", MyCustomFallback)
-
+app.use(router);
 app.mount("#app");
diff --git a/playground/package.json b/playground/package.json
index e3e3353..86ba13e 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -14,6 +14,7 @@
     "vue": "^3.4.27"
   },
   "dependencies": {
-    "@vitejs/plugin-basic-ssl": "^1.1.0"
+    "@vitejs/plugin-basic-ssl": "^1.1.0",
+    "vue-router": "^4.4.3"
   }
 }
diff --git a/playground/pages/Home.vue b/playground/pages/Home.vue
index 98b7da4..d7a74f5 100644
--- a/playground/pages/Home.vue
+++ b/playground/pages/Home.vue
@@ -1,10 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
-import {
-  useStoryblokBridge,
-  useStoryblokApi,
-  StoryblokRichText,
-} from "@storyblok/vue";
+import { useStoryblokBridge, useStoryblokApi } from "@storyblok/vue";
 
 const version = import.meta.env.MODE === "production" ? "published" : "draft";
 
@@ -80,5 +76,4 @@ onMounted(() => {
 <template>
   <StoryblokComponent v-if="story" :blok="story.content" />
   <h2>Richtext</h2>
-  <StoryblokRichText v-if="story.content" :doc="story.content.richText" />
 </template>
diff --git a/playground/pages/RichTextDemo.vue b/playground/pages/RichTextDemo.vue
new file mode 100644
index 0000000..fb460ce
--- /dev/null
+++ b/playground/pages/RichTextDemo.vue
@@ -0,0 +1,18 @@
+<script setup>
+import { useStoryblok, StoryblokRichText } from "@storyblok/vue";
+
+const story = await useStoryblok(
+  "vue/test-richtext",
+  {
+    version: "draft",
+  }
+  // { resolveRelations: "Article.categories" }
+);
+</script>
+
+<template>
+  <StoryblokRichText
+    v-if="story.content.richText"
+    :doc="story.content.richText"
+  />
+</template>
diff --git a/playground/router/index.ts b/playground/router/index.ts
new file mode 100644
index 0000000..2491bf0
--- /dev/null
+++ b/playground/router/index.ts
@@ -0,0 +1,15 @@
+import { createWebHistory, createRouter } from "vue-router";
+
+const routes = [
+  { path: "/", name: "Home", component: () => import("../pages/Home.vue") },
+  {
+    path: "/vue/test-richtext",
+    name: "RichTextDemo",
+    component: () => import("../pages/RichTextDemo.vue"),
+  },
+];
+
+export const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
diff --git a/playground/vite.config.ts b/playground/vite.config.ts
index d45512f..df40903 100644
--- a/playground/vite.config.ts
+++ b/playground/vite.config.ts
@@ -2,14 +2,11 @@ import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import { resolve } from "pathe";
 
-// import basicSsl from "@vitejs/plugin-basic-ssl";
+import basicSsl from "@vitejs/plugin-basic-ssl";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [
-    vue(),
-    //, basicSsl()
-  ],
+  plugins: [vue(), basicSsl()],
   resolve: {
     alias: {
       "@storyblok/vue": resolve(__dirname, "../lib/index.ts"),