diff --git a/docs/src/docPages/api/editor.md b/docs/src/docPages/api/editor.md index e47e0238..f4a1e99f 100644 --- a/docs/src/docPages/api/editor.md +++ b/docs/src/docPages/api/editor.md @@ -9,7 +9,7 @@ This class is a central building block of tiptap. It does most of the heavy lift Check out the API documentation to see [all available options](/api/editor/). ### Element -The `element` specifies the HTML element the editor will be binded too. The following code will add tiptap to an element with the `.element` class: +The `element` specifies the HTML element the editor will be binded too. The following code will integrate tiptap with an element with the `.element` class: ```js import { Editor } from '@tiptap/core' diff --git a/docs/src/docPages/guide/getting-started/nuxtjs.md b/docs/src/docPages/guide/getting-started/nuxtjs.md new file mode 100644 index 00000000..075b0933 --- /dev/null +++ b/docs/src/docPages/guide/getting-started/nuxtjs.md @@ -0,0 +1,101 @@ +# Nuxt.js + +## toc + +## Introduction +The following guide describes how to integrate tiptap with your Nuxt.js project. + +## Requirements +* [Node](https://nodejs.org/en/download/) installed on your machine +* Experience with [Vue](https://vuejs.org/v2/guide/#Getting-Started) + +## 1. Create a project (optional) +If you already have an existing Vue project, that’s fine too. Just skip this step and proceed with the next step. + +For the sake of this guide, let’s start with a fresh Nuxt.js project called `tiptap-example`. The following command sets up everything we need. It asks a lot of questions, but just use what floats your boat or use the defaults. + +```bash +# create a project +npm init nuxt-app tiptap-example + +# change directory +cd tiptap-example +``` + +## 3. 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 +# install with npm +npm install @tiptap/core @tiptap/vue-starter-kit + +# install with Yarn +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 +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. + +```html + + + +``` + +## 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. + +```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. diff --git a/docs/src/docPages/guide/getting-started/vue-cli.md b/docs/src/docPages/guide/getting-started/vue-cli.md index 5767664a..403f56b1 100644 --- a/docs/src/docPages/guide/getting-started/vue-cli.md +++ b/docs/src/docPages/guide/getting-started/vue-cli.md @@ -3,7 +3,7 @@ ## toc ## Introduction -The following guide describes how to add tiptap to your Vue CLI project. If you’ve got Vue CLI on your machine already, you can skip the first step. +The following guide describes how to integrate tiptap with your Vue CLI project. If you’ve got Vue CLI on your machine already, you can skip the first step. ## Requirements * [Node](https://nodejs.org/en/download/) installed on your machine @@ -38,7 +38,7 @@ cd tiptap-example ``` ## 3. Install the dependencies -Okay, enough of the boring boilerplate work. Let’s finally install tiptap! For the following example you’ll need the `@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. +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 # install with npm @@ -48,10 +48,10 @@ npm install @tiptap/core @tiptap/vue-starter-kit 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. +If you followed step 1 and 2, you can now start your project with `npm run dev` or `yarn dev`, and open [http://localhost:8080/](http://localhost:3000/) in your favorite browser. This might be different, if you’re working with an existing project. ## 4. 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. @@ -89,7 +89,7 @@ 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. +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. diff --git a/docs/src/links.yaml b/docs/src/links.yaml index 189f2dc5..62c3b54c 100644 --- a/docs/src/links.yaml +++ b/docs/src/links.yaml @@ -40,6 +40,8 @@ items: - title: Vue CLI link: /guide/getting-started/vue-cli + - title: Nuxt.js + link: /guide/getting-started/nuxtjs - title: Configure the editor link: /guide/configure-the-editor - title: Create a toolbar