mirror of
https://github.com/ueberdosis/tiptap.git
synced 2024-12-25 18:27:49 +08:00
f387ad3dd4
* chore:(core): migrate to tsup * chore: migrate blockquote and bold to tsup * chore: migrated bubble-menu and bullet-list to tsup * chore: migrated more packages to tsup * chore: migrate code and character extensions to tsup * chore: update package.json to simplify build for all packages * chore: move all packages to tsup as a build process * chore: change ci build task * feat(pm): add prosemirror meta package * rfix: resolve issues with build paths & export mappings * docs: update documentation to include notes for @tiptap/pm * chore(pm): update tsconfig * chore(packages): update packages * fix(pm): add package export infos & fix dependencies * chore(general): start moving to pm package as deps * chore: move to tiptap pm package internally * fix(demos): fix demos working with new pm package * fix(tables): fix tables package * fix(tables): fix tables package * chore(demos): pinned typescript version * chore: remove unnecessary tsconfig * chore: fix netlify build * fix(demos): fix package resolving for pm packages * fix(tests): fix package resolving for pm packages * fix(tests): fix package resolving for pm packages * chore(tests): fix tests not running correctly after pm package * chore(pm): add files to files array * chore: update build workflow * chore(tests): increase timeout time back to 12s * chore(docs): update docs * chore(docs): update installation guides & pm information to docs * chore(docs): add link to prosemirror docs * fix(vue-3): add missing build step * chore(docs): comment out cdn link * chore(docs): remove semicolons from docs * chore(docs): remove unnecessary installation note * chore(docs): remove unnecessary installation note
157 lines
3.9 KiB
Markdown
157 lines
3.9 KiB
Markdown
---
|
||
title: Vue.js 3 WYSIWYG
|
||
tableOfContents: true
|
||
---
|
||
|
||
# Vue.js 3
|
||
|
||
## Introduction
|
||
The following guide describes how to integrate Tiptap with your [Vue](https://vuejs.org/) CLI project.
|
||
|
||
## Requirements
|
||
* [Node](https://nodejs.org/en/download/) installed on your machine
|
||
* [Vue CLI](https://cli.vuejs.org/) installed on your machine
|
||
* Experience with [Vue](https://v3.vuejs.org/guide/introduction.html)
|
||
|
||
## 1. Create a project (optional)
|
||
If you already have an existing Vue project, that’s fine too. Just skip this step and proceed with the next step.
|
||
|
||
For the sake of this guide, let’s start with a fresh Vue project called `my-tiptap-project`. The Vue CLI sets up everything we need, just select the Vue 3 template.
|
||
|
||
```bash
|
||
# create a project
|
||
vue create my-tiptap-project
|
||
|
||
# change directory
|
||
cd my-tiptap-project
|
||
```
|
||
|
||
## 2. Install the dependencies
|
||
Okay, enough of the boring boilerplate work. Let’s finally install Tiptap! For the following example you’ll need the `@tiptap/vue-3` package, with a few components, and `@tiptap/starter-kit` which has the most common extensions to get started quickly.
|
||
|
||
```bash
|
||
npm install @tiptap/vue-3 @tiptap/starter-kit
|
||
```
|
||
|
||
If you followed step 1 and 2, you can now start your project with `npm run serve`, and open [http://localhost:8080](http://localhost:8080) in your favorite browser. This might be different, if you’re working with an existing project.
|
||
|
||
## 3. Create a new component
|
||
To actually start using Tiptap, you’ll need to add a new component to your app. Let’s call it `Tiptap` and put the following example code in `components/Tiptap.vue`.
|
||
|
||
This is the fastest way to get Tiptap up and running with Vue. It will give you a very basic version of Tiptap, without any buttons. No worries, you will be able to add more functionality soon.
|
||
|
||
```html
|
||
<template>
|
||
<editor-content :editor="editor" />
|
||
</template>
|
||
|
||
<script>
|
||
import { Editor, EditorContent } from '@tiptap/vue-3'
|
||
import StarterKit 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. 🎉</p>',
|
||
extensions: [
|
||
StarterKit,
|
||
],
|
||
})
|
||
},
|
||
|
||
beforeUnmount() {
|
||
this.editor.destroy()
|
||
},
|
||
}
|
||
</script>
|
||
```
|
||
|
||
Alternatively, you can use the Composition API with the `useEditor` method.
|
||
|
||
```html
|
||
<template>
|
||
<editor-content :editor="editor" />
|
||
</template>
|
||
|
||
<script>
|
||
import { useEditor, EditorContent } from '@tiptap/vue-3'
|
||
import StarterKit from '@tiptap/starter-kit'
|
||
|
||
export default {
|
||
components: {
|
||
EditorContent,
|
||
},
|
||
|
||
setup() {
|
||
const editor = useEditor({
|
||
content: '<p>I’m running Tiptap with Vue.js. 🎉</p>',
|
||
extensions: [
|
||
StarterKit,
|
||
],
|
||
})
|
||
|
||
return { editor }
|
||
},
|
||
}
|
||
</script>
|
||
```
|
||
|
||
Or feel free to use the new [`<script setup>` syntax](https://v3.vuejs.org/api/sfc-script-setup.html).
|
||
|
||
```html
|
||
<template>
|
||
<editor-content :editor="editor" />
|
||
</template>
|
||
|
||
<script setup>
|
||
import { useEditor, EditorContent } from '@tiptap/vue-3'
|
||
import StarterKit from '@tiptap/starter-kit'
|
||
|
||
const editor = useEditor({
|
||
content: '<p>I’m running Tiptap with Vue.js. 🎉</p>',
|
||
extensions: [
|
||
StarterKit,
|
||
],
|
||
})
|
||
</script>
|
||
```
|
||
|
||
## 4. Add it to your app
|
||
Now, let’s replace the content of `src/App.vue` with the following example code to use our new `Tiptap` component in our app.
|
||
|
||
```html
|
||
<template>
|
||
<div id="app">
|
||
<tiptap />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Tiptap from './components/Tiptap.vue'
|
||
|
||
export default {
|
||
name: 'App',
|
||
components: {
|
||
Tiptap
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
|
||
You should now see Tiptap in your browser. Time to give yourself a pat on the back! :)
|
||
|
||
## 5. Use v-model (optional)
|
||
You’re probably used to binding your data with `v-model` in forms, that’s also possible with Tiptap. Here is how that would work with Tiptap:
|
||
|
||
https://embed.tiptap.dev/preview/GuideGettingStarted/VModel
|