Update alpine docs (#1733)

This commit is contained in:
Sibiraj 2021-08-17 00:27:45 +05:30 committed by GitHub
parent 903220b86b
commit 0488479d68
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -21,12 +21,14 @@ If you already have an existing Alpine.js project, thats fine too. Just skip
For the sake of this guide, lets start with a fresh [Vite](https://vitejs.dev/) project called `tiptap-example`. Vite sets up everything we need, just select the Vanilla JavaScript template.
```bash
npm init @vitejs/app tiptap-example
npm init vite@latest tiptap-example -- --template vanilla
cd tiptap-example
npm install
npm run dev
```
## 2. Install the dependencies
Okay, enough of the boring boilerplate work. Lets finally install tiptap! For the following example youll need `alpinejs`, the `@tiptap/core` package and the `@tiptap/starter-kit` which has the most common extensions to get started quickly.
```bash
@ -45,7 +47,7 @@ To actually start using tiptap, youll need to write a little bit of JavaScrip
This is the fastest way to get tiptap up and running with Alpine.js. It will give you a very basic version of tiptap. No worries, you will be able to add more functionality soon.
```js
import alpinejs from 'alpinejs'
import Alpine from 'alpinejs'
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
@ -71,6 +73,9 @@ window.setupEditor = function(content) {
},
}
}
window.Alpine = Alpine
Alpine.start()
```
## 4. Add it to your app