Syncfusion AI Assistant

How can I help you?

Getting Started with Vue DOCX Editor (Vue 3)

27 May 20264 minutes to read

This article provides a step-by-step guide for setting up a Vite project with integrating the Syncfusion® Vue DOCX Editor (Document Editor) component using the Composition API or Options API.

Steps to create a DOCX Editor in Vue 3

Prerequisites

System requirements for Syncfusion® Vue UI components

Create a Vue application

To create a new Vue application, run the following command.

npm create vite@latest documenteditor-app -- --template vue

Next, you will be prompted with “Install with npm and start now?”. Select Yes. Move into the created project using the following command:

cd documenteditor-app

Install the Document Editor packages

The Document 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

Add CSS reference

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

<style>
@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';
</style>

NOTE

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

Add Document Editor component

Import and register the Document Editor component in the <script> section of src/App.vue. If you use the Composition API, add the setup attribute to the <script> tag. Then, define the component in the <template> section.

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

<script setup>
  import { provide } from 'vue';
  import { DocumentEditorContainerComponent as EjsDocumenteditorcontainer, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
  
  // Use the following service URL only for demo purposes
  const serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';

  provide('DocumentEditorContainer', [Toolbar]);
</script>
<template>
  <ejs-documenteditorcontainer 
    height="590px"
    :serviceUrl="serviceUrl" 
    :enableToolbar="true"> 
  </ejs-documenteditorcontainer>
</template>

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

  export default {
    name: 'App',
    components: {
       'ejs-documenteditorcontainer' : DocumentEditorContainerComponent
    },
    data () {
      return {
        // Use the following service URL only for demo purposes
        serviceUrl:'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'
      };
    },
    provide: {
      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 dev

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

Output of Vue 3 Document Editor

NOTE

View Sample in GitHub.

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.

See also