diff --git a/README.md b/README.md
index b7ce2ee08..14a37c7f2 100644
--- a/README.md
+++ b/README.md
@@ -117,8 +117,8 @@ The `<editor-menu-bar />` component is renderless and will receive some properti
 
 ```vue
 <template>
-  <editor-menu-bar :editor="editor">
-    <div slot-scope="{ commands, isActive }">
+  <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
+    <div>
       <button :class="{ 'is-active': isActive.bold() }" @click="commands.bold">
         Bold
       </button>
@@ -147,9 +147,8 @@ The `<editor-menu-bubble />` component is renderless and will receive some prope
 
 ```vue
 <template>
-  <editor-menu-bubble :editor="editor">
+  <editor-menu-bubble :editor="editor" v-slot="{ commands, isActive, menu }">
     <div
-      slot-scope="{ commands, isActive, menu }"
       :class="{ 'is-active': menu.isActive }"
       :style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`"
     >
@@ -181,9 +180,8 @@ The `<editor-floating-menu />` component is renderless and will receive some pro
 
 ```vue
 <template>
-  <editor-floating-menu :editor="editor">
+  <editor-floating-menu :editor="editor" v-slot="{ commands, isActive, menu }">
     <div
-      slot-scope="{ commands, isActive, menu }"
       :class="{ 'is-active': menu.isActive }"
       :style="`top: ${menu.top}px`"
     >
@@ -207,12 +205,10 @@ By default, the editor will only support paragraphs. Other nodes and marks are a
 ```vue
 <template>
   <div>
-    <editor-menu-bar :editor="editor">
-      <div slot-scope="{ commands, isActive }">
+    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
         <button :class="{ 'is-active': isActive.bold() }" @click="commands.bold">
           Bold
         </button>
-      </div>
     </editor-menu-bar>
     <editor-content :editor="editor" />
   </div>
diff --git a/examples/Components/Routes/Basic/index.vue b/examples/Components/Routes/Basic/index.vue
index ff95f0f9d..1d0099188 100644
--- a/examples/Components/Routes/Basic/index.vue
+++ b/examples/Components/Routes/Basic/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="editor">
-    <editor-menu-bar :editor="editor">
-      <div class="menubar" slot-scope="{ commands, isActive }">
+    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
+      <div class="menubar">
 
         <button
           class="menubar__button"
diff --git a/examples/Components/Routes/Export/index.vue b/examples/Components/Routes/Export/index.vue
index e5a648b81..e5ff05b2d 100644
--- a/examples/Components/Routes/Export/index.vue
+++ b/examples/Components/Routes/Export/index.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <div class="editor">
-      <editor-menu-bar :editor="editor">
-        <div class="menubar" slot-scope="{ commands, isActive }">
+      <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
+        <div class="menubar">
 
           <button
             class="menubar__button"
diff --git a/examples/Components/Routes/FloatingMenu/index.vue b/examples/Components/Routes/FloatingMenu/index.vue
index f9015797a..10182ce67 100644
--- a/examples/Components/Routes/FloatingMenu/index.vue
+++ b/examples/Components/Routes/FloatingMenu/index.vue
@@ -1,8 +1,7 @@
 <template>
   <div class="editor">
-    <editor-floating-menu :editor="editor">
+    <editor-floating-menu :editor="editor" v-slot="{ commands, isActive, menu }">
       <div
-        slot-scope="{ commands, isActive, menu }"
         class="editor__floating-menu"
         :class="{ 'is-active': menu.isActive }"
         :style="`top: ${menu.top}px`"
diff --git a/examples/Components/Routes/HidingMenuBar/index.vue b/examples/Components/Routes/HidingMenuBar/index.vue
index a5449618d..9dcd7ba32 100644
--- a/examples/Components/Routes/HidingMenuBar/index.vue
+++ b/examples/Components/Routes/HidingMenuBar/index.vue
@@ -1,10 +1,9 @@
 <template>
   <div class="editor">
-    <editor-menu-bar :editor="editor">
+    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive, focused }">
       <div
         class="menubar is-hidden"
         :class="{ 'is-focused': focused }"
-        slot-scope="{ commands, isActive, focused }"
       >
 
         <button
diff --git a/examples/Components/Routes/History/index.vue b/examples/Components/Routes/History/index.vue
index 0bcd5fdca..019df8e54 100644
--- a/examples/Components/Routes/History/index.vue
+++ b/examples/Components/Routes/History/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="editor">
-    <editor-menu-bar :editor="editor">
-      <div class="menubar" slot-scope="{ commands, isActive }">
+    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
+      <div class="menubar">
 
         <button
           class="menubar__button"
diff --git a/examples/Components/Routes/Images/index.vue b/examples/Components/Routes/Images/index.vue
index aae665a34..7e9f5026d 100644
--- a/examples/Components/Routes/Images/index.vue
+++ b/examples/Components/Routes/Images/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="editor">
-    <editor-menu-bar :editor="editor">
-      <div class="menubar" slot-scope="{ commands }">
+    <editor-menu-bar :editor="editor" v-slot="{ commands }">
+      <div class="menubar">
         <button
           class="menubar__button"
           @click="showImagePrompt(commands.image)"
diff --git a/examples/Components/Routes/Links/index.vue b/examples/Components/Routes/Links/index.vue
index 460524aae..6de03c794 100644
--- a/examples/Components/Routes/Links/index.vue
+++ b/examples/Components/Routes/Links/index.vue
@@ -1,8 +1,7 @@
 <template>
   <div class="editor">
-    <editor-menu-bubble class="menububble" :editor="editor" @hide="hideLinkMenu">
+    <editor-menu-bubble class="menububble" :editor="editor" @hide="hideLinkMenu" v-slot="{ commands, isActive, getMarkAttrs, menu }">
       <div
-        slot-scope="{ commands, isActive, getMarkAttrs, menu }"
         class="menububble"
         :class="{ 'is-active': menu.isActive }"
         :style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`"
