---
title: "Bundling TinyMCE in Vue.js"
description: "A guide on bundling TinyMCE with a Vue.js application using a module loader."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/vue-pm-bundle/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/vue-pm-bundle/index.md"
version: "latest"
last_updated: "2026-01-19T04:37:32Z"
tokens: 1030
---
# Bundling TinyMCE in Vue.js

This guide shows how to bundle TinyMCE 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 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. Navigate into the newly created directory.

```sh
cd tinymce-vue-demo
```
3. Install the `tinymce` and `tinymce-vue` packages.

  - For Vue.js 3.x users:

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

```sh
npm install tinymce "@tinymce/tinymce-vue@^3"
```
4. Create `src/editor.js` and set the contents to:

```js
// Add the @tinymce/tinymce-vue wrapper to the bundle
import Editor from '@tinymce/tinymce-vue';

// Ensure TinyMCE is imported to register the global variable required by other components
import 'tinymce/tinymce';
// DOM model
import 'tinymce/models/dom/model';
// Theme
import 'tinymce/themes/silver';
// Toolbar icons
import 'tinymce/icons/default';
// Editor styles
import 'tinymce/skins/ui/oxide/skin.min.css';

// Import plugins
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/autolink';
import 'tinymce/plugins/link';
import 'tinymce/plugins/image';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/table';
import 'tinymce/plugins/code';
import 'tinymce/plugins/help';
// Include resources that a plugin lazy-loads at the run-time
import 'tinymce/plugins/help/js/i18n/keynav/en.js';
import 'tinymce/plugins/wordcount';

// Content styles, including inline UI like fake cursors
import 'tinymce/skins/content/default/content.js';
import 'tinymce/skins/ui/oxide/content.js';

// Export Editor component for use in Vue components
export default Editor;
```
5. Update `src/App.vue` to import and configure `Editor`.

```jsx
<template>
  <div>
    <h1>TinyMCE Vue Demo</h1>
    <Editor
      v-model="content"
      :init="editorConfig"
      licenseKey="gpl"
    />
  </div>
</template>

<script>
import Editor from './editor.js';

export default {
  name: 'App',
  components: {
    Editor
  },
  data() {
    return {
      content: '<p>This is the initial content of the editor.</p>',
      editorConfig: {
        height: 500,
        plugins: 'advlist autolink lists link image table code help wordcount',
        toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright | bullist numlist | help'
      }
    };
  }
};
</script>
```
6. To start the development server, run:

```sh
npm run dev
```

## Other resources

- For reporting issues, go to: [TinyMCE Vue.js issues](https://github.com/tinymce/tinymce-vue/issues).
- For more examples of `tinymce-vue` wrapper, see: [the tinymce-vue storybook](https://tinymce.github.io/tinymce-vue/).
- For information on bundling, see: [Introduction to bundling TinyMCE](../introduction-to-bundling-tinymce/)
- 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: [the Vue.js documentation](https://vuejs.org/).