---
title: "Using TinyMCE from the Tiny Cloud CDN with the Vue.js framework"
description: "A guide on integrating TinyMCE from the Tiny Cloud into the Vue.js framework."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/vue-cloud/"
md_url: "https://www.tiny.cloud/docs/tinymce/7/vue-cloud/index.md"
version: "7"
last_updated: "2025-06-09T23:29:42Z"
tokens: 1270
---
Important This page documents TinyMCE 7. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/vue-cloud/).
# Using TinyMCE from the Tiny Cloud CDN with the Vue.js framework

The [Official TinyMCE Vue.js component](https://github.com/tinymce/tinymce-vue) integrates TinyMCE into Vue.js projects, providing a powerful WYSIWYG editor within the Vue ecosystem. This procedure creates a [basic Vue.js application](https://cli.vuejs.org/guide/creating-a-project.html#vue-create) containing a TinyMCE editor.

Version 4 and later 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.

> **Important:** Tiny does not recommend bundling `tinymce` and `tinymce-vue` with a module loader. Bundling these packages can be complex and error prone.

## TinyMCE Vue.js integration live examples

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

1. Clone the `tinymce/tinymce-vue` [GitHub repository](https://github.com/tinymce/tinymce-vue). 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](http://localhost:3001/).

## 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 Tool](https://github.com/vuejs/create-vue).

  - 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
```

> **Note:** As per the [Vue FAQ](https://vuejs.org/about/faq.html#what-s-the-difference-between-vue-2-and-vue-3), *Vue 2 will reach End of Life by the end of 2023*.
  - 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. 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>`.

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="uuid"
      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. Include the `api-key` option in the editor element and include your [Tiny Cloud API key](/auth/signup/). Such as:

```html
<editor api-key='no-api-key' :init="{ /* your other settings */ }" />
```
6. 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 dev
```
  - 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 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/).