add basic vue setup example

This commit is contained in:
Hans Pagel
2020-08-11 16:59:17 +02:00
parent 11e8b201d3
commit 8d0a734bf4
3 changed files with 49 additions and 3 deletions

View File

@@ -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>Im running tiptap with Vue.js. This demo is interactive, try to edit the text.</p>',
extensions: extensions(),
renderer: Renderer,
})
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>

View File

@@ -0,0 +1,3 @@
.this-is-a-test {
color: black;
}

View File

@@ -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, youll need the tiptap Vue.js adapter. Install it as an dependency in your project:
<demo name="Basic" />
```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. Thats the shortest way to get tiptap up and running with Vue.js. No worries, youll be able to add more functionality soon.
<demo name="VueSetup" />