Getting Started with Vue DOCX Editor (Vue 2)

21 Jul 20264 minutes to read

Vue DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a Vue application.

Prerequisites

Create a Vue application

Use Vue CLI to set up a Vue application, as it provides a modular project architecture, flexible configuration, and an integrated plugin system.

Install Vue CLI globally using the following command:

npm install -g @vue/cli

Create a new Vue application using the following command:

vue create quickstart

When creating a new project, you will be prompted to choose a project type. Select the option Default ([Vue 2] babel, eslint).

Move into the created project using the following command:

cd quickstart

Install the DOCX Editor packages

The DOCX Editor package is available in the public npm registry and can be installed directly from npmjs.com.

To install the DOCX Editor component, use the following command:

npm install @syncfusion/ej2-vue-documenteditor --save

Register a Syncfusion License Key

Before initializing the Vue DOCX Editor control, generate a Syncfusion license key and register it in your application.

Import the required CSS styles

Add the following DOCX Editor and dependent component style references to the <style> section of src/App.vue file.

@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-vue-documenteditor/styles/tailwind3.css';

NOTE

Refer to themes topic to know more about built-in themes and different ways to refer to themes in a Vue project.

Initialize the DOCX Editor

Modify the src/App.vue file to render the DOCX Editor. Add the DOCX Editor component in the <template> section using the <ejs-documenteditorcontainer> selector and configure it in the <script> section.

<template>
  <div id="app">
    <ejs-documenteditorcontainer
      height="590px"
      :serviceUrl="serviceUrl"
      :enableToolbar="true">
    </ejs-documenteditorcontainer>
  </div>
</template>

<script>
import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';

export default {
  name: "App",

  components: {
    "ejs-documenteditorcontainer": DocumentEditorContainerComponent
  },

  data() {
    // Use the following service URL only for demo purposes
    return {
      serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'
    };
  },

  provide: {
    // Inject required modules.
    DocumentEditorContainer: [Toolbar]
  }
};
</script>

NOTE

The hosted Web API URL is for demo and evaluation purposes only. For production, host your own web service using the GitHub Web Service example or the Docker image.

Run the application

Run the application using the following command:

npm run serve

After the application starts, open the localhost URL shown in the terminal. The DOCX Editor is rendered in the browser with a toolbar and an editable document area, as shown below.

Output of Vue DOCX Editor

NOTE

View Sample in GitHub.

Online Demo

Explore how to create, edit, and print Word documents using the Vue DOCX Editor in this live demo here.

Video tutorial

To get started quickly with the DOCX Editor component using CLI, you can check the video below.

Server-side dependencies

The DOCX Editor component requires server-side interactions for the following operations:

  • Open file formats other than SFDT
  • Paste with formatting
  • Restrict editing
  • Spell check
  • Save as file formats other than SFDT and DOCX

NOTE

If you do not require the above functionalities, you can deploy the component as a pure client-side solution without any server-side interaction.

For detailed information about server-side dependencies, refer to the Web Services Overview page.

NOTE

Looking for the full Vue DOCX Editor component overview, features, pricing, and documentation? Visit the Vue DOCX Editor page.

See also