---
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/6/vue-cloud/index.md"
version: "6"
last_updated: "2022-11-10T23:30:16Z"
tokens: 1148
---
Important This page documents TinyMCE 6. 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. 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.

## TinyMCE Vue.js integration live examples

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](http://localhost:3001/).

## Prerequisites

This procedure requires [Node.js (and npm)](https://nodejs.org/).

## 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 you need to create a Vue.js 2.x projects instead:

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

  1. Change into the newly created directory.

```sh
cd tinymce-vue-demo
```
  2. 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@^5"
```
- For Vue.js 2.x users:

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

  1. 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
      api-key="no-api-key"
      :init="{
        plugins: 'lists link image table code help wordcount'
      }"
    />
  </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>
```
  2. 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 */ }" />
```
  3. 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/).