vue-quick-start.adoc

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

partial$integrations/bundling-integrations-not-recommended-message.adoc

TinyMCE Vue.js integration live examples

For examples of the {productname} Vue.js 3.x integration:

1. Clone the tinymce/tinymce-vue GitHub repository. For example:

   git clone https://github.com/tinymce/tinymce-vue.git

2. Install the required packages using yarn. For example:

   yarn install

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

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

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

2. Change into the newly created directory.

   cd tinymce-vue-demo

3. 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"

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

   1. Add a {productname} configuration to the <template> using the <editor> tag.

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

5. 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 {productname} integration, see: the tinymce-vue storybook.

• For information on customizing:

  • {productname} integration, see: Vue.js framework Technical Reference.

  • {productname}, see: Basic setup.

  • The Vue.js application, see: Vue.js Documentation.