Skip to content

getting-started-vue-3.md

Latest commit

 

History

History
206 lines (148 loc) · 6.58 KB

getting-started-vue-3.md

File metadata and controls

206 lines (148 loc) · 6.58 KB
layout post
title Getting Started with Vue 3 DOCX Editor | Syncfusion
description Learn how to create a DOCX Editor in a Vue 3 application using the Syncfusion® Document Editor control to create, edit, and view Word documents.
control Getting started vue 3
platform document-processing
documentation ug
domainurl

Getting Started with Vue DOCX Editor (Vue 3)

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

Use Vite to quickly scaffold a Vue 3 project. Run one of the following commands to create a new project:

npm create vite@latest

or

yarn create vite

After running the command, follow the interactive prompts shown below to configure the project:

Step 1: Define the project name: Specify the project name directly. This guide uses documenteditor-app.

? Project name: » documenteditor-app

Step 2: Select Vue as the framework to target Vue 3.

? Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
> Vue
  React
  Preact
  Lit
  Svelte
  Others

Step 3: Choose JavaScript as the variant to build the Vite project with JavaScript and Vue.

? Select a variant: » - Use arrow-keys. Return to submit.
> JavaScript
  TypeScript
  Customize with create-vue ↗
  Nuxt ↗

Step 4: After the scaffold completes, install the project dependencies:

cd documenteditor-app
npm install

or

cd documenteditor-app
yarn install

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 definitions to the src/style.css file.

{% tabs %} {% highlight html tabtitle="~/src/style.css" %}

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

{% endhighlight %} {% endtabs %}

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

{% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %}

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

{% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %}

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

{% endhighlight %} {% endtabs %}

N> 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

N> 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

N> 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