add a few basics

docs/src/demos/BasicConfiguration/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="editor">
+    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
+        <div class="menubar">
+
+          <button
+            class="menubar__button"
+            :class="{ 'is-active': isActive.bold() }"
+            @click="commands.bold"
+          >
+            <icon name="bold" />
+          </button>
+
+        </div>
+      </editor-menu-bar>
+
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor } from '@tiptap/core'
+import { EditorContent, Renderer, EditorMenuBar } from '@tiptap/vue'
+import extensions, { Bold } from '@tiptap/starter-kit'
+
+export default {
+  components: {
+    EditorContent,
+    EditorMenuBar,
+  },
+
+  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([
+        new Bold,
+      ]),
+      renderer: Renderer,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>

docs/src/demos/GettingStarted/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>

docs/src/docPages/basic-vue-example.md

@@ -3,11 +3,11 @@
 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:
 
 ```bash
-# Install Vue.js adapter with npm
-npm install @tiptap/vue
+# Install tiptap & Vue.js adapter with npm
+npm install @tiptap/core @tiptap/starter-kit @tiptap/vue
 
-# Install Vue.js adapter with Yarn
-yarn add @tiptap/vue
+# Install tiptap & Vue.js adapter with Yarn
+yarn add @tiptap/core @tiptap/starter-kit @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.

docs/src/docPages/configuration.md

@@ -0,0 +1,7 @@
+# Configure tiptap
+
+In its basic version tiptap comes very raw. There is no menu, no buttons, no styling. That’s intended. See tiptap as your building blocks to build exactly the editor you’d like to have.
+
+Let’s start to add a few basic things to the configuration.
+
+<demo name="BasicConfiguration" />

docs/src/docPages/getting-started.md

@@ -0,0 +1,24 @@
+# First steps with 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:
+
+```bash
+# Install Vue.js adapter with npm
+npm install @tiptap/core @tiptap/starter-kit @tiptap/vue
+
+# Install Vue.js adapter with Yarn
+yarn add @tiptap/core @tiptap/starter-kit @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="GettingStarted" />
+
+Does that work for you? There are a few common pitfalls here, if you have trouble getting started, try to read more here:
+
+* [tiptap doesn’t have a default styling](#)
+* [Use tiptap with Nuxt.js](#)
+
+Most people would expect a text editor to have buttons to make the text bold or add links. tiptap has all of that, but it is very modular. You are free to decided what you use and how you use it. Use it as a more powerful textarea or build a full-blown editor. tiptap is ready for both.
+
+But let’s try to add a menu in the next step.

docs/src/docPages/installation.md

@@ -25,36 +25,35 @@ new Editor({
 })
 ```
 
-→ codesandbox
+* Play with tiptap on [CodeSandbox](https://codesandbox.io/s/vue-issue-template-h0g28)
 
 ## Vue.js
 
-```js
-import { Editor } from '@tiptap/core'
-import extensions from '@tiptap/starter-kit'
+To use tiptap with Vue.js and tools that are based on Vue.js install the Vue.js adapter in your project:
 
-new Editor({
-  element: document.getElementsByClassName('element'),
-  extensions: extensions(),
-  content: '<p>Hey there.</p>',
-})
+```bash
+# Using npm
+npm install @tiptap/core @tiptap/starter-kit @tiptap/vue
+
+# Using Yarn
+yarn add @tiptap/core @tiptap/starter-kit @tiptap/vue
 ```
 
-→ codesandbox
+Create a new component and add the following content to get a basic version of tiptap:
 
-## react
+<demo name="VueSetup" />
+
+* Read more about [Using tiptap with Vue.js](/basic-vue-example/)
+* Play with tiptap on [CodeSandbox](https://codesandbox.io/s/vue-issue-template-h0g28)
+
+## React
 
 ```js
-import { Editor } from '@tiptap/core'
-import extensions from '@tiptap/starter-kit'
-
-new Editor({
-  element: document.getElementsByClassName('element'),
-  extensions: extensions(),
-  content: '<p>Hey there.</p>',
-})
+// TODO
 ```
 
-→ codesandbox
+* Play with tiptap on [CodeSandbox](https://codesandbox.io/s/vue-issue-template-h0g28)
 
-## cdn?
+## CDN
+
+// TODO

docs/src/links.yaml

@@ -1,29 +1,29 @@
 - title: Getting Started
   items:
-    - title: Introduction
+    - title: Introduction 🚧
       link: /introduction/
-    - title: Installation
+    - title: Installation 🚧
       link: /installation/
 
 - title: Guide
   items:
-    - title: First Steps
-      link: /first-steps/
-    - title: Configuration
+    - title: Getting started 🚧
+      link: /getting-started/
+    - title: Configuration 🚧
       link: /configuration/
-    - title: Build your editor
+    - title: Build your editor ❌
       link: /build-your-editor/
-    - title: Custom styling
+    - title: Custom styling ❌
       link: /custom-styling/
-    - title: Get content
+    - title: Get content ❌
       link: /get-content/
-    - title: "Advanced nodes"
+    - title: Advanced nodes ❌
       link: /advanced-notes/
 
 - title: Vue
   items:
-    - title: Use tiptap with Vue.js
-      link: /basic-example/
+    - title: Use tiptap with Vue.js 🚧
+      link: /basic-vue-example/
     - title: Advanced Example
       link: /advanced-vue-example/
     - title: Render Vue Components