From d3e0de4e2eb715dc1a4204bf4acf94360d5b29d1 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Tue, 1 Dec 2020 15:50:02 +0100 Subject: [PATCH] docs: improve getting started guides, add v-model demo --- .../GettingStarted}/VModel/Editor.vue | 0 .../GettingStarted}/VModel/index.spec.js | 0 .../GettingStarted}/VModel/index.vue | 0 docs/src/docPages/examples/v-model.md | 3 --- .../docPages/guide/getting-started/nuxtjs.md | 27 +++++++------------ .../docPages/guide/getting-started/vue-cli.md | 18 ++++++++++++- docs/src/links.yaml | 2 -- 7 files changed, 26 insertions(+), 24 deletions(-) rename docs/src/demos/{Examples => Guide/GettingStarted}/VModel/Editor.vue (100%) rename docs/src/demos/{Examples => Guide/GettingStarted}/VModel/index.spec.js (100%) rename docs/src/demos/{Examples => Guide/GettingStarted}/VModel/index.vue (100%) delete mode 100644 docs/src/docPages/examples/v-model.md diff --git a/docs/src/demos/Examples/VModel/Editor.vue b/docs/src/demos/Guide/GettingStarted/VModel/Editor.vue similarity index 100% rename from docs/src/demos/Examples/VModel/Editor.vue rename to docs/src/demos/Guide/GettingStarted/VModel/Editor.vue diff --git a/docs/src/demos/Examples/VModel/index.spec.js b/docs/src/demos/Guide/GettingStarted/VModel/index.spec.js similarity index 100% rename from docs/src/demos/Examples/VModel/index.spec.js rename to docs/src/demos/Guide/GettingStarted/VModel/index.spec.js diff --git a/docs/src/demos/Examples/VModel/index.vue b/docs/src/demos/Guide/GettingStarted/VModel/index.vue similarity index 100% rename from docs/src/demos/Examples/VModel/index.vue rename to docs/src/demos/Guide/GettingStarted/VModel/index.vue diff --git a/docs/src/docPages/examples/v-model.md b/docs/src/docPages/examples/v-model.md deleted file mode 100644 index ff827b1a..00000000 --- a/docs/src/docPages/examples/v-model.md +++ /dev/null @@ -1,3 +0,0 @@ -# Use v-model - - diff --git a/docs/src/docPages/guide/getting-started/nuxtjs.md b/docs/src/docPages/guide/getting-started/nuxtjs.md index 075b0933..2d3b7c67 100644 --- a/docs/src/docPages/guide/getting-started/nuxtjs.md +++ b/docs/src/docPages/guide/getting-started/nuxtjs.md @@ -22,7 +22,7 @@ npm init nuxt-app tiptap-example cd tiptap-example ``` -## 3. Install the dependencies +## 2. Install the dependencies Okay, enough of the boring boilerplate work. Let’s finally install tiptap! For the following example you’ll need `@tiptap/core` (the actual editor) and the `@tiptap/vue-starter-kit` which has everything to get started quickly, for example a few default extensions and a basic Vue component. ```bash @@ -35,7 +35,7 @@ yarn add @tiptap/core @tiptap/vue-starter-kit If you followed step 1 and 2, you can now start your project with `npm run serve` or `yarn 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. -## 4. Create a new component +## 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`. 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. @@ -73,8 +73,8 @@ export default { ``` -## 5. Add it to your app -Now, let’s replace the content of `src/App.vue` with the following example code to use our new `Tiptap` component in our app. +## 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. ```html - - ``` -::: warning Nuxt.js -If you use Nuxt.js, note that tiptap needs to run in the client, not on the server. It’s required to wrap the editor in a `` tag. -::: You should now see tiptap in your browser. You’ve successfully set up tiptap! Time to give yourself a pat on the back. Let’s start to configure your editor in the next step. + +## 5. Use v-model (optional) +You’re probably used to bind your data with `v-model` in forms, that’s also possible with tiptap. Here is a working example component, that you can integrate in your project: + + diff --git a/docs/src/docPages/guide/getting-started/vue-cli.md b/docs/src/docPages/guide/getting-started/vue-cli.md index 403f56b1..bc3b6af1 100644 --- a/docs/src/docPages/guide/getting-started/vue-cli.md +++ b/docs/src/docPages/guide/getting-started/vue-cli.md @@ -89,7 +89,7 @@ export default { ``` ## 5. 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 `src/App.vue` with the following example code to use our new `Tiptap` component in our app. ```html + + ``` You should now see tiptap in your browser. You’ve successfully set up tiptap! Time to give yourself a pat on the back. Let’s start to configure your editor in the next step. + +## 6. Use v-model (optional) +You’re probably used to bind your data with `v-model` in forms, that’s also possible with tiptap. Here is a working example component, that you can integrate in your project: + + diff --git a/docs/src/links.yaml b/docs/src/links.yaml index 778863be..8101f44c 100644 --- a/docs/src/links.yaml +++ b/docs/src/links.yaml @@ -30,8 +30,6 @@ link: /examples/book - title: For minimalists link: /examples/minimalist - # - title: Use with v-model - # link: /examples/v-model - title: Guide items: