ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

docs: Nuxt specific corrections (#2410)

Browse Source 
* Nuxt specific corrections

Minor adjustments so that the example doesn't need tinkering to run in latest default Nuxt installation.

Line 38: Nuxt does not use a src folder by default & convert name to multi-word to avoid naming convention errors.
Line 83: Removed id attribute from page container div. Nuxt adds its own id="app" to the app root container.
Line 85:  Convert name to multi-word to avoid naming convention errors.
Line 91: Fix typo client-only

* Refactor: Change component name to TiptapEditor

* docs: changed path notation for new component
This commit is contained in:
George Marios
2022-01-21 12:05:02 +02:00
committed by GitHub
parent 84fa6fb85e
commit 5a58153457
1 changed files with 13 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
docs/installation/nuxt.md
View File

@@ -35,7 +35,7 @@ npm install @tiptap/vue-2 @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 `src/components/Tiptap.vue`.
To actually start using Tiptap, you’ll need to add a new component to your app. Let’s call it `TiptapEditor` and put the following example code in `components/TiptapEditor.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.
@@ -76,19 +76,27 @@ export default {
```
## 4. Add it to your app
Now, let’s replace the content of `pages/index.vue` with the following example code to use our new `Tiptap` component in our app.
Now, let’s replace the content of `pages/index.vue` with the following example code to use our new `TiptapEditor` component in our app.
```html
<template>
<div id="app">
<div>
<client-only>
<tiptap />
<tiptap-editor />
</client-only>
</div>
</template>
<script>
import TiptapEditor from '~/components/TiptapEditor.vue'
export default {
components: {
TiptapEditor
}
}
</script>
```
Note that Tiptap needs to run in the client, not on the server. It’s required to wrap the editor in a `<client-only>` tag. [Read more about cient-only components.](https://nuxtjs.org/api/components-client-only)
Note that Tiptap needs to run in the client, not on the server. It’s required to wrap the editor in a `<client-only>` tag. [Read more about client-only components.](https://nuxtjs.org/api/components-client-only)
You should now see Tiptap in your browser. Time to give yourself a pat on the back! :)