diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 16b55c3560101b2f75a5bfd9b5f7947fd807b3d7..b644b9726bae3993d8d02160a5c863cdefc69e9b 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -1,28 +1,31 @@
 module.exports = {
-    title: 'vue-draggable-grid',
-    description: 'vue-draggable-grid component library for a draggable grid',
-    themeConfig: {
-        sidebar: [
-            {
-                title: 'Examples',
-                collapsable: false,
-                children: [
-                    '/examples/Generic.md',
-                    '/examples/TicTacToe.md',
-                    '/examples/Counters.md',
-                    '/examples/Lessons.md',
-                    '/examples/Colors.md',
-                    '/examples/Disabled.md',
-                    '/examples/DisabledItems.md',
-                    '/examples/Responsive.md',
-                ]
-            }
+  title: "vue-draggable-grid",
+  description: "vue-draggable-grid component library for a draggable grid",
+  themeConfig: {
+    sidebar: [
+      {
+        title: "Examples",
+        collapsable: false,
+        children: [
+          "/examples/Generic.md",
+          "/examples/TicTacToe.md",
+          "/examples/Counters.md",
+          "/examples/Lessons.md",
+          "/examples/Colors.md",
+          "/examples/Disabled.md",
+          "/examples/DisabledItems.md",
+          "/examples/Responsive.md",
         ],
-        nav: [
-            { text: 'Home', link: '/' },
-            { text: 'Guide', link: '/guide/' },
-            { text: 'Examples', link: '/examples/Generic.md'},
-            { text: 'Repository', link: 'https://edugit.org/AlekSIS/libs/vue-draggable-grid/' }
-        ]
-    }
-}
\ No newline at end of file
+      },
+    ],
+    nav: [
+      { text: "Home", link: "/" },
+      { text: "Guide", link: "/guide/" },
+      { text: "Examples", link: "/examples/Generic.md" },
+      {
+        text: "Repository",
+        link: "https://edugit.org/AlekSIS/libs/vue-draggable-grid/",
+      },
+    ],
+  },
+};
diff --git a/docs/README.md b/docs/README.md
index e2ffe596f381b8a4b18e7e97b07c8aa3a4003944..17458b43f5b80502feb99782578b646019d54a3c 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -5,4 +5,4 @@ tagline: A vueJS library to create grids with draggable data blocks.
 actionText: Get Started →
 actionLink: /guide/
 footer: Copyright © 2023 Julian Leucker
----
\ No newline at end of file
+---
diff --git a/docs/examples/Colors.md b/docs/examples/Colors.md
index ca475836a0e008c0ffc8406a29d81c6bc3dcc95a..fa6ae24c8e5d4dd9cb1998247791958764fbc889 100644
--- a/docs/examples/Colors.md
+++ b/docs/examples/Colors.md
@@ -14,6 +14,5 @@ positioned automatically.
 import Example5Colors from "../../example/src/Example5Colors.vue";
 </script>
 
-
 <Example5Colors />
-</ClientOnly>
\ No newline at end of file
+</ClientOnly>
diff --git a/docs/examples/Counters.md b/docs/examples/Counters.md
index 112be6ee6d303badedc0a8ffce44b0cba2dd6f0a..778baeb2c2163d898f17a74b9bb4a7bfbac83ff0 100644
--- a/docs/examples/Counters.md
+++ b/docs/examples/Counters.md
@@ -12,4 +12,4 @@ import Example3Counters from "../../example/src/Example3Counters.vue";
 </script>
 
 <Example3Counters />
-</ClientOnly>
\ No newline at end of file
+</ClientOnly>
diff --git a/docs/examples/Disabled.md b/docs/examples/Disabled.md
index cecee570209cdff55f2e9949ae8371d060b66f83..c44d5dd3dd27da82bab15b0c29b874d699adfa04 100644
--- a/docs/examples/Disabled.md
+++ b/docs/examples/Disabled.md
@@ -12,6 +12,5 @@ but it displays loading symbols everywhere. Check the checkbox to try:
 import Example6Disabled from "../../example/src/Example6Disabled.vue";
 </script>
 
-
 <Example6Disabled />
-</ClientOnly>
\ No newline at end of file
+</ClientOnly>
diff --git a/docs/examples/DisabledItems.md b/docs/examples/DisabledItems.md
index 423e5fb3e80f64c1ec709359f20b14d2bd1da6a7..8c5b4969f740ea391d80c2a19fdc82adb0be82df 100644
--- a/docs/examples/DisabledItems.md
+++ b/docs/examples/DisabledItems.md
@@ -9,6 +9,5 @@ to them. Green items are normal and enabled.
 import Example7DisabledItems from "../../example/src/Example7DisabledItems.vue";
 </script>
 
