Getting Started with Vue DOCX Editor in Vue 2

28 Apr 20264 minutes to read

Syncfusion® 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.

Steps to create a Vue DOCX Editor

Prerequisites

System requirements for Syncfusion^® Vue UI components

Setting up the Vue 2 project

To generate a Vue 2 project using Vue-CLI, use the vue create command. Follow these steps to install Vue CLI and create a new project:
Using npm (global Vue CLI):

npm install -g @vue/cli
vue create quickstart
cd quickstart
npm run serve

Or using Yarn (global Vue CLI):

yarn global add @vue/cli
vue create quickstart
cd quickstart
yarn run serve

When creating a new project, choose the option Vue 2 from the menu.

Once the quickstart project is set up with default settings, proceed to add Syncfusion^® components to the project.

Install the Syncfusion^® Document Editor packages

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

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

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

or

yarn add @syncfusion/ej2-vue-documenteditor

Add CSS reference

You can import themes for the Syncfusion^® Vue component in various ways, such as using CSS or SASS styles from npm packages, CDN, CRG and Theme Studio. Refer to themes topic to know more about built-in themes and different ways to refer to themes in a Vue project.

In this article, the Material theme is applied using CSS styles, which are available in installed packages. The necessary Material CSS styles for the Document Editor component and its dependents were imported into the <style> section of src/App.vue file.

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

Add the Syncfusion^® Document Editor component

Modify the template in the src/App.vue file to render the Document Editor component. Add the Vue Document Editor by using the <ejs-documenteditorcontainer> selector in <template> section of the App.vue file.

<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 require modules.
    DocumentEditorContainer: [Toolbar]
  }
}
</script>

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

The Document Editor is displayed as shown below.

app.vue

<template>
  <div id="app">
    <ejs-documenteditorcontainer ref='documenteditor' :serviceUrl='serviceUrl' height="590px" id='container'
      :enableToolbar='true'></ejs-documenteditorcontainer>
  </div>
</template>
<script>
import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';

export default {
  name: "App",
  components: {
    "ejs-documenteditorcontainer": DocumentEditorContainerComponent
  },
  data() {
    return { serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/' };
  },
  provide: {
    //Inject require modules.
    DocumentEditorContainer: [Toolbar]
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
</style>

Video tutorial

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

Server side dependencies

The Document 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 don’t require the above functionalities, you can deploy the component as a pure client-side solution without any server-side interactions.

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