Using TinyMCE from the Tiny Cloud CDN with the Vue.js framework

The Official TinyMCE Vue.js component integrates TinyMCE into Vue.js projects, providing a powerful WYSIWYG editor within the Vue ecosystem. This procedure creates a basic Vue.js application 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.

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:

Clone the tinymce/tinymce-vue GitHub repository. For example:
```
git clone https://github.com/tinymce/tinymce-vue.git
```
Install the required packages using yarn. For example:
```
yarn install
```
To start the demo server, run:
```
yarn demo
```

The tinymce-vue demo is now running. Visit: http://localhost:3001.

Prerequisites

This procedure requires:

Node.js LTS (recommended).
Vue CLI (optional).

Procedure

Create a new Vue project named tinymce-vue-demo using the Create Vue Tool.
- From a command line or command prompt create a Vue.js 3.x project: tinymce-vue-demo.
  npm create vue@3
- If a Vue.js 2.x project is required, instead use:
  npm create vue@2
  As per the Vue FAQ, Vue 2 will reach End of Life by the end of 2023.
- Follow the prompts and type tinymce-vue-demo as the project name.
Change into the newly created directory.
```
cd tinymce-vue-demo
```
Install the tinymce-vue package.
- For Vue.js 3.x users:
  npm install "@tinymce/tinymce-vue"
- For Vue.js 2.x users:
  npm install "@tinymce/tinymce-vue@^3"

Using a text editor, open /path/to/tinymce-vue-demo/src/App.vue.

Add a TinyMCE configuration to the <template> using the <editor> tag.

Add import Editor from '@tinymce/tinymce-vue' to the start of the <script>.

For example:

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

Include the api-key option in the editor element and include your Tiny Cloud API key. Such as:
```
<editor api-key='no-api-key' :init="{ /* your other settings */ }" />
```
Test the application using the Node.js development server.
- To start the development server, navigate to the tinymce-vue-demo directory and run:
  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.

Next Steps

For examples of the TinyMCE integration, see: the tinymce-vue storybook.
For information on customizing:
- TinyMCE integration, see: Vue.js framework Technical Reference.
- TinyMCE, see: Basic setup.
- The Vue.js application, see: Vue.js Documentation.