Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Nuxt specific corrections #2410

Merged
merged 3 commits into from
Jan 21, 2022
Merged

Nuxt specific corrections #2410

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
70d22df
Nuxt specific corrections
gsqrt2 Jan 20, 2022
fa077f6
Refactor: Change component name to TiptapEditor
gsqrt2 Jan 20, 2022
c708aa8
docs: changed path notation for new component
gsqrt2 Jan 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
18 changes: 13 additions & 5 deletions docs/installation/nuxt.md
View file
Open in desktop
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>
hanspagel marked this conversation as resolved.
Show resolved Hide resolved
<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