-
 <Example7DisabledItems />
-</ClientOnly>
\ No newline at end of file
+</ClientOnly>
diff --git a/docs/examples/Generic.md b/docs/examples/Generic.md
index 520206bc1d9ade46086d2e9678169531e32b0617..bc2060c125df19f3e6c9e1b66cc516a659d4a4bd 100644
--- a/docs/examples/Generic.md
+++ b/docs/examples/Generic.md
@@ -7,6 +7,5 @@ Grid with two programmatically blocked cells and one programmatically blocked it
 import Example1Generic from "../../example/src/Example1Generic.vue";
 </script>
 
-
 <Example1Generic />
-</ClientOnly>
\ No newline at end of file
+</ClientOnly>
diff --git a/docs/examples/Lessons.md b/docs/examples/Lessons.md
index 80c092cdb8726104a126f4372f2527a7ad31dd37..a04c26f0c59f6b533b5c84b7ed0c6b7a052fe227 100644
--- a/docs/examples/Lessons.md
+++ b/docs/examples/Lessons.md
@@ -12,6 +12,5 @@ have a highlight and doesn't keep track of the item position. Try moving
 import Example4Lessons from "../../example/src/Example4Lessons.vue";
 </script>
 
-
 <Example4Lessons />
-</ClientOnly>
\ No newline at end of file
+</ClientOnly>
diff --git a/docs/examples/Responsive.md b/docs/examples/Responsive.md
index 3d87a0affb7b9b0c049a20a0286753dcdc21dce2..55eb22025f58e60738e91e7cfc244c7f34987574 100644
--- a/docs/examples/Responsive.md
+++ b/docs/examples/Responsive.md
@@ -7,6 +7,5 @@ The grid is responsive. Try resizing it below:
 import Example8Responsive from "../../example/src/Example8Responsive.vue";
 </script>
 
-
 <Example8Responsive />
-</ClientOnly>
\ No newline at end of file
+</ClientOnly>
diff --git a/docs/examples/TicTacToe.md b/docs/examples/TicTacToe.md
index e8f1172f048d5fa17f27e3e47d1fe1bc1934c115..bfb532845945d01a26b0062de8ac2683865db4c2 100644
--- a/docs/examples/TicTacToe.md
+++ b/docs/examples/TicTacToe.md
@@ -7,6 +7,5 @@ A grid functioning as a playing field and another functioning as a container for
 import Example2TicTacToe from "../../example/src/Example2TicTacToe.vue";
 </script>
 
-
 <Example2TicTacToe />
-</ClientOnly>
\ No newline at end of file
+</ClientOnly>
diff --git a/docs/guide/index.md b/docs/guide/index.md
index 357132457877ce2301b64562390d9c0b7c8c8af9..4fd751b8c3b34172e9fe4657b65007366e80c80b 100644
--- a/docs/guide/index.md
+++ b/docs/guide/index.md
@@ -20,7 +20,6 @@ Vue.use(draggableGrid);
 Inside the component where you want to use the grid define your grid and data as follows:
 
 ```vue
-
 <template>
   <drag-grid v-model="items" :cols="4" :rows="4">
     <template #item="item">
@@ -35,13 +34,34 @@ export default {
   data() {
     return {
       items: [
-        {x: 1, y: 3, w: 2, h: 2, key: "item1", data: {text: "Hello world 1"},},
-        {x: 2, y: 2, w: 2, h: 1, key: "item2", data: {text: "Hello world 2"},},
-        {x: 3, y: 1, w: 1, h: 1, key: "item3", data: {text: "Hello world 3"},},
-      ]
-    }
+        {
+          x: 1,
+          y: 3,
+          w: 2,
+          h: 2,
+          key: "item1",
+          data: { text: "Hello world 1" },
+        },
+        {
+          x: 2,
+          y: 2,
+          w: 2,
+          h: 1,
+          key: "item2",
+          data: { text: "Hello world 2" },
+        },
+        {
+          x: 3,
+          y: 1,
+          w: 1,
+          h: 1,
+          key: "item3",
+          data: { text: "Hello world 3" },
+        },
+      ],
+    };
   },
-}
+};
 </script>
 ```
 
@@ -54,9 +74,9 @@ An example for a disabled fields property:
 
 ```javascript
 disabledFields: [
-    {x: 1, y: 1},
-    {x: 2, y: 3},
-]
+  { x: 1, y: 1 },
+  { x: 2, y: 3 },
+];
 ```
 
 ## Prevent items from being dragged
