diff --git a/docs/installation/nuxt.md b/docs/installation/nuxt.md index e676a532c7..3c3d6f697c 100644 --- a/docs/installation/nuxt.md +++ b/docs/installation/nuxt.md @@ -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 + ``` -Note that Tiptap needs to run in the client, not on the server. It’s required to wrap the editor in a `` 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 `` 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! :)