From 70d22df3677eb12cf1cd97137d11abab0d7d4fc3 Mon Sep 17 00:00:00 2001 From: George Marios Date: Thu, 20 Jan 2022 18:22:29 +0200 Subject: [PATCH 1/3] 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 --- docs/installation/nuxt.md | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/docs/installation/nuxt.md b/docs/installation/nuxt.md index e676a532c7..c31aaa5151 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 `TipTap` and put the following example code in `~/components/TipTap.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. @@ -80,15 +80,23 @@ Now, let’s replace the content of `pages/index.vue` with the following example ```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! :) From fa077f6440ad5405de411ea2a5fe0045e6710b31 Mon Sep 17 00:00:00 2001 From: gsqrt2 Date: Thu, 20 Jan 2022 20:47:47 +0200 Subject: [PATCH 2/3] Refactor: Change component name to TiptapEditor --- docs/installation/nuxt.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/installation/nuxt.md b/docs/installation/nuxt.md index c31aaa5151..b2e7e2861b 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 `~/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,21 +76,21 @@ 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 From c708aa82eea43c449c4a17b21972fbf51dc4d4ae Mon Sep 17 00:00:00 2001 From: gsqrt2 Date: Fri, 21 Jan 2022 11:17:16 +0200 Subject: [PATCH 3/3] docs: changed path notation for new component --- docs/installation/nuxt.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/installation/nuxt.md b/docs/installation/nuxt.md index b2e7e2861b..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 `TiptapEditor` and put the following example code in `~/components/TiptapEditor.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.