@@ -95,15 +115,15 @@ Examples for such methods are the following:
 
 ```javascript
 function blockField(x, y, key) {
-    // We won't move items with ID 'obj8' and nothing into (3, 3) and (4, 3)
-    if (x === 3 && y === 3) return false;
-    if (x === 4 && y === 3) return false;
-    return key !== "obj8";
-};
+  // We won't move items with ID 'obj8' and nothing into (3, 3) and (4, 3)
+  if (x === 3 && y === 3) return false;
+  if (x === 4 && y === 3) return false;
+  return key !== "obj8";
+}
 
 function blockAllMoving() {
-    return false;
-};
+  return false;
+}
 ```
 
 ## Changing the highlight
@@ -115,17 +135,12 @@ The highlight is the grey-bordered rectangle which appears when dragging over a
 To customize the highlight, use the `highlight` slot inside the grid component.
 
 ```html
-
-<drag-grid
-        v-model="items"
-        :cols="3"
-        :rows="2"
->
-    <template #highlight>
-        <div ref="highlight" class="custom-highlight">
-            This is a custom highlight with a custom style!
-        </div>
-    </template>
+<drag-grid v-model="items" :cols="3" :rows="2">
+  <template #highlight>
+    <div ref="highlight" class="custom-highlight">
+      This is a custom highlight with a custom style!
+    </div>
+  </template>
 </drag-grid>
 ```
 
@@ -147,9 +162,9 @@ function could look like this:
 
 ```javascript
 function randomKey(element) {
-    if (element.key.length !== 1) return;
-    element.key += Math.random().toString(36).replace("0.", "");
-};
+  if (element.key.length !== 1) return;
+  element.key += Math.random().toString(36).replace("0.", "");
+}
 ```
 
 This method changes the key of a moved item to a random string if the key has a length of 1.
@@ -164,20 +179,22 @@ as well as the `context`.
 A singular item could look like this:
 
 ```javascript
-[{
-  x: (grid) => {
-    return grid.gridId === "lesson-plan" ? this.lesson1X : 0;
-  },
-  y: (grid) => {
-    return grid.gridId === "lesson-plan" ? this.lesson1Y : 0;
+[
+  {
+    x: (grid) => {
+      return grid.gridId === "lesson-plan" ? this.lesson1X : 0;
+    },
+    y: (grid) => {
+      return grid.gridId === "lesson-plan" ? this.lesson1Y : 0;
+    },
+    w: 1,
+    h: this.lesson1Length,
+    key: "lesson1",
+    data: {
+      text: this.lessonData.lesson1,
+    },
   },
-  w: 1,
-  h: this.lesson1Length,
-  key: "lesson1",
-  data: {
-    text: this.lessonData.lesson1,
-  },
-}]
+];
 ```
 
 Items can also have custom extra properties. They will however be reset after moving.
@@ -192,7 +209,7 @@ The `input` event works together with the value prop so one can use `v-model` to
 and have changes made automatically. The event returns the grid how it would look if the item
 moved to the specific location.
 
-::: warning 
+::: warning
 Notice that this event is only possible if your item properties are basic types, functional items are not
 supported and the properties will be reset to `undefined`.
 :::
@@ -201,21 +218,21 @@ The `itemChanged` event returns the moved item with following attributes:
 
 ```javascript
 let eventData = {
-    context: String,      // Context of the origin grid (same as the target's)
-    data: Object,         // Data Object of the item
-    gridId: String,       // ID of the target grid
-    h: Number,            // Height of the item
-    key: String,          // Key of the item
-    mouseX: Number,       // Mouse position on the element relative to
-    mouseY: Number,       //    the center of the top left rectangle
-    originGridId: String, // ID of the origin grid
-    w: Number,            // Width of the item
-    x: Number,            // New x position (col) of the item
-    y: Number,            // New y position (row) of the item
-}
+  context: String, // Context of the origin grid (same as the target's)
+  data: Object, // Data Object of the item
+  gridId: String, // ID of the target grid
+  h: Number, // Height of the item
+  key: String, // Key of the item
+  mouseX: Number, // Mouse position on the element relative to
+  mouseY: Number, //    the center of the top left rectangle
+  originGridId: String, // ID of the origin grid
+  w: Number, // Width of the item
+  x: Number, // New x position (col) of the item
+  y: Number, // New y position (row) of the item
+};
 ```
 
-This event doesn't change the grid, this change has to be made separately. This is 
+This event doesn't change the grid, this change has to be made separately. This is
 useful if e.g. a direct API request is needed.
 
 ## Multiple grids