---
title: "Using TinyMCE from Tiny Cloud in Vue.js"
description: "A guide on integrating TinyMCE from the Tiny Cloud into a Vue.js application."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/vue-cloud/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/vue-cloud/index.md"
version: "latest"
last_updated: "2026-05-07T05:55:46Z"
tokens: 777
---
# Using TinyMCE from Tiny Cloud in Vue.js

This guide shows how to integrate TinyMCE from Tiny Cloud into a Vue.js application using the [TinyMCE Vue.js component](https://github.com/tinymce/tinymce-vue).

## Prerequisites

This procedure requires:

- [Node.js LTS](https://nodejs.org/en/download/) (recommended).
- [Vue CLI](https://cli.vuejs.org/) (optional).

## Procedure

1. Create a new Vue project named `tinymce-vue-demo` using the [Create Vue](https://github.com/vuejs/create-vue) tool.

  - From a command line or command prompt, create a Vue.js 3.x project: `tinymce-vue-demo`.

```sh
npm create vue@3
```
  - If a Vue.js 2.x project is required, instead use:

```sh
npm create vue@2
```
  - Follow the prompts and type `tinymce-vue-demo` as the project name.
2. Change into the newly created directory.

```sh
cd tinymce-vue-demo
```
3. Install the `tinymce-vue` package.

  - For Vue.js 3.x users:

```sh
npm install @tinymce/tinymce-vue
```
  - For Vue.js 2.x users:

```sh
npm install @tinymce/tinymce-vue@^3
```
4. Update `App.vue` to include `Editor` from `tinymce/tinymce-vue` as below:

.For example:

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

<template>
  <main id="sample">
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
    <Editor
      id="<uid>"
      apiKey="no-api-key"
      :init="{
        plugins: 'advlist anchor autolink charmap code fullscreen help image insertdatetime link lists media preview searchreplace table visualblocks wordcount',
        toolbar: 'undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
        height: 500,
      }"
    />
  </main>
</template>

<style scoped>
.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  #sample {
    display: flex;
    flex-direction: column;
    place-items: center;
    width: 1000px;
  }
}
</style>
```
5. Update the `apiKey` prop with your [Tiny Cloud API key](/auth/signup/).
6. To start the development server, run:

```sh
npm run dev
```

## Other resources

- For examples of `tinymce-vue` wrapper, see: [the tinymce-vue storybook](https://tinymce.github.io/tinymce-vue/).
- To report an issue, please go to: [TinyMCE Vue.js issues](https://github.com/tinymce/tinymce-vue/issues).
- For guides on integrating TinyMCE premium plugins, see: [Using premium plugins](../bundling-plugins/#using-premium-plugins).
- For information on customizing:

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