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. 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 ## 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. 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 ## 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 ```html
<template> <template>
<div id="app"> <div>
<client-only> <client-only>
<tiptap /> <tiptap-editor />
</client-only> </client-only>
</div> </div>
</template> </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! :) You should now see Tiptap in your browser. Time to give yourself a pat on the back! :)