---
title: "Vue integration"
description: "The Official TinyMCE Vue.js component"
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/vue-cloud/"
md_url: "https://www.tiny.cloud/docs/tinymce/5/vue/index.md"
version: "5"
last_updated: "2024-04-09T10:06:54Z"
tokens: 4023
---
Important This page documents TinyMCE 5. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/vue-cloud/).
# Vue integration

## TinyMCE Vue.js integration quick start guide

The [Official TinyMCE Vue.js component](https://github.com/tinymce/tinymce-vue) integrates TinyMCE into Vue.js projects.
This procedure creates a [basic Vue.js application](https://cli.vuejs.org/guide/creating-a-project.html#vue-create) containing a TinyMCE editor based on our [Basic example](../basic-example/).

Version 4 of the `tinymce-vue` package supports Vue.js 3.x, but does not support Vue.js 2.x. For Vue.js 2.x applications, use `tinymce-vue` version 3.

### TinyMCE Vue.js integration live examples

For examples of the TinyMCE Vue.js 2.x integration, visit: [the tinymce-vue storybook](https://tinymce.github.io/tinymce-vue/).

For examples of the TinyMCE Vue.js 3.x integration:

1. Clone the `tinymce/tinymce-vue` GitHub repository. For example:

```sh
$ git clone https://github.com/tinymce/tinymce-vue.git
```
2. Install the required packages using `yarn`. For example:

```sh
$ yarn install
```
3. To start the demo server, run:

```sh
$ yarn demo
```
The `tinymce-vue` demo is now running. Visit: http://localhost:3001.

### Prerequisites

This procedure requires:

- [Node.js (and npm)](https://nodejs.org/).
- Access to `tinymce.min.js` on either:

  - [Tiny Cloud](../editor-and-features/).
  - TinyMCE Self-hosted. See:

    - [Installing TinyMCE - Package Managers](../installation/#packagemanagerinstalloptions).
    - [Installing TinyMCE - Self-Hosted Download / Install](../installation/#self-hostedinstall).

### Procedure

1. On a command line or command prompt, install the [Vue CLI Tool](https://cli.vuejs.org/#getting-started) package.

```sh
$ npm install -g @vue/cli
```
2. Create a new Vue.js project named `tinymce-vue-demo`.

  - To use the interactive prompt, run:

```sh
$ vue create tinymce-vue-demo
```
  - To skip the interactive prompt:

    - For Vue.js 3.x users:

```sh
$ vue create --inlinePreset '{ "vueVersion": "3", "plugins": {} }' tinymce-vue-demo
```
    - For Vue.js 2.x users:

```sh
$ vue create --inlinePreset '{ "vueVersion": "2", "plugins": {} }' tinymce-vue-demo
```
3. Change into the newly created directory.

```sh
$ cd tinymce-vue-demo
```
4. Install the `tinymce-vue` package and save it to your `package.json` with `--save`.

  - For Vue.js 3.x users:

```sh
$ npm install --save "@tinymce/tinymce-vue@^4"
```
  - For Vue.js 2.x users:

```sh
$ npm install --save "@tinymce/tinymce-vue@^3"
```
5. Using a text editor, open `/path/to/tinymce-vue-demo/src/App.vue`.

  1. Add a TinyMCE configuration to the `<template>` using the `<editor>` tag.
  2. Add `import Editor from '@tinymce/tinymce-vue'` to the start of the `<script>`.
  3. Add `editor: Editor` to the `default {components}`.

For example:

```jsx
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <editor
      api-key="no-api-key"
      :init="{
        height: 500,
        menubar: false,
        plugins: [
          'advlist autolink lists link image charmap print preview anchor',
          'searchreplace visualblocks code fullscreen',
          'insertdatetime media table paste code help wordcount'
        ],
        toolbar:
          'undo redo | formatselect | bold italic backcolor | \
          alignleft aligncenter alignright alignjustify | \
          bullist numlist outdent indent | removeformat | help'
      }"
    />
  </div>
</template>

<script>
  import Editor from '@tinymce/tinymce-vue'

  export default {
    name: 'app',
    components: {
      'editor': Editor
    }
  }
</script>
```
This TinyMCE editor configuration should replicate the example on the [Basic example page](../basic-example/).
6. Provide access to TinyMCE using either Tiny Cloud or by self-hosting TinyMCE.

  - **Tiny Cloud**

Include the `api-key` option in the editor element and include your [Tiny Cloud API key](/auth/signup/).

Such as:

```html
<editor api-key='your-api-key' :init="{ /* your other settings */ }" />
```
  - **TinyMCE Self-hosted**

TinyMCE can be self-hosted by: deploying TinyMCE independent of the Vue.js application, or bundling TinyMCE with the Vue.js application.

    - **Deploy TinyMCE independent of the Vue.js application**

To use an independent deployment of TinyMCE, add a script to either the `<head>` or the end of the `<body>` of the HTML file, such as:

```html
<script src="/path/to/tinymce.min.js"></script>
```
To use an independent deployment of TinyMCE with the create a Vue.js application, add the script to `/path/to/tinymce-vue-demo/public/index.html`.

For information on self-hosting TinyMCE, see: [Installing TinyMCE](../installation/).
    - **Bundling TinyMCE with the Vue.js application using a module loader**

To bundle TinyMCE using a module loader (such as Webpack and Browserify), see: [Usage with module loaders](../usage-with-module-loaders/).
7. Test the application using the Node.js development server.

  - To start the development server, navigate to the `tinymce-vue-demo` directory and run:

```sh
$ npm run serve
```
  - To stop the development server, select on the command line or command prompt and press *Ctrl+C*.

### Deploying the application to a HTTP server.

The application will require further configuration before it can be deployed to a production environment. For information on configuring the application for deployment, see: [Vue.js - Production Deployment](https://vuejs.org/v2/guide/deployment.html).

### Next Steps

- For examples of the TinyMCE integration, see: [the tinymce-vue storybook](https://tinymce.github.io/tinymce-vue/).
- For information on customizing:

  - TinyMCE, see: [Basic setup](../basic-setup/).
  - The Vue.js application, see: [Vue.js Documentation](https://vuejs.org/v2/guide/).

## TinyMCE Vue.js technical reference

**Covered in this section:**

- [Installing the TinyMCE Vue.js integration using NPM](#installingthetinymcevuejsintegrationusingnpm)
- [Using the TinyMCE Vue.js integration](#usingthetinymcevuejsintegration)
- [Configuring the editor](#configuringtheeditor)

  - [`api-key`](#api-key)
  - [`cloud-channel`](#cloud-channel)
  - [`disabled`](#disabled)
  - [`id`](#id)
  - [`init`](#init)
  - [`initial-value`](#initial-value)
  - [`inline`](#inline)
  - [`model-events`](#model-events)
  - [`output-format`](#output-format)
  - [`plugins`](#plugins)
  - [`tag-name`](#tag-name)
  - [`toolbar`](#toolbar)
  - [`tinymce-script-src`](#tinymce-script-src)
- [Form Input Bindings: `v-model`](#forminputbindingsv-model)
- [Event binding](#eventbinding)

### Installing the TinyMCE Vue.js integration using NPM

To install the `tinymce-vue` package and save it to your `package.json`.

- For Vue.js 3.x users:

```sh
$ npm install --save "@tinymce/tinymce-vue@^4"
```
- For Vue.js 2.x users:

```sh
$ npm install --save "@tinymce/tinymce-vue@^3"
```

### Using the TinyMCE Vue.js integration

1. Load the component.

  - For bundle loader users (such as `webpack`, `rollup`, or `browserify`):

```js
// es modules
  import Editor from '@tinymce/tinymce-vue';
  // commonjs require
  // NOTE: default needed after require
  var Editor = require('@tinymce/tinymce-vue').default;
```
  - To load `tinymce-vue` in a HTML file:

```html
<script src="/path/to/tinymce-vue.min.js"></script>
```
2. Add the editor to the `components` property of the app:

```js
// This might look different depending on how you have set up your app
// but the important part is the components property
var app = new Vue({
  el: '#app',
  data: { /* Your data */ },
  components: {
    'editor': Editor // <- Important part
  },
  methods: { /* Your methods */}
})
```
3. Add the `<editor>` tag to the `template`

```html
<editor api-key="API_KEY" :init="{plugins: 'wordcount'}" />
```

### Configuring the editor

The editor accepts the following properties:

```html
<editor
  api-key="your-api-key"
  cloud-channel="5"
  :disabled=false
  id="uuid"
  :init= "{  }"
  initial-value=""
  :inline=true
  model-events= ""
  plugins=""
  tag-name="div"
  toolbar=""
  value=""
/>
```
None of the configuration properties are **required** for `tinymce-vue` to work. Specify a Tiny Cloud API key using `api-key` to remove the `This domain is not registered...` warning message.

#### `api-key`

Tiny Cloud API key. Required for deployments using the Tiny Cloud to provide the TinyMCE editor.

To register for a Tiny Cloud API key, visit the [Tiny Account sign-up page](/auth/signup/). To retrieve the Tiny Cloud API key for an existing Tiny Account, login and visit the [Tiny Account Dashboard](/my-account).

**Default value:** `no-api-key`

**Type:** String

##### Example: Using `api-key`

```html
<editor api-key="your-api-key"></editor>
```

#### `cloud-channel`

**Default value:** `5`

**Possible values:** `5-stable`, `5-testing`, `5-dev`

Changes the TinyMCE build used for the editor to one of the following Tiny Cloud channels:

- `5`, `5-stable` (**Default**): The current enterprise release of TinyMCE.
- `5-testing`: The current release candidate for the next enterprise release of TinyMCE.
- `5-dev`: The nightly-build version of TinyMCE.

Such as:

```html
<editor
  api-key="your-api-key"
  cloud-channel="5-dev"
  :init="{ /* your other settings */ }"
/>
```
For information TinyMCE development channels, see: [Specifying the TinyMCE editor version deployed from Cloud - dev, testing, and stable releases](../editor-plugin-version/#55-testingand5-devreleasechannels).

#### `disabled`

The `disabled` property can dynamically switch the editor between a "disabled" (read-only) mode (`true`) and the standard editable mode (`false`).

**Default value:** `false`

**Possible values:** `true`, `false`

##### Example: Using `disabled`

```html
<editor
  :disabled=true
/>
```

#### `id`

An id for the editor. Used for retrieving the editor instance using the `tinymce.get('ID')` method. Defaults to an automatically generated [UUID](https://tools.ietf.org/html/rfc4122).

**Default value:** Automatically generated [UUID](https://tools.ietf.org/html/rfc4122).

**Type:** String

##### Example: Using `id`

```html
<editor id="uuid"></editor>
```

#### `init`

Object sent to the `tinymce.init` method used to initialize the editor.

For information on the TinyMCE selector (`tinymce.init`), see: [Basic setup](../basic-setup/).

**Default value:** { }

**Type:** Object

##### Example: Using `init`

```html
<editor
  :init="{
    plugins: [
      'lists link image paste help wordcount'
    ],
    toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | help'
  }"
/>
```

#### `initial-value`

Initial content of the editor when the editor is initialized.

**Default value:** `" "`

**Type:** String

##### Example: Using `initial-value`

```html
<editor initial-value="Once upon a time..."></editor>
```

#### `inline`

Used to set the editor to inline mode. Using `<editor :inline=true />` is the same as setting `{inline: true}` in the TinyMCE selector (`tinymce.init`).

For information on inline mode, see: [User interface options - `inline`](../editor-appearance/#inline) and [Setup inline editing mode](../use-tinymce-inline/).

**Default value:** `false`

**Possible values:** `true`, `false`

##### Example: Using `inline`

```html
<editor
  :inline=true
/>
```

#### `model-events`

Sets the trigger events for [v-model events](#forminputbindingsv-model).

For a list of available TinyMCE events, see: [Available Events - Editor events](../events/#editorcoreevents).

**Default value:** `"change keyup undo redo"`.

**Type:** String

##### Example: Using `model-events`

```html
<editor model-events="change keydown blur focus paste"></editor>
```

#### `output-format`

Used to specify the format of the content emitted via the `input` event. This affects the format of the content used in conjunction with data binding.

**Type:** String

**Default value:** `html`

**Possible values:** `html`, `text`

##### Example: Using `output-format`

```html
<editor output-format="text"></editor>
```

#### `plugins`

Used to include plugins for the editor. Using `<editor plugins="lists code" />` is the same as setting `{plugins: 'lists code'}` in the TinyMCE selector (`tinymce.init`).

For information on adding plugins to TinyMCE, see: [Add plugins to TinyMCE](../plugins/).

**Type:** String or Array

##### Example: Using `plugins`

```html
<editor plugins="lists code"></editor>
```

#### `tag-name`

Only valid when [`<editor :inline=true />`](#inline). Used to define the HTML element for the editor in inline mode.

**Default value:** `div`

**Type:** String

##### Example: Using `tag-name`

```html
<editor
  :inline=true
  tag-name="my-custom-tag"
/>
```

#### `toolbar`

Used to set the toolbar for the editor. Using `<editor toolbar="bold italic" />` is the same as setting `{toolbar: 'bold italic'}` in the TinyMCE selector (`tinymce.init`).

For information setting the toolbar for TinyMCE, see: [User interface options - toolbar](../editor-appearance/#toolbar).

**Possible values:** See [Toolbar Buttons Available for TinyMCE](../available-toolbar-buttons/).

**Type:** String

##### Example: Using `toolbar`

```html
<editor plugins="code" toolbar="bold italic underline code"></editor>
```

#### `tinymce-script-src`

Use the `tinymce-script-src` prop to specify an external version of TinyMCE to lazy load.

**Type:** String

##### Example: Using `tinymce-script-src`

```html
<editor tinymce-script-src="/path/to/tinymce.min.js"></editor>
```

### Form Input Bindings: `v-model`

The `v-model` directive can be used to create a two-way data binding. For example:

```html
<editor v-model="content"></editor>
```
For information on `v-model` and form input bindings, see: [Vue.js documentation - Form Input Bindings](https://vuejs.org/v2/guide/forms.html).

### Event binding

Functions can be bound to editor events, such as:

```html
<editor @selectionChange="handlerFunction" />
```
When the handler is called (**handlerFunction** in this example), it is called with two arguments:

- `event` - The TinyMCE event object.
- `editor` - A reference to the editor.

The following events are available:

- `activate`
- `addUndo`
- `beforeAddUndo`
- `beforeExecCommand`
- `beforeGetContent`
- `beforeRenderUI`
- `beforeSetContent`
- `beforePaste`
- `blur`
- `change`
- `clearUndos`
- `click`
- `contextMenu`
- `copy`
- `cut`
- `dblclick`
- `deactivate`
- `dirty`
- `drag`
- `dragDrop`
- `dragEnd`
- `dragGesture`
- `dragOver`
- `drop`
- `execCommand`
- `focus`
- `focusIn`
- `focusOut`
- `getContent`
- `hide`
- `init`
- `keyDown`
- `keyPress`
- `keyUp`
- `loadContent`
- `mouseDown`
- `mouseEnter`
- `mouseLeave`
- `mouseMove`
- `mouseOut`
- `mouseOver`
- `mouseUp`
- `nodeChange`
- `objectResizeStart`
- `objectResized`
- `objectSelected`
- `paste`
- `postProcess`
- `postRender`
- `preProcess`
- `progressState`
- `redo`
- `remove`
- `reset`
- `saveContent`
- `selectionChange`
- `setAttrib`
- `setContent`
- `show`
- `submit`
- `undo`
- `visualAid`