---
title: "Lazy-loading TinyMCE in Vue.js"
description: "A guide on lazy-loading the TinyMCE into a Vue.js application."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/vue-pm/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/vue-pm/index.md"
version: "latest"
last_updated: "2026-01-19T04:37:32Z"
tokens: 1066
---
# Lazy-loading TinyMCE in Vue.js

This guide shows how to self-host and lazy-load TinyMCE in 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` 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. Update `App.vue` with the below code snippet. **Note**: `tinymceSrcScript` references to the public `tinymce` using absolute root path.

.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>"
      licenseKey="gpl"
      // Load tinymce at run-time
      tinymce-script-src="/tinymce/tinymce.min.js"
      :init="{
        plugins: 'anchor lists advlist autolink charmap code media help',
        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. Setup a `postinstall` script to copy TinyMCE to `public` directory after each packages installation, which makes TinyMCE available to the application as static assets.

  1. Install a library to help with copying assets.

```bash
npm install -D fs-extra
```
  2. Add the following snipper to `postinstall.js` file.

```js
import fse from 'fs-extra';
import path from 'path';

const topDir = import.meta.dirname;
fse.emptyDirSync(path.join(topDir, 'public', 'tinymce'));
fse.copySync(path.join(topDir, 'node_modules', 'tinymce'), path.join(topDir, 'public', 'tinymce'), { overwrite: true });
```
  3. Update `postinstall` target in `package.json` to run the `postinstall.js` script.

```json
// ... other content omitted for brevity ...
"scripts": {
  "postinstall": "node ./postinstall.js"
}
```
6. Exclude `public/tinymce` from Git tracking.

```.gitignore
# ... other rules omitted for brevity ...
/public/tinymce/
```
7. In this instance, run the `postinstall` to copy TinyMCE to the `public` directory.

```sh
npm run postinstall
```
8. 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/).