---
title: "Lazy-loading TinyMCE from a .zip package in Vue.js"
description: "A guide on integrating a .zip version of TinyMCE into the Vue.js framework."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/vue-zip/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/vue-zip/index.md"
version: "latest"
last_updated: "2026-01-19T04:37:32Z"
tokens: 812
---
# Lazy-loading TinyMCE from a .zip package in Vue.js

This guide shows how to self-host and lazy-load TinyMCE from a .zip package 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-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. Unzip the content of the `tinymce/js` folder from the [TinyMCE zip](/my-account/downloads/) into the `public` folder.
5. Update `App.vue` with the below code snippet. **Note**: `tinymceSrcScript` references to the public `tinymce` using absolute root path.

```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"
      tinymceScriptSrc="/tinymce/tinymce.min.js"
      :init="{
        plugins: 'advlist anchor autolink code help image insertdatetime link lists media table 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>
```
6. 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/).