Skip to content

Commit

Permalink
docs: Nuxt specific corrections (#2410)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
gsqrt2 committed Jan 21, 2022
1 parent 84fa6fb commit 5a58153
Showing 1 changed file with 13 additions and 5 deletions.
18 changes: 13 additions & 5 deletions docs/installation/nuxt.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down Expand Up @@ -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! :)

Expand Down

0 comments on commit 5a58153

Please sign in to comment.