add basic vue setup example
This commit is contained in:
33
docs/src/demos/VueSetup/index.vue
Normal file
33
docs/src/demos/VueSetup/index.vue
Normal 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>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>
|
||||||
3
docs/src/demos/VueSetup/style.scss
Normal file
3
docs/src/demos/VueSetup/style.scss
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
.this-is-a-test {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
@@ -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" />
|
```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" />
|
||||||
Reference in New Issue
Block a user