From 5a581534574e393a86c0bf30df71a813ea2fd65d Mon Sep 17 00:00:00 2001 From: George Marios Date: Fri, 21 Jan 2022 12:05:02 +0200 Subject: [PATCH] docs: Nuxt specific corrections (#2410) * 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 --- docs/installation/nuxt.md | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/docs/installation/nuxt.md b/docs/installation/nuxt.md index e676a532c74..3c3d6f697c0 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! :)