From 8d0a734bf4a3e0b946e2253dd0f32187da33d206 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Tue, 11 Aug 2020 16:59:17 +0200
Subject: [PATCH] add basic vue setup example

---
 docs/src/demos/VueSetup/index.vue  | 33 ++++++++++++++++++++++++++++++
 docs/src/demos/VueSetup/style.scss |  3 +++
 docs/src/docPages/basic-example.md | 16 ++++++++++++---
 3 files changed, 49 insertions(+), 3 deletions(-)
 create mode 100644 docs/src/demos/VueSetup/index.vue
 create mode 100644 docs/src/demos/VueSetup/style.scss

diff --git a/docs/src/demos/VueSetup/index.vue b/docs/src/demos/VueSetup/index.vue
new file mode 100644
index 00000000..04d9546e
--- /dev/null
+++ b/docs/src/demos/VueSetup/index.vue
@@ -0,0 +1,33 @@
+<template>
+  <editor-content :editor="editor" />
+</template>
+
+<script>
+import { Editor } from '@tiptap/core'
+import { EditorContent, Renderer } from '@tiptap/vue'
+import extensions from '@tiptap/starter-kit'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      content: '<p>I’m running tiptap with Vue.js. This demo is interactive, try to edit the text.</p>',
+      extensions: extensions(),
+      renderer: Renderer,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
\ No newline at end of file
diff --git a/docs/src/demos/VueSetup/style.scss b/docs/src/demos/VueSetup/style.scss
new file mode 100644
index 00000000..6e7bccb6
--- /dev/null
+++ b/docs/src/demos/VueSetup/style.scss
@@ -0,0 +1,3 @@
+.this-is-a-test {
+  color: black;
+}
\ No newline at end of file
diff --git a/docs/src/docPages/basic-example.md b/docs/src/docPages/basic-example.md
index 8ae10992..90f046cd 100644
--- a/docs/src/docPages/basic-example.md
+++ b/docs/src/docPages/basic-example.md
@@ -1,5 +1,15 @@
-# Basic Example
+# Use tiptap with Vue.js
 
-This is a basic example of tiptap.
+tiptap is framework-agnostic and works with plain JavaScript, Vue.js and React. To use tiptap with Vue.js or one of the tools that are based on Vue.js like Nuxt.js or Gridsome, you’ll need the tiptap Vue.js adapter. Install it as an dependency in your project:
 
-<demo name="Basic" />
\ No newline at end of file
+```bash
+# Install Vue.js adapter with npm
+npm install @tiptap/vue
+
+# Install Vue.js adapter with Yarn
+yarn add @tiptap/vue
+```
+
+Create a new Vue component (e. g. `<Tiptap />`) and add the following content. That’s the shortest way to get tiptap up and running with Vue.js. No worries, you’ll be able to add more functionality soon.
+
+<demo name="VueSetup" />
\ No newline at end of file