diff --git a/examples/Components/Routes/MenuBubble/index.vue b/examples/Components/Routes/MenuBubble/index.vue
index c72625e3a..6819b9e03 100644
--- a/examples/Components/Routes/MenuBubble/index.vue
+++ b/examples/Components/Routes/MenuBubble/index.vue
@@ -1,8 +1,7 @@
 <template>
   <div class="editor">
-    <editor-menu-bubble :editor="editor" :keep-in-bounds="keepInBounds">
+    <editor-menu-bubble :editor="editor" :keep-in-bounds="keepInBounds" v-slot="{ commands, isActive, menu }">
       <div
-        slot-scope="{ commands, isActive, menu }"
         class="menububble"
         :class="{ 'is-active': menu.isActive }"
         :style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`"
diff --git a/examples/Components/Routes/Suggestions/index.vue b/examples/Components/Routes/Suggestions/index.vue
index 6d96c6419..c906d1b40 100644
--- a/examples/Components/Routes/Suggestions/index.vue
+++ b/examples/Components/Routes/Suggestions/index.vue
@@ -2,8 +2,8 @@
   <div>
 
     <div class="editor">
-      <editor-menu-bar :editor="editor">
-        <div class="menubar" slot-scope="{ commands }">
+      <editor-menu-bar :editor="editor" v-slot="{ commands }">
+        <div class="menubar">
           <button class="menubar__button" @click="commands.mention({ id: 1, label: 'Philipp Kühn' })">
             <icon name="mention" />
             <span>Insert Mention</span>
diff --git a/examples/Components/Routes/Tables/index.vue b/examples/Components/Routes/Tables/index.vue
index 5045d8e53..f63042343 100644
--- a/examples/Components/Routes/Tables/index.vue
+++ b/examples/Components/Routes/Tables/index.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="editor">
-		<editor-menu-bar :editor="editor">
-			<div class="menubar" slot-scope="{ commands, isActive }">
+		<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
+			<div class="menubar">
 				<div class="toolbar">
 					<button
 						class="menubar__button"
diff --git a/examples/Components/Routes/TodoList/index.vue b/examples/Components/Routes/TodoList/index.vue
index 0e92d41d4..cd144ceb2 100644
--- a/examples/Components/Routes/TodoList/index.vue
+++ b/examples/Components/Routes/TodoList/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="editor">
-    <editor-menu-bar :editor="editor">
-      <div class="menubar" slot-scope="{ commands, isActive }">
+    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
+      <div class="menubar">
 
         <button
           class="menubar__button"