From ea9d09c1585cca485807a3195ad15dea08d00120 Mon Sep 17 00:00:00 2001
From: Build Automaion <buildautomation@syncfusion.com>
Date: Tue, 16 Jul 2024 00:09:27 +0530
Subject: [PATCH] Integrated latest changes at 07-15-2024 11:28:55 PM

---
 ej2-vue-toc.html                              |  10 +-
 ej2-vue/Release-notes/26.1.42.md              |  16 ++
 .../dialog-cs5/app-composition.vue            |  21 ++-
 .../document-editor/dialog-cs5/app.vue        |  45 +++--
 .../export-container-cs1/app.vue              |  91 ++++++----
 .../export-container-cs2/app.vue              |  91 ++++++----
 .../export-container-cs3/app.vue              |  91 ++++++----
 .../export-container-cs4/app.vue              |  91 ++++++----
 .../link-cs1/app-composition.vue              |   6 +-
 .../document-editor/link-cs1/app.vue          |   6 +-
 .../link-cs3/app-composition.vue              |  16 +-
 .../document-editor/link-cs3/app.vue          |  46 +++--
 .../ruler-cs1/app-composition.vue             |   4 +-
 .../document-editor/ruler-cs1/app.vue         |   4 +-
 .../ruler-cs2/app-composition.vue             |   2 +-
 .../document-editor/ruler-cs2/app.vue         |   2 +-
 .../scrolling-zooming-cs2/app-composition.vue |   6 +-
 .../scrolling-zooming-cs2/app.vue             |   6 +-
 .../scrolling-zooming-cs3/app-composition.vue |   8 +-
 .../scrolling-zooming-cs3/app.vue             |  74 ++++----
 .../default-cs7/app-composition.vue           |  12 +-
 .../faq/unsupported-file-format.md            |  29 +++
 ej2-vue/document-editor/getting-started.md    |   3 +-
 .../how-to/add-save-button-in-toolbar.md      | 103 +++++++++++
 .../how-to/auto-save-document.md              | 170 ++++++++++++++++++
 .../how-to/customize-tool-bar.md              |   8 +-
 .../document-editor/images/vue2-terminal.png  | Bin 0 -> 9489 bytes
 ej2-vue/pivotview/getting-started.md          |   2 +-
 ej2-vue/spreadsheet/docker-deployment.md      | 154 ++++++++++++++++
 ej2-vue/spreadsheet/open-save.md              |   5 +-
 30 files changed, 883 insertions(+), 239 deletions(-)
 create mode 100644 ej2-vue/Release-notes/26.1.42.md
 create mode 100644 ej2-vue/document-editor/faq/unsupported-file-format.md
 create mode 100644 ej2-vue/document-editor/how-to/add-save-button-in-toolbar.md
 create mode 100644 ej2-vue/document-editor/how-to/auto-save-document.md
 create mode 100644 ej2-vue/document-editor/images/vue2-terminal.png
 create mode 100644 ej2-vue/spreadsheet/docker-deployment.md

diff --git a/ej2-vue-toc.html b/ej2-vue-toc.html
index faf88c2eb..946e1992f 100644
--- a/ej2-vue-toc.html
+++ b/ej2-vue-toc.html
@@ -905,6 +905,7 @@
 <li><a href="/ej2-vue/document-editor/view">View</a></li>
 <li>How To
 <ul>
+<li><a href="/ej2-vue/document-editor/how-to/add-save-button-in-toolbar">Add save button in toolbar</a></li>
 <li><a href="/ej2-vue/document-editor/how-to/override-the-keyboard-shortcuts">Override keyboard shortcuts</a></li>
 <li><a href="/ej2-vue/document-editor/how-to/customize-context-menu">Customize context menu</a></li>
 <li><a href="/ej2-vue/document-editor/how-to/customize-tool-bar">Customize toolbar</a></li>
@@ -920,6 +921,7 @@
 <li><a href="/ej2-vue/document-editor/how-to/resize-document-editor">Resize document editor</a></li>
 <li><a href="/ej2-vue/document-editor/how-to/export-document-as-pdf">Export the document as Pdf</a></li>
 <li><a href="/ej2-vue/document-editor/how-to/customize-font-family-drop-down">Customize the font family drop down</a></li>
+<li><a href="/ej2-vue/document-editor/how-to/auto-save-document">Auto save the document in Server</a></li>
 <li><a href="/ej2-vue/document-editor/how-to/auto-save-document-in-document-editor">Auto save the document in AWS S3</a></li>
 <li><a href="/ej2-vue/document-editor/how-to/retrieve-the-bookmark-content-as-text">Retrieve the Bookmark and Whole document content</a></li>
 <li><a href="/ej2-vue/document-editor/how-to/get-current-word">Select and Get the Current Word and Paragraph</a></li>
@@ -938,6 +940,11 @@
 <li><a href="/ej2-vue/document-editor/how-to/customize-color-picker">Customize color picker</a></li>
 </ul>
 </li>
+<li>FAQ
+<ul>
+<li><a href="/ej2-vue/document-editor/faq/unsupported-file-format">Unsupported Warning Message When Opening a Document</a></li>
+</ul>
+</li>
 <li><a href="https://ej2.syncfusion.com/vue/documentation/api/document-editor/">API Reference</a></li>
 </ul>
 </li>
@@ -2398,6 +2405,7 @@
 <li><a href="/ej2-vue/spreadsheet/vue-3-getting-started">Getting Started with Vue 3</a></li>
 <li><a href="/ej2-vue/spreadsheet/data-binding">Data Binding</a></li>
 <li><a href="/ej2-vue/spreadsheet/open-save">Open and Save</a></li>
+<li><a href="/ej2-vue/spreadsheet/docker-deployment">Docker Deployment</a></li>
 <li><a href="/ej2-vue/spreadsheet/worksheet">Worksheet</a></li>
 <li><a href="/ej2-vue/spreadsheet/cell-range">Cell Range</a></li>
 <li><a href="/ej2-vue/spreadsheet/editing">Editing</a></li>
@@ -2939,7 +2947,7 @@
 </ul>
 </li> <li>Release Notes
                 <ul>
-				<li>2024 Volume 2 - 26.*<ul><li>Weekly Release<ul><li><a href="/ej2-vue/release-notes/26.1.41">26.1.41</a></li><li><a href="/ej2-vue/release-notes/26.1.40">26.1.40</a></li><li><a href="/ej2-vue/release-notes/26.1.39">26.1.39</a></li><li><a href="/ej2-vue/release-notes/26.1.38">26.1.38</a></li></ul></li><li><a href="/ej2-vue/release-notes/26.1.35">26.1.35 Main Release</a></li></ul></li><li>2024 Volume 1 - 25.*<ul><li>Weekly Release<ul><li><a href="/ej2-vue/release-notes/25.2.7">25.2.7</a></li><li><a href="/ej2-vue/release-notes/25.2.6">25.2.6</a></li><li><a href="/ej2-vue/release-notes/25.2.5">25.2.5</a></li><li><a href="/ej2-vue/release-notes/25.2.4">25.2.4</a></li><li><a href="/ej2-vue/release-notes/25.1.42">25.1.42</a></li><li><a href="/ej2-vue/release-notes/25.1.41">25.1.41</a></li><li><a href="/ej2-vue/release-notes/25.1.40">25.1.40</a></li><li><a href="/ej2-vue/release-notes/25.1.39">25.1.39</a></li><li><a href="/ej2-vue/release-notes/25.1.38">25.1.38</a></li><li><a href="/ej2-vue/release-notes/25.1.37">25.1.37</a></li></ul></li><li><a href="/ej2-vue/release-notes/25.2.3">25.2.3 Service Pack Release</a></li><li><a href="/ej2-vue/release-notes/25.1.35">25.1.35 Main Release</a></li></ul></li>
+				<li>2024 Volume 2 - 26.*<ul><li>Weekly Release<ul><li><a href="/ej2-vue/release-notes/26.1.42">26.1.42</a></li><li><a href="/ej2-vue/release-notes/26.1.41">26.1.41</a></li><li><a href="/ej2-vue/release-notes/26.1.40">26.1.40</a></li><li><a href="/ej2-vue/release-notes/26.1.39">26.1.39</a></li><li><a href="/ej2-vue/release-notes/26.1.38">26.1.38</a></li></ul></li><li><a href="/ej2-vue/release-notes/26.1.35">26.1.35 Main Release</a></li></ul></li><li>2024 Volume 1 - 25.*<ul><li>Weekly Release<ul><li><a href="/ej2-vue/release-notes/25.2.7">25.2.7</a></li><li><a href="/ej2-vue/release-notes/25.2.6">25.2.6</a></li><li><a href="/ej2-vue/release-notes/25.2.5">25.2.5</a></li><li><a href="/ej2-vue/release-notes/25.2.4">25.2.4</a></li><li><a href="/ej2-vue/release-notes/25.1.42">25.1.42</a></li><li><a href="/ej2-vue/release-notes/25.1.41">25.1.41</a></li><li><a href="/ej2-vue/release-notes/25.1.40">25.1.40</a></li><li><a href="/ej2-vue/release-notes/25.1.39">25.1.39</a></li><li><a href="/ej2-vue/release-notes/25.1.38">25.1.38</a></li><li><a href="/ej2-vue/release-notes/25.1.37">25.1.37</a></li></ul></li><li><a href="/ej2-vue/release-notes/25.2.3">25.2.3 Service Pack Release</a></li><li><a href="/ej2-vue/release-notes/25.1.35">25.1.35 Main Release</a></li></ul></li>
 				<li>2023 Volume 4 - 24.*<ul><li>Weekly Release<ul><li><a href="/ej2-vue/release-notes/24.2.9">24.2.9</a></li><li><a href="/ej2-vue/release-notes/24.2.8">24.2.8</a></li><li><a href="/ej2-vue/release-notes/24.2.7">24.2.7</a></li><li><a href="/ej2-vue/release-notes/24.2.6">24.2.6</a></li><li><a href="/ej2-vue/release-notes/24.2.5">24.2.5</a></li><li><a href="/ej2-vue/release-notes/24.2.4">24.2.4</a></li><li><a href="/ej2-vue/release-notes/24.1.47">24.1.47</a></li><li><a href="/ej2-vue/release-notes/24.1.46">24.1.46</a></li><li><a href="/ej2-vue/release-notes/24.1.45">24.1.45</a></li><li><a href="/ej2-vue/release-notes/24.1.44">24.1.44</a></li><li><a href="/ej2-vue/release-notes/24.1.43">24.1.43</a></li></ul></li><li><a href="/ej2-vue/release-notes/24.2.3">24.2.3 Service Pack Release</a></li><li><a href="/ej2-vue/release-notes/24.1.41">24.1.41 Main Release</a></li></ul></li>
 				<li>2023 Volume 3 - 23.*<ul><li> Weekly Release<ul><li><a href="/ej2-vue/release-notes/23.2.7">23.2.7</a></li><li><a href="/ej2-vue/release-notes/23.2.6">23.2.6</a></li><li><a href="/ej2-vue/release-notes/23.2.5">23.2.5</a></li><li><a href="/ej2-vue/release-notes/23.1.44">23.1.44</a></li><li><a href="/ej2-vue/release-notes/23.1.43">23.1.43</a></li><li><a href="/ej2-vue/release-notes/23.1.42">23.1.42</a></li><li><a href="/ej2-vue/release-notes/23.1.41">23.1.41</a></li><li><a href="/ej2-vue/release-notes/23.1.40">23.1.40</a></li><li><a href="/ej2-vue/release-notes/23.1.39">23.1.39</a></li><li><a href="/ej2-vue/release-notes/23.1.38">23.1.38</a></li></ul></li><li><a href="/ej2-vue/release-notes/23.2.4">23.2.4 Service Pack Release</a></li><li><a href="/ej2-vue/release-notes/23.1.36">23.1.36 Main Release</a></li></ul></li>
 				<li>2023 Volume 2 - 22.*
diff --git a/ej2-vue/Release-notes/26.1.42.md b/ej2-vue/Release-notes/26.1.42.md
new file mode 100644
index 000000000..bca118736
--- /dev/null
+++ b/ej2-vue/Release-notes/26.1.42.md
@@ -0,0 +1,16 @@
+---
+title: Essential Studio for Vue Weekly Release Release Notes  
+description: Essential Studio for Vue Weekly Release Release Notes  
+platform: ej2-vue
+documentation: ug
+---
+
+# Essential Studio for Vue  Release Notes  
+
+{% include release-info.html date="July 16, 2024"  version="v26.1.42" %}
+
+{% directory path: _includes/release-notes/v26.1.42 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/document-editor/dialog-cs5/app-composition.vue b/ej2-vue/code-snippet/document-editor/dialog-cs5/app-composition.vue
index 6e4a87145..4d83cf109 100644
--- a/ej2-vue/code-snippet/document-editor/dialog-cs5/app-composition.vue
+++ b/ej2-vue/code-snippet/document-editor/dialog-cs5/app-composition.vue
@@ -3,7 +3,7 @@
         <div>
             <button v-on:click='showHyperlinkDialog'>Open dialog</button>
         </div>
-        <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
+        <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true' v-bind:requestNavigate="onRequestNavigate"
             :enableHyperlinkDialog='true' :enableSfdtExport='true' height="370px"
             style="width: 100%;"></ejs-documenteditor>
     </div>
@@ -19,7 +19,26 @@ const showHyperlinkDialog = function () {
     //Opens hyperlink dialog.
     documenteditor.value.showDialog('Hyperlink');
 }
+const onRequestNavigate= function (args) {
+    if (args.linkType !== 'Bookmark') {
+        let link = args.navigationLink;
+        if (args.localReference.length > 0) {
+            link += '#' + args.localReference;
+        }
+        window.open(link);
+        args.isHandled = true;
+    }
+}
 </script>
 <style>
 @import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+@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-vue-documenteditor/styles/material.css";
 </style>
diff --git a/ej2-vue/code-snippet/document-editor/dialog-cs5/app.vue b/ej2-vue/code-snippet/document-editor/dialog-cs5/app.vue
index 83505e00e..69c3b11c4 100644
--- a/ej2-vue/code-snippet/document-editor/dialog-cs5/app.vue
+++ b/ej2-vue/code-snippet/document-editor/dialog-cs5/app.vue
@@ -4,14 +4,14 @@
             <button v-on:click='showHyperlinkDialog'>Open dialog</button>
         </div>
         <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
-            :enableHyperlinkDialog='true' :enableSfdtExport='true' height="370px"
-            style="width: 100%;"></ejs-documenteditor>
+            :enableHyperlinkDialog='true' :enableSfdtExport='true' height="370px" v-bind:requestNavigate="onRequestNavigate"
+            style="width: 100%; "></ejs-documenteditor>
     </div>
-</template>
-<script>
-import { DocumentEditorComponent, Selection, Editor, HyperlinkDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
-
-export default {
+  </template>
+  <script>
+  import { DocumentEditorComponent, Selection, Editor, HyperlinkDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+  
+  export default {
     name: "App",
     components: {
         "ejs-documenteditor": DocumentEditorComponent
@@ -28,10 +28,29 @@ export default {
         showHyperlinkDialog: function () {
             //Opens hyperlink dialog.
             this.$refs.documenteditor.showDialog('Hyperlink');
-        }
+        },
+        onRequestNavigate: function (args) {
+              if (args.linkType !== 'Bookmark') {
+                  let link = args.navigationLink;
+                  if (args.localReference.length > 0) {
+                      link += '#' + args.localReference;
+                  }
+                  window.open(link);
+                  args.isHandled = true;
+              }
+          }
     }
-}
-</script>
-<style>
-@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
-</style>
+  }
+  </script>
+  <style>
+  @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-vue-documenteditor/styles/material.css";
+  </style>
+  
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/document-editor/export-container-cs1/app.vue b/ej2-vue/code-snippet/document-editor/export-container-cs1/app.vue
index 754a1c8bd..3ac913900 100644
--- a/ej2-vue/code-snippet/document-editor/export-container-cs1/app.vue
+++ b/ej2-vue/code-snippet/document-editor/export-container-cs1/app.vue
@@ -1,35 +1,58 @@
 <template>
-        <div id="app">
-            <div>
-                 <button v-on:click='saveAsSfdt'>Save</button>
-            </div>
-            <ejs-documenteditorcontainer ref="documentEditorContainer" height="590px" :enableSfdtExport='true' :enableSelection='true' :enableEditor='true' :isReadOnly='false' height="370px" style="width: 100%;"></ejs-documenteditorcontainer>
-        </div>
-</template>
-<script>
-        import Vue from 'vue'
-        import { DocumentEditorContainerPlugin, DocumentEditorContainerComponent,Toolbar } from '@syncfusion/ej2-vue-documenteditor';
-
-        Vue.use(DocumentEditorContainerPlugin);
-
-        export default {
-            data(){
-                return { serviceUrl:'https://ej2services.syncfusion.com/production/web-services/api/documenteditor/' }
-            },
-            provide: {
-                //Inject require modules.
-                DocumentEditorContainer : [SfdtExport, Selection, Editor, Toolbar]
-            },
-            methods: {
-                saveAsSfdt: function() {
-                    //Download the current document in sfdt format.
-                    this.$refs.documentEditorContainer.ej2Instances.documentEditor.save('sample', 'Sfdt');
-                }
-            }
-        }
-</script>
-<style>
-        @import "../../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
-</style>
-
-
+    <div id="app">
+      <div>
+        <button v-on:click="saveAsSfdt">Save</button>
+      </div>
+      <ejs-documenteditorcontainer
+        ref="documentEditorContainer"
+        height="590px"
+        :enableSfdtExport="true"
+        :enableSelection="true"
+        :enableEditor="true"
+        :isReadOnly="false"
+        style="width: 100%;"
+      ></ejs-documenteditorcontainer>
+    </div>
+  </template>
+  
+  <script>
+  import Vue from "vue";
+  import { DocumentEditorContainerPlugin, DocumentEditorContainerComponent, Toolbar, SfdtExport, Selection, Editor } from "@syncfusion/ej2-vue-documenteditor";
+  
+  Vue.use(DocumentEditorContainerPlugin);
+  
+  export default {
+    name: "App",
+    components: {
+      "ejs-documenteditorcontainer": DocumentEditorContainerComponent
+    },
+    data() {
+      return {
+        serviceUrl: "https://ej2services.syncfusion.com/production/web-services/api/documenteditor/"
+      };
+    },
+    provide: {
+      // Inject required modules.
+      DocumentEditorContainer: [SfdtExport, Selection, Editor, Toolbar]
+    },
+    methods: {
+      saveAsSfdt() {
+        // Download the current document in SFDT format.
+        this.$refs.documentEditorContainer.ej2Instances.documentEditor.save("sample", "Sfdt");
+      }
+    }
+  };
+  </script>
+  
+  <style>
+  @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-vue-documenteditor/styles/material.css";
+  </style>
+  
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/document-editor/export-container-cs2/app.vue b/ej2-vue/code-snippet/document-editor/export-container-cs2/app.vue
index 7655a9203..70c1200a7 100644
--- a/ej2-vue/code-snippet/document-editor/export-container-cs2/app.vue
+++ b/ej2-vue/code-snippet/document-editor/export-container-cs2/app.vue
@@ -1,35 +1,58 @@
 <template>
-        <div id="app">
-            <div>
-                 <button v-on:click='saveAsSfdt'>Save</button>
-            </div>
-            <ejs-documenteditorcontainer ref="documentEditorContainer" height="590px" :enableSfdtExport='true' :enableSelection='true' :enableEditor='true' :isReadOnly='false' height="370px" style="width: 100%;"></ejs-documenteditorcontainer>
-        </div>
-</template>
-<script>
-        import Vue from 'vue'
-        import { DocumentEditorContainerPlugin, DocumentEditorContainerComponent,Toolbar } from '@syncfusion/ej2-vue-documenteditor';
-
-        Vue.use(DocumentEditorContainerPlugin);
-
-        export default {
-            data(){
-                return { serviceUrl:'https://ej2services.syncfusion.com/production/web-services/api/documenteditor/' }
-            },
-            provide: {
-                //Inject require modules.
-                DocumentEditorContainer : [SfdtExport, Selection, Editor, Toolbar]
-            },
-            methods: {
-                saveAsSfdt: function() {
-                    //Download the current document in Docx format.
-                    this.$refs.documentEditorContainer.ej2Instances.documentEditor.save('sample', 'Docx');
-                }
-            }
-        }
-</script>
-<style>
-        @import "../../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
-</style>
-
-
+    <div id="app">
+      <div>
+        <button v-on:click="saveAsDocx">Save</button>
+      </div>
+      <ejs-documenteditorcontainer
+        ref="documentEditorContainer"
+        height="590px"
+        :enableSfdtExport="true"
+        :enableSelection="true"
+        :enableEditor="true"
+        :isReadOnly="false"
+        style="width: 100%;"
+      ></ejs-documenteditorcontainer>
+    </div>
+  </template>
+  
+  <script>
+  import Vue from "vue";
+  import { DocumentEditorContainerPlugin, DocumentEditorContainerComponent, Toolbar, SfdtExport, Selection, Editor } from "@syncfusion/ej2-vue-documenteditor";
+  
+  Vue.use(DocumentEditorContainerPlugin);
+  
+  export default {
+    name: "App",
+    components: {
+      "ejs-documenteditorcontainer": DocumentEditorContainerComponent
+    },
+    data() {
+      return {
+        serviceUrl: "https://ej2services.syncfusion.com/production/web-services/api/documenteditor/"
+      };
+    },
+    provide: {
+      // Inject required modules.
+      DocumentEditorContainer: [SfdtExport, Selection, Editor, Toolbar]
+    },
+    methods: {
+      saveAsDocx() {
+        // Download the current document in SFDT format.
+        this.$refs.documentEditorContainer.ej2Instances.documentEditor.save("sample", "Docx");
+      }
+    }
+  };
+  </script>
+  
+  <style>
+  @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-vue-documenteditor/styles/material.css";
+  </style>
+  
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/document-editor/export-container-cs3/app.vue b/ej2-vue/code-snippet/document-editor/export-container-cs3/app.vue
index 01010b17e..061d3cb92 100644
--- a/ej2-vue/code-snippet/document-editor/export-container-cs3/app.vue
+++ b/ej2-vue/code-snippet/document-editor/export-container-cs3/app.vue
@@ -1,35 +1,58 @@
 <template>
-        <div id="app">
-            <div>
-                 <button v-on:click='saveAsSfdt'>Save</button>
-            </div>
-            <ejs-documenteditorcontainer ref="documentEditorContainer" height="590px" :enableSfdtExport='true' :enableSelection='true' :enableEditor='true' :isReadOnly='false' height="370px" style="width: 100%;"></ejs-documenteditorcontainer>
-        </div>
-</template>
-<script>
-        import Vue from 'vue'
-        import { DocumentEditorContainerPlugin, DocumentEditorContainerComponent,Toolbar } from '@syncfusion/ej2-vue-documenteditor';
-
-        Vue.use(DocumentEditorContainerPlugin);
-
-        export default {
-            data(){
-                return { serviceUrl:'https://ej2services.syncfusion.com/production/web-services/api/documenteditor/' }
-            },
-            provide: {
-                //Inject require modules.
-                DocumentEditorContainer : [SfdtExport, Selection, Editor, Toolbar]
-            },
-            methods: {
-                saveAsSfdt: function() {
-                    //Download the current document in Txt format.
-                    this.$refs.documentEditorContainer.ej2Instances.documentEditor.save('sample', 'Txt');
-                }
-            }
-        }
-</script>
-<style>
-        @import "../../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
-</style>
-
-
+    <div id="app">
+      <div>
+        <button v-on:click="saveAsTxt">Save</button>
+      </div>
+      <ejs-documenteditorcontainer
+        ref="documentEditorContainer"
+        height="590px"
+        :enableSfdtExport="true"
+        :enableSelection="true"
+        :enableEditor="true"
+        :isReadOnly="false"
+        style="width: 100%;"
+      ></ejs-documenteditorcontainer>
+    </div>
+  </template>
+  
+  <script>
+  import Vue from "vue";
+  import { DocumentEditorContainerPlugin, DocumentEditorContainerComponent, Toolbar, SfdtExport, Selection, Editor } from "@syncfusion/ej2-vue-documenteditor";
+  
+  Vue.use(DocumentEditorContainerPlugin);
+  
+  export default {
+    name: "App",
+    components: {
+      "ejs-documenteditorcontainer": DocumentEditorContainerComponent
+    },
+    data() {
+      return {
+        serviceUrl: "https://ej2services.syncfusion.com/production/web-services/api/documenteditor/"
+      };
+    },
+    provide: {
+      // Inject required modules.
+      DocumentEditorContainer: [SfdtExport, Selection, Editor, Toolbar]
+    },
+    methods: {
+      saveAsTxt() {
+        // Download the current document in SFDT format.
+        this.$refs.documentEditorContainer.ej2Instances.documentEditor.save("sample", "Txt");
+      }
+    }
+  };
+  </script>
+  
+  <style>
+  @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-vue-documenteditor/styles/material.css";
+  </style>
+  
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/document-editor/export-container-cs4/app.vue b/ej2-vue/code-snippet/document-editor/export-container-cs4/app.vue
index 9953a8804..8816a9d8e 100644
--- a/ej2-vue/code-snippet/document-editor/export-container-cs4/app.vue
+++ b/ej2-vue/code-snippet/document-editor/export-container-cs4/app.vue
@@ -1,35 +1,58 @@
 <template>
-        <div id="app">
-            <div>
-                 <button v-on:click='saveAsSfdt'>Save</button>
-            </div>
-            <ejs-documenteditorcontainer ref="documentEditorContainer" height="590px" :enableSfdtExport='true' :enableSelection='true' :enableEditor='true' :isReadOnly='false' height="370px" style="width: 100%;"></ejs-documenteditorcontainer>
-        </div>
-</template>
-<script>
-        import Vue from 'vue'
-        import { DocumentEditorContainerPlugin, DocumentEditorContainerComponent,Toolbar } from '@syncfusion/ej2-vue-documenteditor';
-
-        Vue.use(DocumentEditorContainerPlugin); 
-
-        export default {
-            data(){
-                return { serviceUrl:'https://ej2services.syncfusion.com/production/web-services/api/documenteditor/' }
-            },
-            provide: {
-                //Inject require modules.
-                DocumentEditorContainer : [SfdtExport, Selection, Editor, Toolbar]
-            },
-            methods: {
-                saveAsSfdt: function() {
-                    //Download the current document in Dotx format.
-                    this.$refs.documentEditorContainer.ej2Instances.documentEditor.save('sample', 'Dotx');
-                }
-            }
-        }
-</script>
-<style>
-        @import "../../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
-</style>
-
-
+    <div id="app">
+      <div>
+        <button v-on:click="saveAsDotx">Save</button>
+      </div>
+      <ejs-documenteditorcontainer
+        ref="documentEditorContainer"
+        height="590px"
+        :enableSfdtExport="true"
+        :enableSelection="true"
+        :enableEditor="true"
+        :isReadOnly="false"
+        style="width: 100%;"
+      ></ejs-documenteditorcontainer>
+    </div>
+  </template>
+  
+  <script>
+  import Vue from "vue";
+  import { DocumentEditorContainerPlugin, DocumentEditorContainerComponent, Toolbar, SfdtExport, Selection, Editor } from "@syncfusion/ej2-vue-documenteditor";
+  
+  Vue.use(DocumentEditorContainerPlugin);
+  
+  export default {
+    name: "App",
+    components: {
+      "ejs-documenteditorcontainer": DocumentEditorContainerComponent
+    },
+    data() {
+      return {
+        serviceUrl: "https://ej2services.syncfusion.com/production/web-services/api/documenteditor/"
+      };
+    },
+    provide: {
+      // Inject required modules.
+      DocumentEditorContainer: [SfdtExport, Selection, Editor, Toolbar]
+    },
+    methods: {
+      saveAsDotx() {
+        // Download the current document in SFDT format.
+        this.$refs.documentEditorContainer.ej2Instances.documentEditor.save("sample", "Dotx");
+      }
+    }
+  };
+  </script>
+  
+  <style>
+  @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-vue-documenteditor/styles/material.css";
+  </style>
+  
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/document-editor/link-cs1/app-composition.vue b/ej2-vue/code-snippet/document-editor/link-cs1/app-composition.vue
index 8f8e26bab..870540728 100644
--- a/ej2-vue/code-snippet/document-editor/link-cs1/app-composition.vue
+++ b/ej2-vue/code-snippet/document-editor/link-cs1/app-composition.vue
@@ -1,14 +1,14 @@
 <template>
     <div id="app">
-        <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false'
+        <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
             v-bind:requestNavigate="onRequestNavigate" height="370px" style="width: 100%;"></ejs-documenteditor>
     </div>
 </template>
 <script setup>
 import { provide } from "vue";
-import { DocumentEditorComponent as EjsDocumenteditor, Selection, RequestNavigateEventArgs } from '@syncfusion/ej2-vue-documenteditor';
+import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor } from '@syncfusion/ej2-vue-documenteditor';
 
-provide('DocumentEditor ', [Selection]);
+provide('DocumentEditor ', [Selection, Editor]);
 
 const onRequestNavigate = function (args) {
     if (args.linkType !== 'Bookmark') {
diff --git a/ej2-vue/code-snippet/document-editor/link-cs1/app.vue b/ej2-vue/code-snippet/document-editor/link-cs1/app.vue
index 07b21a08c..e458b8a77 100644
--- a/ej2-vue/code-snippet/document-editor/link-cs1/app.vue
+++ b/ej2-vue/code-snippet/document-editor/link-cs1/app.vue
@@ -1,11 +1,11 @@
 <template>
     <div id="app">
-        <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false'
+        <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
             v-bind:requestNavigate="onRequestNavigate" height="370px" style="width: 100%;"></ejs-documenteditor>
     </div>
 </template>
 <script>
-import { DocumentEditorComponent, Selection, RequestNavigateEventArgs } from '@syncfusion/ej2-vue-documenteditor';
+import { DocumentEditorComponent, Selection, Editor } from '@syncfusion/ej2-vue-documenteditor';
 
 export default {
     name: "App",
@@ -17,7 +17,7 @@ export default {
         };
     },
     provide: {
-        DocumentEditor: [Selection]
+        DocumentEditor: [Selection, Editor]
     },
     methods: {
         onRequestNavigate: function (args) {
diff --git a/ej2-vue/code-snippet/document-editor/link-cs3/app-composition.vue b/ej2-vue/code-snippet/document-editor/link-cs3/app-composition.vue
index ff598e810..d2dd8e0e3 100644
--- a/ej2-vue/code-snippet/document-editor/link-cs3/app-composition.vue
+++ b/ej2-vue/code-snippet/document-editor/link-cs3/app-composition.vue
@@ -4,19 +4,29 @@
             <button v-on:click='showHyperlinkDialog'>Open dialog</button>
         </div>
         <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
-            :enableEditorHistory='true' :enableHyperlinkDialog='true' :enableSfdtExport='true' height="370px"
+            :enableEditorHistory='true' :enableHyperlinkDialog='true' :enableSfdtExport='true' height="370px" v-bind:requestNavigate="onRequestNavigate"
             style="width: 100%;"></ejs-documenteditor>
     </div>
 </template>
 <script setup>
 import { provide, ref } from "vue";
-import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, EditorHistory, HyperlinkDialog, SfdtExport, RequestNavigateEventArgs } from '@syncfusion/ej2-vue-documenteditor';
+import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, EditorHistory, HyperlinkDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
 
 const documenteditor = ref(null);
 provide('DocumentEditor ', [Selection, Editor, EditorHistory, HyperlinkDialog, SfdtExport]);
 
 const showHyperlinkDialog = function () {
-    documenteditor.showDialog('Hyperlink');
+    documenteditor.value.showDialog('Hyperlink');
+}
+const onRequestNavigate = function (args) {
+    if (args.linkType !== 'Bookmark') {
+        let link = args.navigationLink;
+        if (args.localReference.length > 0) {
+            link += '#' + args.localReference;
+        }
+        window.open(link);
+        args.isHandled = true;
+    }
 }
 
 </script>
diff --git a/ej2-vue/code-snippet/document-editor/link-cs3/app.vue b/ej2-vue/code-snippet/document-editor/link-cs3/app.vue
index c4c7a7c0a..14d319ca2 100644
--- a/ej2-vue/code-snippet/document-editor/link-cs3/app.vue
+++ b/ej2-vue/code-snippet/document-editor/link-cs3/app.vue
@@ -4,14 +4,14 @@
             <button v-on:click='showHyperlinkDialog'>Open dialog</button>
         </div>
         <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
-            :enableEditorHistory='true' :enableHyperlinkDialog='true' :enableSfdtExport='true' height="370px"
+            :enableEditorHistory='true' :enableHyperlinkDialog='true' :enableSfdtExport='true' height="370px" v-bind:requestNavigate="onRequestNavigate"
             style="width: 100%;"></ejs-documenteditor>
     </div>
-</template>
-<script>
-import { DocumentEditorComponent, Selection, Editor, EditorHistory, HyperlinkDialog, SfdtExport, RequestNavigateEventArgs } from '@syncfusion/ej2-vue-documenteditor';
-
-export default {
+  </template>
+  <script>
+  import { DocumentEditorComponent, Selection, Editor, EditorHistory, HyperlinkDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
+  
+  export default {
     name: "App",
     components: {
         "ejs-documenteditor": DocumentEditorComponent
@@ -25,11 +25,31 @@ export default {
     },
     methods: {
         showHyperlinkDialog: function () {
-            documenteditor.showDialog('Hyperlink');
-        }
+          this.$refs.documenteditor.showDialog('Hyperlink');
+        },
+        onRequestNavigate: function (args) {
+                if (args.linkType !== 'Bookmark') {
+                    let link = args.navigationLink;
+                    if (args.localReference.length > 0) {
+                        link += '#' + args.localReference;
+                    }
+                    window.open(link);
+                    args.isHandled = true;
+                }
+            }
     }
-}
-</script>
-<style>
-@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
-</style>
+  }
+  </script>
+  <style>
+  @import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+  @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-vue-documenteditor/styles/material.css";
+  </style>
+  
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/document-editor/ruler-cs1/app-composition.vue b/ej2-vue/code-snippet/document-editor/ruler-cs1/app-composition.vue
index 3cfcd15a0..816b7f8f0 100644
--- a/ej2-vue/code-snippet/document-editor/ruler-cs1/app-composition.vue
+++ b/ej2-vue/code-snippet/document-editor/ruler-cs1/app-composition.vue
@@ -8,7 +8,7 @@
       :enableTableDialog='true' :enableBookmarkDialog='true' :enableTableOfContentsDialog='true'
       :enablePageSetupDialog='true' :enableStyleDialog='true' :enableListDialog='true' :enableParagraphDialog='true'
       :enableFontDialog='true' :enableTablePropertiesDialog='true' :enableBordersAndShadingDialog='true'
-      :enableTableOptionsDialog='true'></ejs-documenteditor>
+      :enableTableOptionsDialog='true' :documentEditorSettings='documentEditorSettings'></ejs-documenteditor>
   </div>
 </template>
 
@@ -18,8 +18,6 @@ import { DocumentEditorComponent as EjsDocumenteditor, Print, SfdtExport, WordEx
 
 const container = ref(null);
 const serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/documenteditor/';
-const height = '370px';
-const isReadOnly = false;
 const documentEditorSettings = { showRuler: true };
 
 provide('DocumentEditor', [Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog]);
diff --git a/ej2-vue/code-snippet/document-editor/ruler-cs1/app.vue b/ej2-vue/code-snippet/document-editor/ruler-cs1/app.vue
index 2734ebd36..d55f3538d 100644
--- a/ej2-vue/code-snippet/document-editor/ruler-cs1/app.vue
+++ b/ej2-vue/code-snippet/document-editor/ruler-cs1/app.vue
@@ -8,12 +8,12 @@
       :enableTableDialog='true' :enableBookmarkDialog='true' :enableTableOfContentsDialog='true'
       :enablePageSetupDialog='true' :enableStyleDialog='true' :enableListDialog='true' :enableParagraphDialog='true'
       :enableFontDialog='true' :enableTablePropertiesDialog='true' :enableBordersAndShadingDialog='true'
-      :enableTableOptionsDialog='true'></ejs-documenteditor>
+      :enableTableOptionsDialog='true' :documentEditorSettings='documentEditorSettings'></ejs-documenteditor>
   </div>
 </template>
 
 <script>
-import { DocumentEditorComponent, DocumentEditorComponent, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog } from '@syncfusion/ej2-vue-documenteditor';
+import { DocumentEditorComponent, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog } from '@syncfusion/ej2-vue-documenteditor';
 
 export default {
   name: "App",
diff --git a/ej2-vue/code-snippet/document-editor/ruler-cs2/app-composition.vue b/ej2-vue/code-snippet/document-editor/ruler-cs2/app-composition.vue
index 66091a8c3..1b615d570 100644
--- a/ej2-vue/code-snippet/document-editor/ruler-cs2/app-composition.vue
+++ b/ej2-vue/code-snippet/document-editor/ruler-cs2/app-composition.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <button id='container_ruler_button' v-on:click="onClick">Show/Hide Ruler</button>
-    <ejs-documenteditorcontainer ref="container" :serviceUrl='serviceUrl' :height='height' :enableToolbar='true'>
+    <ejs-documenteditorcontainer ref="container" :serviceUrl='serviceUrl' :height='height' :enableToolbar='true' :document-editor-settings="documentEditorSettings">
     </ejs-documenteditorcontainer>
   </div>
 </template>
diff --git a/ej2-vue/code-snippet/document-editor/ruler-cs2/app.vue b/ej2-vue/code-snippet/document-editor/ruler-cs2/app.vue
index 539ca0bdc..4669f6896 100644
--- a/ej2-vue/code-snippet/document-editor/ruler-cs2/app.vue
+++ b/ej2-vue/code-snippet/document-editor/ruler-cs2/app.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <button id='container_ruler_button' v-on:click="onClick">Show/Hide Ruler</button>
-    <ejs-documenteditorcontainer ref="container" :serviceUrl='serviceUrl' :height='height' :enableToolbar='true'>
+    <ejs-documenteditorcontainer ref="container" :serviceUrl='serviceUrl' :height='height' :enableToolbar='true' :document-editor-settings="documentEditorSettings">
     </ejs-documenteditorcontainer>
   </div>
 </template>
diff --git a/ej2-vue/code-snippet/document-editor/scrolling-zooming-cs2/app-composition.vue b/ej2-vue/code-snippet/document-editor/scrolling-zooming-cs2/app-composition.vue
index 6f8499807..5d911c168 100644
--- a/ej2-vue/code-snippet/document-editor/scrolling-zooming-cs2/app-composition.vue
+++ b/ej2-vue/code-snippet/document-editor/scrolling-zooming-cs2/app-composition.vue
@@ -1,16 +1,16 @@
 <template>
     <div id="app">
-        <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly=false height="370px"
+        <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly=false height="370px" :enableEditor='true'
             style="width: 100%;"></ejs-documenteditor>
     </div>
 </template>
 <script setup>
 import { provide, onMounted, ref } from "vue";
-import { DocumentEditorComponent as EjsDocumenteditor, Selection } from '@syncfusion/ej2-vue-documenteditor';
+import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor } from '@syncfusion/ej2-vue-documenteditor';
 
 const documenteditor = ref(null);
 
-provide('DocumentEditor ', [Selection]);
+provide('DocumentEditor ', [Selection, Editor]);
 
 onMounted(function () {
     let defaultDocument = {
diff --git a/ej2-vue/code-snippet/document-editor/scrolling-zooming-cs2/app.vue b/ej2-vue/code-snippet/document-editor/scrolling-zooming-cs2/app.vue
index 7ae97d8fe..c8fc8fe7b 100644
--- a/ej2-vue/code-snippet/document-editor/scrolling-zooming-cs2/app.vue
+++ b/ej2-vue/code-snippet/document-editor/scrolling-zooming-cs2/app.vue
@@ -1,11 +1,11 @@
 <template>
     <div id="app">
-        <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly=false height="370px"
+        <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly=false height="370px" :enableEditor='true'
             style="width: 100%;"></ejs-documenteditor>
     </div>
 </template>
 <script>
-import { DocumentEditorComponent, Selection } from '@syncfusion/ej2-vue-documenteditor';
+import { DocumentEditorComponent, Selection, Editor } from '@syncfusion/ej2-vue-documenteditor';
 
 export default {
     name: "App",
@@ -17,7 +17,7 @@ export default {
         };
     },
     provide: {
-        DocumentEditor: [Selection]
+        DocumentEditor: [Selection, Editor]
     },
     mounted: function () {
         let defaultDocument = {
diff --git a/ej2-vue/code-snippet/document-editor/scrolling-zooming-cs3/app-composition.vue b/ej2-vue/code-snippet/document-editor/scrolling-zooming-cs3/app-composition.vue
index 5a4023748..820c674a0 100644
--- a/ej2-vue/code-snippet/document-editor/scrolling-zooming-cs3/app-composition.vue
+++ b/ej2-vue/code-snippet/document-editor/scrolling-zooming-cs3/app-composition.vue
@@ -1,7 +1,7 @@
 <template>
     <div id="app">
         <ejs-documenteditor ref="documenteditor" v-bind:selectionChange='onSelectionChange'
-            v-bind:viewChange='onViewChange' v-bind:documentChange='onDocumentChange' :enableSelection='true'
+            v-bind:viewChange='onViewChange' v-bind:documentChange='onDocumentChange' :enableSelection='true' :enableEditor='true'
             :isReadOnly=false height="370px" style="width: 100%;"></ejs-documenteditor>
         <div id="documenteditor_statusbar">
             <label style="margin-top: 6px;margin-right: 2px">Page </label>
@@ -22,7 +22,7 @@
 </template>
 <script setup>
 import { onMounted, ref, provide } from "vue";
-import { DocumentEditorComponent as EjsDocumenteditor, Selection } from '@syncfusion/ej2-vue-documenteditor';
+import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor } from '@syncfusion/ej2-vue-documenteditor';
 import { DropDownButtonComponent as EjsDropdownbutton } from '@syncfusion/ej2-vue-splitbuttons';
 
 const documenteditor = ref(null);
@@ -58,7 +58,7 @@ const onViewChange = function (args) {
     //Update page number on view change.
     currentPage.value = args.startPage;
 }
-const onSelectionChange = function (args) {
+const onSelectionChange = function () {
     //Get current page number.
     currentPage.value = documenteditor.value.ej2Instances.selection.startPage;
 }
@@ -183,7 +183,7 @@ onMounted(function () {
     document.getElementById('editablePageNumber').addEventListener('blur', pageBlurEvent);
 });
 
-provide('DocumentEditor', [Selection]);
+provide('DocumentEditor', [Selection, Editor]);
 </script>
 <style>
 @import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
diff --git a/ej2-vue/code-snippet/document-editor/scrolling-zooming-cs3/app.vue b/ej2-vue/code-snippet/document-editor/scrolling-zooming-cs3/app.vue
index 1f147ffe8..d9dc1ec3f 100644
--- a/ej2-vue/code-snippet/document-editor/scrolling-zooming-cs3/app.vue
+++ b/ej2-vue/code-snippet/document-editor/scrolling-zooming-cs3/app.vue
@@ -2,7 +2,7 @@
     <div id="app">
         <ejs-documenteditor ref="documenteditor" v-bind:selectionChange='onSelectionChange'
             v-bind:viewChange='onViewChange' v-bind:documentChange='onDocumentChange' :enableSelection='true'
-            :isReadOnly=false height="370px" style="width: 100%;"></ejs-documenteditor>
+            :isReadOnly=false :enableEditor='true' height="370px" style="width: 100%;"></ejs-documenteditor>
         <div id=" documenteditor_statusbar">
             <label style="margin-top: 6px;margin-right: 2px">Page </label>
             <div class="single-line e-de-pagenumber-text" v-on:keydown='pageKeydownEvent' v-on:click='pagerClickEvent'
@@ -19,18 +19,17 @@
                 v-bind:select="onZoom" title="Zoom level. Click or tap to open the Zoom options."></ejs-dropdownbutton>
         </div>
     </div>
-</template>
-<script>
-import { DocumentEditorComponent, Selection } from '@syncfusion/ej2-vue-documenteditor';
-import { DropDownButtonComponent } from '@syncfusion/ej2-vue-splitbuttons';
-
-export default {
+  </template>
+  <script>
+  import { DocumentEditorComponent, Selection, Editor } from '@syncfusion/ej2-vue-documenteditor';
+  import { DropDownButtonComponent } from '@syncfusion/ej2-vue-splitbuttons';
+  
+  export default {
     name: "App",
     components: {
         "ejs-documenteditor": DocumentEditorComponent,
         "ejs-dropdownbutton": DropDownButtonComponent
     },
-    props: ['pageCount', 'currentPage', 'zoomContent'],
     data: function () {
         return {
             zoomContent: "100%",
@@ -65,14 +64,14 @@ export default {
     },
     provide: {
         //Inject require modules.
-        DocumentEditor: [Selection]
+        DocumentEditor: [Selection, Editor]
     },
     methods: {
         onViewChange: function (args) {
             //Update page number on view change.
             this.currentPage = args.startPage;
         },
-        onSelectionChange: function (args) {
+        onSelectionChange: function () {
             //Get current page number.
             this.currentPage = this.$refs.documenteditor.ej2Instances.selection.startPage;
         },
@@ -196,38 +195,47 @@ export default {
         this.$refs.documenteditor.open(JSON.stringify(defaultDocument));
         document.getElementById('editablePageNumber').addEventListener('blur', this.pageBlurEvent);
     }
-}
-</script>
-<style>
-@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
-
-.single-line {
+  }
+  </script>
+  <style>
+   @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-vue-documenteditor/styles/material.css";
+  
+  .single-line {
     cursor: text !important;
     outline: none;
-}
-
-.single-line:hover {
+  }
+  
+  .single-line:hover {
     border-color: #e4e4e4 !important;
-}
-
-[contenteditable="true"].single-line {
+  }
+  
+  [contenteditable="true"].single-line {
     white-space: nowrap;
     border-color: #e4e4e4 !important;
-}
-
-.e-de-pagenumber-text:hover {
+  }
+  
+  .e-de-pagenumber-text:hover {
     background-color: #f4f4f4 !important;
-}
-
-[contenteditable="true"].single-line * {
+  }
+  
+  [contenteditable="true"].single-line * {
     white-space: nowrap;
-}
-
-.e-de-statusbar-zoom {
+  }
+  
+  .e-de-statusbar-zoom {
     float: right;
     text-align: center;
     padding: 2px;
     line-height: 19px;
     margin-top: 1px;
-}
-</style>
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/ej2-vue/code-snippet/grid/aggregates/default-cs7/app-composition.vue b/ej2-vue/code-snippet/grid/aggregates/default-cs7/app-composition.vue
index dbce2d5ee..3f68fbd1f 100644
--- a/ej2-vue/code-snippet/grid/aggregates/default-cs7/app-composition.vue
+++ b/ej2-vue/code-snippet/grid/aggregates/default-cs7/app-composition.vue
@@ -26,7 +26,11 @@ const grid = ref(null);
 const app = createApp();
 
 let selectedRecord = {};
-      const numericParams = { params: { change: this.changeFn } };
+const changeFn = function(args){
+        selectedRecord['Freight'] = args.value;
+        grid.value.ej2Instances.aggregateModule.refresh(selectedRecord);
+    }
+      const numericParams = { params: { change: changeFn } };
       const toolbarOptions = ['Delete', 'Update', 'Cancel'];
       const editSettings = { allowEditing: true, allowDeleting: true, mode: 'Inline' };
       const footerSum = function () {
@@ -42,11 +46,7 @@ let selectedRecord = {};
            selectedRecord = args.rowData;
         };
       }
-    const changeFn = function(args){
-        selectedRecord['Freight'] = args.value;
-        let gridObj = grid.value;
-        gridObj.aggregateModule.refresh(selectedRecord);
-    }
+
   
   provide('grid', [Page, Aggregate, Edit, Toolbar]);
 </script>
diff --git a/ej2-vue/document-editor/faq/unsupported-file-format.md b/ej2-vue/document-editor/faq/unsupported-file-format.md
new file mode 100644
index 000000000..1455d3e76
--- /dev/null
+++ b/ej2-vue/document-editor/faq/unsupported-file-format.md
@@ -0,0 +1,29 @@
+---
+layout: post
+title: Unsupported file in Vue Document editor component | Syncfusion
+description: Learn here all about Unsupported file in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more.
+control: Unsupported file 
+platform: ej2-vue
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Why Do I Get the Unsupported Warning Message When Opening a Document?
+
+If you receive an "The file format you have selected isn't supported. Please choose valid format." message when opening a document in the Document Editor, it typically indicates that the document format is not supported by the current version of the Document Editor. Here are some common reasons for this warning:
+1.	Unsupported File Format: The document you are trying to open might be in a format that the Document Editor does not support. Ensure you are using a supported format, such as SFDT.
+2.	Corrupted Document: The document file might be corrupted or improperly formatted. Try opening a different document to see if the issue persists.
+To avoid this warning, always use the recommended document formats and features supported by the Document Editor. 
+
+Document Editor supports the following file formats:
+•	Word Document (*.docx)
+•	Syncfusion Document Text (*.sfdt)
+•	Plain Text (*.txt)
+•	Word Template (*.dotx)
+•	HyperText Markup Language (*.html)
+•	Rich Text Format (*.rtf)
+•	Word XML Document(*.xml)
+•	Word 97-2003 Template (*.dot)
+•	Word 97-2003 Document (*.doc)
+
+By using these supported formats, you can ensure compatibility and avoid unsupported warning messages when opening documents in the Document Editor.
\ No newline at end of file
diff --git a/ej2-vue/document-editor/getting-started.md b/ej2-vue/document-editor/getting-started.md
index bf1fbf742..1c2d2bc2c 100644
--- a/ej2-vue/document-editor/getting-started.md
+++ b/ej2-vue/document-editor/getting-started.md
@@ -74,7 +74,7 @@ yarn run serve
 
 When creating a new project, choose the option `Default ([Vue 2] babel, eslint)` from the menu.
 
-![Vue 2 project](../appearance/images/vue2-terminal.png)
+![Reference](./images/vue2-terminal.png)
 
 Once the `quickstart` project is set up with default settings, proceed to add Syncfusion components to the project.
 
@@ -262,3 +262,4 @@ DocumentEditorContainer output will be displayed as follows.
 * [How to load the document by default](../document-editor/how-to/open-default-document).
 * [How to customize tool bar](../document-editor/how-to/customize-tool-bar).
 * [How to resize Document editor component](../document-editor/how-to/resize-document-editor).
+* [How to add a save button to the DocumentEditorContainer component toolbar](../document-editor/how-to/add-save-button-in-toolbar)
\ No newline at end of file
diff --git a/ej2-vue/document-editor/how-to/add-save-button-in-toolbar.md b/ej2-vue/document-editor/how-to/add-save-button-in-toolbar.md
new file mode 100644
index 000000000..f2cf4334a
--- /dev/null
+++ b/ej2-vue/document-editor/how-to/add-save-button-in-toolbar.md
@@ -0,0 +1,103 @@
+---
+layout: post
+title: Add save button in Vue Document editor toolbar | Syncfusion
+description: Learn here to add save button in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more.
+control: Add save button tool bar 
+platform: ej2-vue
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Add save button in Vue Document editor toolbar
+
+## To add a save button to the existing toolbar in DocumentEditorContainer
+
+DocumentEditorContainer allows you to add a new button to the existing items in a toolbar using [`CustomToolbarItemModel`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/customToolbarItemModel/) and with existing items in [`toolbarItems`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container/#toolbaritems) property. Newly added item click action can be defined in [`toolbarclick`](https://ej2.syncfusion.com/vue/documentation/api/toolbar/clickEventArgs/).
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+<template>
+  <div id="app">
+    <ejs-documenteditorcontainer ref="container" :toolbarItems='items' v-bind:toolbarClick='onToolbarClick'
+      :enableToolbar='true'> </ejs-documenteditorcontainer>
+  </div>
+</template>
+
+<script setup>
+import { DocumentEditorContainerComponent as EjsDocumenteditorcontainer, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
+import { provide, ref } from 'vue';
+
+const container = ref(null);
+const items = [
+  'New', 'Open', 'Separator',
+  {
+    prefixIcon: "e-save icon",
+    tooltipText: "Save the Document",
+    text: "Save",
+    id: "save"
+  },
+  'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl']
+
+provide('DocumentEditorContainer', [Toolbar]);
+
+const onToolbarClick = function (args) {
+  switch (args.item.id) {
+    case 'save':
+      //Disable image toolbar item.
+      container.value.ej2Instances.documentEditor.save('sample', 'Docx');
+      break;
+  }
+}
+</script>
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+<template>
+  <div id="app">
+    <ejs-documenteditorcontainer ref="container" :toolbarItems='items' v-bind:toolbarClick='onToolbarClick'
+      :enableToolbar='true'> </ejs-documenteditorcontainer>
+  </div>
+</template>
+
+<script>
+import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+  components: {
+    'ejs-documenteditorcontainer': DocumentEditorContainerComponent
+  },
+  data() {
+    return {
+      items: [
+        'New','Open','Separator',
+        {
+            prefixIcon: "e-save icon",
+            tooltipText: "Save the Document",
+            text: "Save",
+            id: "save"
+        },
+        'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl']
+    }
+  },
+  provide: {
+    DocumentEditorContainer: [Toolbar]
+  },
+  methods: {
+    onToolbarClick: function (args) {
+      switch (args.item.id) {
+        case 'save':
+            //Save the document(Download the document)
+            this.$refs.container.ej2Instances.documentEditor.save('sample', 'Docx');
+            break;
+      }
+    }
+  }
+}
+</script>
+
+{% endhighlight %}
+{% endtabs %}
+
+>Note: Default value of `toolbarItems` is `['New', 'Open', 'Separator', 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl']`.
\ No newline at end of file
diff --git a/ej2-vue/document-editor/how-to/auto-save-document.md b/ej2-vue/document-editor/how-to/auto-save-document.md
new file mode 100644
index 000000000..2ed1b1079
--- /dev/null
+++ b/ej2-vue/document-editor/how-to/auto-save-document.md
@@ -0,0 +1,170 @@
+---
+layout: post
+title: Auto save document in Vue Document editor component | Syncfusion
+description: Learn here all about Auto save document in document editor in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more.
+control: Auto save document in document editor 
+platform: ej2-vue
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Auto save document in document editor in Vue Document editor component
+
+In this article, we are going to see how to autosave the document to server. You can automatically save the edited content in regular intervals of time. It helps reduce the risk of data loss by saving an open document automatically at customized intervals.
+
+The following example illustrates how to auto save the document in server.
+
+* In the client-side, using content change event, we can automatically save the edited content in regular intervals of time. Based on `contentChanged` boolean, the document send as Docx format to server-side using [`saveAsBlob`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/#saveasblob) method.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+<template>
+  <div id="app">
+    <ejs-documenteditorcontainer ref='container' :serviceUrl='serviceUrl' v-on:created="onCreated"
+      v-on:contentChange="contentChangeEvent" height="590px" id='container'
+      :enableToolbar='true'></ejs-documenteditorcontainer>
+  </div>
+</template>
+<script setup>
+import { DocumentEditorContainerComponent as EjsDocumenteditorcontainer, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
+import { provide, ref } from 'vue';
+
+const container = ref(null);
+const serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/documenteditor/';
+const contentChanged = ref(false);
+
+//Inject require modules.
+provide('DocumentEditorContainer', [Toolbar]);
+
+const contentChangeEvent = function () {
+  contentChanged.value = true;
+}
+const onCreated = function () {
+  setInterval(() => {
+    if (contentChanged.value) {
+      //You can save the document as below
+      container.value.ej2Instances.documentEditor
+        .saveAsBlob('Docx')
+        .then((blob) => {
+          console.log('Saved sucessfully');
+          let exportedDocument = blob;
+          //Now, save the document where ever you want.
+          let formData = new FormData();
+          formData.append('fileName', 'sample.docx');
+          formData.append('data', exportedDocument);
+          /* tslint:disable */
+          var req = new XMLHttpRequest();
+          // Replace your running Url here
+          req.open(
+            'POST',
+            'http://localhost:62869/api/documenteditor/AutoSave',
+            true
+          );
+          req.onreadystatechange = () => {
+            if (req.readyState === 4) {
+              if (req.status === 200 || req.status === 304) {
+                console.log('Saved sucessfully');
+              }
+            }
+          };
+          req.send(formData);
+        });
+      contentChanged.value = false;
+    }
+  }, 1000);
+}
+</script>
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+<template>
+  <div id="app">
+    <ejs-documenteditorcontainer ref='container' :serviceUrl='serviceUrl' v-on:created="onCreated"
+      v-on:contentChange="contentChangeEvent" height="590px" id='container'
+      :enableToolbar='true'></ejs-documenteditorcontainer>
+  </div>
+</template>
+<script>
+import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+  components: {
+    'ejs-documenteditorcontainer': DocumentEditorContainerComponent
+  },
+  data() {
+    return {
+      serviceUrl: 'https://ej2services.syncfusion.com/production/web-services/api/documenteditor/',
+      contentChanged: false
+    };
+  },
+  provide: {
+    //Inject require modules.
+    DocumentEditorContainer: [Toolbar]
+  },
+  methods: {
+    contentChangeEvent: function () {
+      this.contentChanged = true;
+    },
+    onCreated: function () {
+      setInterval(() => {
+        if (this.contentChanged) {
+          //You can save the document as below
+          this.$refs.container.ej2Instances.documentEditor
+            .saveAsBlob('Docx')
+            .then((blob) => {
+              console.log('Saved sucessfully');
+              let exportedDocument = blob;
+              //Now, save the document where ever you want.
+              let formData = new FormData();
+              formData.append('fileName', 'sample.docx');
+              formData.append('data', exportedDocument);
+              /* tslint:disable */
+              var req = new XMLHttpRequest();
+              // Replace your running Url here
+              req.open(
+                'POST',
+                'http://localhost:62869/api/documenteditor/AutoSave',
+                true
+              );
+              req.onreadystatechange = () => {
+                if (req.readyState === 4) {
+                  if (req.status === 200 || req.status === 304) {
+                    console.log('Saved sucessfully');
+                  }
+                }
+              };
+              req.send(formData);
+            });
+          this.contentChanged = false;
+        }
+      }, 1000);
+    },
+  },
+};
+</script>
+
+{% endhighlight %}
+{% endtabs %}
+
+  * In server-side, Receives the stream content from client-side and process it to save the document in Server or Database from the received stream. Add Web API in controller file like below to save the document.
+
+      ```c#
+      [AcceptVerbs("Post")]
+      [HttpPost]
+      [EnableCors("AllowAllOrigins")]
+      [Route("AutoSave")]
+      public string AutoSave()
+      {
+          IFormFile file = HttpContext.Request.Form.Files[0];
+          Stream stream = new MemoryStream();    
+          file.CopyTo(stream);
+          //Save the stream to database or server as per the requirement.
+          stream.Close();
+          return "Sucess";
+      }
+      ```
+
+## See Also
+* [Autosave document in DocumentEditor](../../document-editor/how-to/auto-save-document-in-document-editor)
\ No newline at end of file
diff --git a/ej2-vue/document-editor/how-to/customize-tool-bar.md b/ej2-vue/document-editor/how-to/customize-tool-bar.md
index 2123f28bd..a4c84dea9 100644
--- a/ej2-vue/document-editor/how-to/customize-tool-bar.md
+++ b/ej2-vue/document-editor/how-to/customize-tool-bar.md
@@ -40,8 +40,7 @@ const items = [
     text: "Disable Image",
     id: "Custom"
   },
-  'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'Comments', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break',
-  'Separator', 'Find', 'Separator', 'LocalClipboard', 'RestrictEditing']
+  'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl']
 
 provide('DocumentEditorContainer', [Toolbar]);
 
@@ -81,8 +80,7 @@ export default {
           text: "Disable Image",
           id: "Custom"
         },
-        'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'Comments', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break',
-        'Separator', 'Find', 'Separator', 'LocalClipboard', 'RestrictEditing']
+        'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl']
     }
   },
   provide: {
@@ -104,4 +102,4 @@ export default {
 {% endhighlight %}
 {% endtabs %}
 
->Note: Default value of `toolbarItems` is `['New', 'Open', 'Separator', 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields']`.
\ No newline at end of file
+>Note: Default value of `toolbarItems` is `['New', 'Open', 'Separator', 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl']`.
\ No newline at end of file
diff --git a/ej2-vue/document-editor/images/vue2-terminal.png b/ej2-vue/document-editor/images/vue2-terminal.png
new file mode 100644
index 0000000000000000000000000000000000000000..39beefaa25348abb1ec9d6bcb4b2f0e1a0e60b0e
GIT binary patch
literal 9489
zcmd6NcTiJb*KQDn07j93XjFQUju4P0NB|{3P(g}@DlPP;6s40OND%=kp&0}e=>mbE
zfV9vdNGCJ_L8RBv0yn?+o%v?&y??xS?#%t>{&Ds>d(Szu_dcsUYdvd6J=DJsVummS
z000nNThjmlpu^Ih7l914R=6j=opz)1Hn<N1l=NO-qIJ$Xs3X(?fbzF2$JXa)eI^g>
zC*A<SWx;<gI=F$r1^^(C57$(G>}Ro>sn#XXRz(E)Sh-Y{5nO6aO=h%4z4&73$>I#w
zMHkB&#jhwMS+6uIZFp$lS{g-v{)lz6a_CI%$Vf|fFXO&T(cNd+DK;GX^!ND-qZgT3
zC233k*)y*z2jqr6>1QfEpe|)ml-KJh+0+L?TNbDD9f>EIzEgCxWf`A?(E|V<L|7rT
z4kDC9Yf;Q-+NSOr@<3@F>=_*GH4-}z1OSBO-$l`ep#P6P5zis79?dNwP8Xi9T>K{a
zgaI)73^uTOfx6U_e)4=&u+%-RguKfL@yHL%8o*7zxDqfEG<HK@b*k^ih`EC%%iMxn
z8W17lsM8BXQ{Vkn*gH~Y5dea;%gNkFiBZvWC#rK+Jsb#U905~bL-D)m`3ScZ^RXcA
zmD!N=RImvv<eL-v$K-jHx!}ksEnROMA++AFee)qJcGrY!M6W4j7VCN*c{P8%%pvFn
z4|Mk~YAt;T9noiX^P$f4oDm|n!oOfCLD=)}+t*Y9){X_L_0zrQ=j{~Z9p$P%e$}}8
zbSn{YygpYpp5U{#$5^dp)pbSxK+{4DI-t~3M_GDrQOq6iL^APn-^D+Ar$qYtO6DHW
zbp#o@AGGii^y#zIvs1=kR$Q=P)t+(d*i5O6;dJ#@T49PXPh8>wrDL>*Y>rjkJK@;v
zX?<zlkcSa!Sstt>c$Vi%IUS~U4YiE@^sBjT42E3L&Jo}vguEH!ZVT678(HrSl1T;N
zWCAQ9wsXt(x!W&{xT)>WZe>*l&jMmf!9PvF46m-na$jlib?Zz@xZfj(U`xmrj2h2x
z+?z&iuxQpbp0=IDN3o1uHn$Y$l)mo3!lo;h&9Ph;Pa33<p;Ds?c)L$INLk6`9W4Ym
zxmIk>B??4|Jd6?Ih}nDfUJTN7&K<au%KCin!XF=dy!DwC=}TB^A$|vKKJC>nm}LRI
zA1m_>uj72w<&#qA`0Oozs)<;l0eTnfXFfgrbTlz)v&_MCcZsp1U7u`mKqZ-c?4$ZN
zQ6Iy#`{gB6=`>%ge|8(79Iq<`*^wQGm;QRJ4v!<j4#$d@j)b+uvJYM^9r3{vgKaa&
zee8kaY0)oo>Zcjh4(mIPUUbxaUSi3?zm@YO?hcN7ye$%fLIOTSUTxY}B1>m>psp~z
z=Df_A@ilW|6OM~Yfc|3iY&sz{E{3@(`2kB(0s~68{~SR*T$K4<&Dz>@36JN&VOYFl
zWa7gw=lKIKlP^(vp6=xbzy}4AjaBE)X4m?<xQpTXchhfnd8Tf6g?T<2;1m>6HEg*W
z98>~AF63OK*EVbWy{;avCrNO8kYaDY6yn1)bj~4$1#LQE(8v>B0NvN2zsYHPUO0qL
zreEwho=+HBu$PyRCB)=NHrDNkxPmzTa+Jf@YfF`j%ER<61n|sFB)bbjzXV+)CY5&`
zjEr&}80OsItb*77Yv2ED+YEtna&Ug0>VM^hO3$+}bKbk&=bOqO;j9;qS;2?>m5qb9
z9UOYyfS@*A^Nfx|UMLHiI9SEK24B@55-YgDDHn)avO#3rV#SI9LBGye^gj~%Y<3s3
z?y)!qh-Ij~{;-g_$3x;hV1dC>r9CBnD_me@J%y35JxQ8U-=9;D-`0ps+{lz0PY!eK
zI(VEDWf@yn<te0A3KuU9NG`lBFyMh0XzN%`3+mrRvO+|csph=$dX8p;JDB``L^n9<
zQA(4X%x9;DHaafltiMV^$xR~Un(g_bNiJsMTWKi{>`hX$P0WD0UiXE1oQ1E#)2t=O
z<C#*XqlLZFG2tYu3~unQXTwi9E?Zc;?WyB<K5u2pp-slwt&8+}WVVmx)$+Xt({Mq_
z{P%tHbz@Wem&~%E95iK$ePPr<Fugw3<r+zxN%%*cSk>W{tA;ksbvZ#-csL(VMMXSq
z?LFrNJU$<8`uP2gFq;C>e0)U%;j5=~?a{opV95EVi<*DJ<E0nM@Tuy~i8_zDAH87=
z+ClF5x{@o|19|7v(*VZH(VFC~=_i*jLIS=E|5fHHnARk-2NuQd9tNc|gWf6G48}!o
z`G(ceW+z^KbnPOg-3d0Ai7Ii<AckIx21|s0lEM<6#E7@q-Ip>=Tkm(7x?}$*%tiv|
zDTR%7C0$T$>Xl3k;u5|b%k9E#dnkOrEHGgDQ5woew@H)IM=>`iSH|C%qx#K7qw>EC
z(4h{WN%q>-o!x~`1TVIPN7PK4t>kCp3s>g^%PmIS9dW$hS)-k?o{fV$TCUtuQL;Jm
zTx+pWBr~ij!0jB@!#vpw0DNS|!@LsuGI<kD2%lVYtvoBlqx3H7M;?I*N6_Md&RB$!
zLUieI9RM61g$7t=kpBjR`tQNP|1W2eVZ+|f4kDi}G#my|mfRCDQEMru84}*0+O=vb
zzYTe<VrqPGA3uHP)cf=gwKru>{$w`gR|UH{W$}cwK8yWyh1>VHQm@@G!vKDe;^e>6
zReEHp9UQn<yxHYX)uC?e4?I>2m{hw=1pxdMV$k`oPM3omz`Y~Xk9ur@#}k5a!nc#4
zE-)@ZJn&sSFZ9BmMgnFxp<P8}w>h>I1elSD!4QStJcn&WmGWq&*e6Y>%66PmrTHm^
z84q@0{F{^-k8gDieP)D~eJ0G310k%u{%iK~ar1@~<+lAUpUJy<wcF~1y7$t64|ft}
zu|M~oe0Mb-zt<(WQ&sI8;8n;T>dcHV#pRl4l*d=IVX>+fUVR2C8&!g57yzU4V4R3+
zb}QNbDehNag1BD3ieU-DYJ?q<lQci)EP*Cg3-bDWg#QS`N7N#&MaW+LhQ-OIV_uvA
z;QJn<0=`~x&u*=7JxYV2!b1A@l0Q=d4c%vh<hqMl4a|@zFIW~^2uZc0n%cX+(a~gN
z^@UrwP*1n+fgt`yU*=oEJzR`zAR}N@2#n)3s8~z-j6xHs%HDgj0@IK02;y%-HUEY(
zOWl38n{XKm5OkMBMzdqv5?%F#tsWEwc43I6Rs#KJ=>Z!a+RO;2;Y__aX524{628tB
zf)NgWP%O~G_VxF>2lI<XXU;vt%#&;HqMCfoGkuo3OHG;T>Hs0DiI*YS(q_-%E3DE`
zrBYDd@*(Cn1Q79fI^nR&!7yegjXl-l&g6((nY*y(v$dt8;6~B&fHKzvn1;tso=Y7}
zI(y#lx{0uglNkAw39pGT5^Haqdi!gRTw;D6Oe3kjE3j6R_08@ZBd-7uz+>7Lb5AH@
zBCAeHV}yb3s{4C%?i@IE(jcuQB$>@6br^BRvv9qCqcc=<d<?ql{-(Eb{T4UgVTIRH
zIXf3~XJ4Gcg;;ncJ5u*Yc>3cnXVZSb2C1DT*7W^6TT5<?6=e*HJ6cT?=rU2}rL$+n
zAK9ihve^6;x6#a$PAWT*o<(64e_M*=+-knsKCjF{y_a+xKh9kIh7oHU`7&R8-3IW(
zr-K>9oA}7>9BZkS-*mQ#^d=?0;XW}V1?`t_d4zOOloWvmy-#s`rGwJ`;mBd|^hr;#
zN-Es)d|-;G?%?3^QRwpZ&bEJ90z2lP1Ve%I|HixZ-1vDXu)iVbX#Hf`-I7w8HR~Dx
z`0)bHj2L-AeOv#s`t)t^ck=1zF{Lf|@1bwsF@XbQPN@vmirShEt1dnK#93+Gr4qP1
ze6+e+_^Cst>UriRiG6N>2SWvn|6p@HMHsu*x?Jud?LNI%YFT$h@D{Mgzle|%N}Aw$
z&|~`2`H-^9vcovaP=Rz<Kba`9Ke5%cXHDl$3;xvE^Ns`3N47QC$qCo=<=}x<GnSh2
zLaoFeXZJsE;5L>IzViSzTb%Jp<tX2F@38d`gbqiLWW|!{Vf6TWb)@3})1iRfwVZ8i
z25Hp!f#t5dY)6qXDy!a)<80UP?(q4RmO8yaDGNd|qvdc>{uJb$?oc0@{j1COA<oX>
zv4<>2F>IZcYa>*a@-t>%C;tTU)^Gb5xIaZ5FYaVw7VnPNf3|+t7l9wEzwGl}zfyOg
z&6(JH90#x-Px*|DD;<0RcxosJeQvKocJR^i4u|nyY!KEg%;hWv+oi(C0_rwh3~V$c
zrW}Np^!`?&TXHxcV(gy&_eRs%Ag>r~yRw9HvGt$r-u3+v7qf|uF)`05zNWkgj4k3W
z<naK#fo-o@GJ0MT59HwyhI%cFi@;=IU`<hM@!`uh2el-?N|B7DGvl+H*VtD4HhdoR
zh))b|>YO(%235r*M1MxU>14~kq}p*`o_r#G@+-Ivmbf)!;B*8FCpv7&9ueSwSEQcC
z)+p6X?gmaM`Iss=X=&)s8^F%qb?$^U7hY*9vJD!XEszxw7LbJxfNGx`%+e+65N}Ct
zcG@<=Q9;A?$)H<P4t#Wn&KW9fvZspKdB!4&_v{X`((ol(6PysJYGUB^X|X+A{##^Q
zoG}VeBX0z&*n!K!^-+KHW{j+*dj)%D_gMH7ZVlb9&`FWDA<}0tD3#)Ycsaa=vxdY<
zMUwXWmS?>Vc`t2_17qAX`iQdY-lQEZ2}t%i^(&<+2A}7OtXF8^z;I0sX;9#H2NniS
zu#bE0^)Y<h<Re;JcIe@nIxx0ixix;~vqZs5Iq}tKMK>)}>g95J93ArGU+WM#lo<2{
zJc{u%0{iG-{N+v0{WPl8TOtFfHCNG0SFrjC%?IXozkp|C)LrajPnSF7!w?-_;uK5Y
zj=Z@61dT$T;5HjBlx>Jqq#DEK5?|lZlNjltf6R3_PXF{Y(*4SY+p<mV<U1XG$Tg^6
zwif)3N<_N;!wS`H*AKOAQ9*0g0Hpo7^8OtRLu?-u_Hk)$xZIF!iQVhjtr2~|(|Aru
zkotf}?}I*RRl3K(SXydGjB4y*_Ks<77EHhX=Bv=VO{$zcDs?-2CvVuHbuS8^hmQDA
z!GV<LxA#UJ!ooWpm~p(u(G{{b!j{3cH!M=mo1P1G_DB?ixc(H#mukB;7wS|kWlQ+g
zsz6a#u3TCE6BzTenWaj8Fkw6VRe_gFGh22)f92dZy`gVqQwJ017kC~<Td$UcXtoF@
zg4FV)Ym~P<YPqkfnFVYNozXE{iDCHDA1Ukc!vQeC#frVg05`lC!0=<0X1Uh!(B1!i
z_&*T~6N=xO3)F7-bU07;)lUa+t4%MRnrv0CQ@HPxRkvkR1-C+f6;A&G9lqA1RB-QD
zQe%nDl*1IYZvo;-#MR3LW!#d_(TN8%b7ui@de38`nkAV=AiN&f4|3Ok9pw8PjcC-t
zXT%-NzW~PCxZ;+AD0h%;w}bbsw+;=kLu6`MFdS}Fd1^6h<w#aNZ1xR2sG^!TPt8j!
z`>boaNb*5DG+l0md8q6hO)Ak%zBoEjAiSO%M%!1b?FnyZ8vDHX77ixIw6lss385|F
z#Zb~y!3OXB_TGCMIc0lkX-gGv(nP8mVcTVx{MI)M`~$($sY=c^&cV+Kxpr%{>?W77
zKOmhF4jUs+5&QUFrXDNjXddRUS1Xir*A~#kQa@(;fntXGSMOIb?B)(^Xg$$O-r>i*
z%&{%P3(A)u9aUr^xO#l_%Z)bVOcPAj$F!P!AUF$wkMsaa$RgD|(5e@G%(2;^d`ye*
z?lm2qVWDp?nOt*xROX7~8;-3Wt1`goagG>cRHR#QrH%hG5@o^xi2&PVWcVIw1Sg5%
z208@#zBfCgBV5L~C-Cn}N8EnJnyBYpkQCfXAbDik^@4TOSg@Crp6R0^Y4KFXzD|_%
z?RM3}Ny_A948i_@?2Aa-1s8C(vao;-{3hy`E@y#Z)y1=2S3OUOqoUv(yajA|x=`2#
zQ}><YcNZi(aQAh2pMbaP_DEnL<}086v-E~r)4%FxyzKO*?OY`ndy755FmQ6@rxWRn
z5x-6NtqkRT??^?>pT7h91ZGuiDqtT|>4t!y6ga5Hp&y^7hyHr~9UJ6Cyd#DO^{4yq
zg5B@S*?K$$%W{5dnv0sDp3gjkx_OR26#GU6mx@3kuV^}FDL>*XffgcjHdAWM(!P^e
ztCZQRyJLYMOJCUBxp~{pXvTAYqGYO@qB?tSu|X<Cl~RXv%}OP%p-V6%?WgD7=1+;@
zHpAUBat+D$K^sOu1Z&x*-UN4(aU?7XzSY~kZ&L$u1|kA1)7o?2-gF#K^IKs=wmoil
z{%ihsnqWJ@99ze`r}xB~A91riMT(O-*0#h2FU3YB<_aO@P(p93I}x-r+ZZC*|IPMl
zLOr@w@b`{)FKV8;G>zoI*4z+uLPyNd@pa{C3hrJ7UzDM&>wPV(EYy7YKE6I1O)h&w
z(nMPBL4*h2aHKnjYnQ!wnQ};Z3j0`o8(8R;UKK?WC}}HKr5s$Bdk{aRbeoVP;^uyf
z>C*@hG#PCyxAdMBErfaS?AgOsI4Ri>h<FO*6HV|0B|%rNMi%?3u*5wvME#7)aF}aM
z8CI1A`|h>sVe<2*@=k^X=H&Xvb#E!Eavo$o={PP!d9&aOqIL;=iyQY@Sg|tOux6ym
z+DkDU6QzR=2mi%58NXxD@iX}wjf!w$ILyNkPnBuZLt<IVg;~ouO{}q^<G0&lP}Baw
zTf$HaQ-=Fa33;~qC<Q_yuth40Na<!mpt@X{WAmq;;&}byAC67%bOo(pL@#4^jNxK#
zFjS7S3s?~9FR$LB`g8ExV8aLpc6&Bd^HZhMWD#j5CO<BNv=WgW%`2Rr@cq@54^xCH
z7(cfietnBH*IN!cQK$bJsy6rf(si0Nb#{8y!ATI@JF>$XQ^}Imp4}ga@crP_<r#G%
z{m_lv-s#ipHyuasTaV#k4Q1wqz}U3VE&&b~Akz>_%}wWvRa9e37)q3;0+vQH^5ynz
zkyk&B!>wb87H?!<nutz`ZsVtGNDnhNb8|Ec;Y)&qGSd79iVabJr!YfcX{a}Y)UB2$
zgwD6xUV^UqNyR+Lm;deBLAKQR4oVYk{){GGoDKbnXGyuVVe`Rj<4#4`dz-P9Vc{Zy
z?H5~=5mxN=pVR6Y-U2QB8WV4;PBIH`r_@kwqfD)lpT?&Yv!g}_D_!AFVoCF>`bQ%{
z!m{vb2+ddMjP5;}i=jWD{Fq&r;DCf#oVhWi`2DO7<;`-eiL}pxedpJ*41Q=y&`VyU
z^TV(wpek9OSQ2Z{J^OaSS-*1{vX8O;TR$?ox4IYSQr1#AFcB7qV&B_^JH`q^&yLiE
zTs_v>2z_BT<#rGgu#lC{Hyy)P^wlDV*nmANb~V$#w`j(>AeNDmF#nw!>WVZl=7*k*
zC5*1+kj@kAy2$n|S~S`qdE6-07{ztQ8Q7!Iw65Z^|KZTMe?@;ni508dTKbh)76I&G
z2O{qHv^5Gfxn^@uh>FirW{|+18*>zrY(>v}mS?N_Qr)Jwr#t}H0e0tDJej&=df|i%
zG|Da@Pq4y}6nLOYO-^H(Px3oMwr|FgCH^y`KB4$F>$LE6|DZHsWMeRm{y}Ewl~WeZ
z9cOx$Al$5(&YVy5L?-Du_i_2@(qew%$<gVdC5!5Du6fz>$<o8@AjSIW(uU)l;OGB_
zxPapW?!*yZXj~O0e`i}@kyJD_=sq|Jzb@{YeoV-7{!Tg`{a-+B<A9SocX62MPsx$Z
z>92XNI3$>s{~y<#js|>sZ$8OrsZib%dHxoq3!pNpLtkvPrObGgZq?7t_HnxL%R%de
zT+mej%v)L96&cL|I*miRy4*RL_??hUST+#A5QPdj9OnITOhvc}FNWaaA+-B)2I)K=
z56t1I30~*sbV&t68fHb#>s3Qc_vlk4%7Ovn`r=vs%G^05?SN<XVB9;iZ?1XVWW7hq
zan*MXPzp@r3?*gbz<*GV(pY-T<{6v2Y!4V&O+vC_$7>xh#6E@rCM8OWd}&mL|FLrq
zRC%{zye0c~{9P0ew3x&U>JQxVRZgz1$0ScGRUnm(0Vj5B!~U_|OrSZ8gih~U)q|YV
zhb8EGak2qF)V6DG(T&_W;#|E!Ec{@=n8M}{N7eMoEHdR~pED}bUPMRSq|pIUrAa{V
z@NVkF5zm>H4e-I&Zb+GH%4Nuw=dlBLRzgK5WNq<OOObzVlUre6SQkZowQE~c=6fi7
zjtGuPCEyR1>+4}pE(w?SOsB5zs~z7?5;NSFrIRIii?R2i{#a##sfuru7K_R>k4;Vo
ztk3;!6>jxdo9W|SV1=hp?j%NT$Mi5G8rM=GxL+~_be!(#9hx`0E{XiZQFH^tF00K*
zi9iz@l$&C}x__<DzAZCBuCtw57^0wiKd+j7&EWknqzjnf=wJao>b#A#-m?zjVH5I~
zP&rEFgw(I0i7f3Y`QJxtS(-TCr`rfX?TvOOD)~!Bl0mQ$7)qcx?7pG<d(wX6?I~4V
z*Ytx%6JDtL52Ebm#_NIMJCt9xs=_=I5prlE-?%V1ZRe68LK*y)YPFoo?2o9^r7EYy
zAaUilTe3vNTq=XlkoUKK!*K7q-}mfk<xHmz+7>eO%x@Z}(VR=dCpF!I(S)cpFr=v%
zYL?^MAtMmT6s_C2w3yM~el*ZfEeiEi))@qX8tFBYb)$6t$_jDWu1%-enmC$BsERx;
zN~l>8h1sle3X5bv6m#h)zVa``b!LhsPVp4gx(*A$5^K2H4ks49_nE3jJ;xwMFpWxf
ztjDBa`|RH3M30xTq%u^#35*rXt{N4k{{H2745MW%iM={H^^L6x;}|>HB8*%XLCOUy
z_7TJHBn{5CmD3yI3JQD+f=dOVPhW`$wJq|k^(mydxbZ^e{)Mq8s9#wap~w(;Z4bWJ
zZ@JT)#?}8)Rpfz+9Dlf$V6o;X+cWbGO{!@ixc_}5(4)%|d+K``7%OZob)%)>dK9$S
z>!**qF={PP%e&w;-S@Kdaf1T79T_AKFX2m(+~l}*+V2wiUVRgaed&yem{Et>d54Q1
z5jek?qJAO;oqy~Zc>NU6bJLK;MV0s~BVdURV9gc&e<btD9H%J7rTsi(CZ^9VwTHRq
zPImvpxrsf4Z*A$^AT>@6eLX>ciu7G-oipZMN%zV(m7N-Im+)Xxh|5f0*aqAG42n{&
z2B{b9Eh9=iy>?y`E^yhZJe*YjdrWo4oo##|&_CB$AR{<hVuTiAQ#?|Tta>8wSZXGx
z=+0n%Tjs~FSXzW)@;*lKeyZn}Om-q_B~Rf<wA^UHwZRjIQ<{ToMHwgl)J<TAWS`Ya
zxWh<b*4B6?U;ozfw*b7<X8~=0A|l5NJ(sR_;x(~paiv1fwUeAs-4Nk-O~xqV5mPL8
z3w@M;stEr~+uh$YV(uy8>63?OqYr}?CnpeCqQ;b3q<0+J&o+{5v^?#fod@=92S;$=
zUwm23+)j%`Ajru{LqNpTT4nI6uT0`j@jG@%`dJ72d59N0oo(;+&S%dB)#F!Io0Mc`
zkh)Z8+~4aKXYyXP?h?hWD0|D=Ju&UQ1Tj&oix*{Z#uY`3UyZ+q0;=)L&a-)b55rv*
z?NRZ!(zo|t*xuCj?T)|@fhDi#WcRzKd^fcI3mLr}^!OS@mj#`U3*lu6{b`Fj2Q<ok
zLN{SMi1csZW`!<1`xXt8olll<Prp=gkv?Sg(YG)C%sm=bAe_JUe&%Zs_v2|%>|_*@
z5$64A-^kcHp9z<C23H__tT%-3yXeModGpnV1bQKE^VOfUF?+ARn%NIKQ`(uJyQr-e
zWb2Lx;>&f@3k}sZyArYtFz?0q(fKeA*jxzd53tbA*FH^@zV{>4ts3}$SbN5D{HZk$
zR;XK={(dRr0#$M|wJd*SxMmUG`utm9utL^hqD$egnl_t$K#Q3kYOl>&nv3$W?|z3!
zEuO|U#UY)@Zow-Lh{>0u8kYB{kMNH?m~f6`@_?rv{y2Z{6$;<x^KTld9Bz+M0;*%i
z0;Y(uV$W6l>V;4CQQ6C?X?}Ipcsf#87jw@h$|1}vWK`W-CVLv*M1%XaC#Z>BM-}T@
z0ai$v94$*!T}r+B0erpM>sQ|cT4`9Mzlz%EdWrPGD?_NF-7R=0+^t$op%K!VtrvJS
zS-G-Qww-;epb_aDu9;}1YuCKjU7!{zuUC@&uHB#I9)1;d$Y*4^LcT3*=%cpFZ@A2e
zsH<12Df(qABr?%9(O}oh8Tk}f;EF_KIFj?Dc56yq%=VQ;gxFr(JVbyUW>g6^q#C*z
z1~ggz<7u`~UfEEx6{{%n_QjjvKZ#!G&xW%5kx#D)R52x|ign2kjTc%6ckg$xj&x9T
zydt=vyHBn24w>z$I%<;p_uQEJjS*z0Sv|5mqUd$K(%$PBiLYGd<Sn}tqU0!73MZ|Q
ztFLZP?*r6R9&Nds2dJvxBJhnN91cFx-E^qNeBFf^I)vLIaGOk$wQCL4JdSMEa?q2Y
zYFSz5frao5^)lZ5;Xt>)W%A<N;dqPen2%e^qV9*0r>klYb`}jPVISSoC3~I5@!F^r
zYPWB9>b&a5p-5_gIvMK8u$Iok)Whmw@Hmd~+Qju0$#*gIG8i%8FhvOP>x%7N5sc7%
zmw)EwHK5EkW;xvl@s`h5D_>bm(L=KMbXOq^-L*}(RqdeE0y|0LltXbLP6s(xq!4uA
zRV(%La`mACJ*CG8O^gn|QnWdf$CLNu;<*wrF{aQG$U_}mL6th&#qRyu+<ceLg`ZZX
zn1ry2H#rq?;c$lX8zq+ZR}PJ2M&uE7c|l$8{`OVT;+^8YN>Aef`JtMb`Y&03dU(jj
zR~=^R37<(Gq_!rF_QvH>2S+I=<eESs3nJ;PLA^4g(%_8-KkbS>t7!RhX>Zqo!B>5-
z3V~j{0JPgIBlKuN24+}pK67RiB+3O$%AHsBFpE2>iy)yxFLye*#1BR?8X}GH%~iaC
z>)trq88&rog*<%nXE3(*rDBj%Kxa!}gHZ3DBCf!hoS;zXm@YKj>`(>swm8n4JwI{#
zHb2yDqXw`L3Vr!K@d7LLV=*tu2-eILeI}z}{o<_~X2v$*xfl}K=zI_J@?Xhcc-eg9
zl>&70$&1$w2Pe^K&guD6R-C(S3cP)H&d2M_EXoK&v3QB73R;2u*`1+v#mCfq8kaOZ
zkxN3WC)nUfk!X(QxAz}tiL?zys94{1?9?&y@-B<jO>;$7?((kRu}h;V=XkBIyfEHr
z>v!J+H*c86<0HLG4tfak<MI-{<H9P5es`Ms$B@`tLZY-9B};$by=npUev8ykMAFiZ
z&7wGad+6NkOWP;KAb-s>50l=b)sZRZ7e3%`eDr<0|3ThdHE1dB$pX#b&hMHZYb0+n
zJD3HH6XlLg_@SDvWT!bjg8}@wspZ!uQsuu*Es_+n{cHXqn==4VLn~Td`_ap_>auY>
zrT_rY3YI;wGLzH9xetI4*E2Z6qg+xucidS(NHN`i+mW09Txx7rrk>L8m<HCaYJh3S
QnE(K|mcC{Q%qr}E0DSMu)c^nh

literal 0
HcmV?d00001

diff --git a/ej2-vue/pivotview/getting-started.md b/ej2-vue/pivotview/getting-started.md
index f51bf79b3..3de56e3fe 100644
--- a/ej2-vue/pivotview/getting-started.md
+++ b/ej2-vue/pivotview/getting-started.md
@@ -379,7 +379,7 @@ The calculated field feature allows user to insert or add a new calculated field
 > If the `CalculatedField` module is not injected, the calculated field popup will not be rendered with the pivot table component. By default, the calculated fields created through code-behind are only added to the field list and calculated field dialog UI. To display the calculated field in the pivot table UI, it must be added to the [`values`](https://ej2.syncfusion.com/vue/documentation/api/pivotview/dataSourceSettings/#values) property, as shown in the code below. Additionally, calculated fields can only be added to the value axis.
 
 {% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue) %}{% raw %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}{% raw %}
 
 {% include code-snippet/pivot-grid/default-cs93/app-composition.vue %}
 
diff --git a/ej2-vue/spreadsheet/docker-deployment.md b/ej2-vue/spreadsheet/docker-deployment.md
new file mode 100644
index 000000000..202623bb2
--- /dev/null
+++ b/ej2-vue/spreadsheet/docker-deployment.md
@@ -0,0 +1,154 @@
+---
+layout: post
+title: Docker image deployment in Vue Spreadsheet component | Syncfusion
+description: Learn here all about Docker image deployment in Syncfusion Vue Spreadsheet component of Syncfusion Essential JS 2 and more.
+platform: ej2-vue
+control: Docker deployment 
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Docker Image Overview in Vue Spreadsheet component
+
+The [**Syncfusion Spreadsheet (also known as Excel Viewer)**](https://www.syncfusion.com/vue-components/vue-spreadsheet) is a feature-rich control for organizing and analyzing data in a tabular format. It provides all the common Excel features, including data binding, selection, editing, formatting, resizing, sorting, filtering, importing, and exporting Excel documents.
+
+This Docker image is the pre-defined Docker container for Syncfusion's Spreadsheet backend functionalities. This server-side Web API project targets ASP.NET Core 6.0.
+
+You can deploy it quickly to your infrastructure. If you want to add new functionality or customize any existing functionalities, create your own Docker file by referencing the existing [Spreadsheet Docker project](https://github.com/SyncfusionExamples/Spreadsheet-Server-Docker).
+
+The Spreadsheet is supported on the [JavaScript](https://www.syncfusion.com/javascript-ui-controls), [Angular](https://www.syncfusion.com/angular-ui-components), [React](https://www.syncfusion.com/react-ui-components), [Vue](https://www.syncfusion.com/vue-ui-components), [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls), and [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls) platforms.
+
+## Prerequisites
+
+Have [`Docker`](https://www.docker.com/products/container-runtime#/download) installed in your environment:
+
+* On Windows, install [`Docker for Windows`](https://hub.docker.com/editions/community/docker-ce-desktop-windows).
+* On macOS, install [`Docker for Mac`](https://docs.docker.com/desktop/install/mac-install/).
+
+## How to deploy the Spreadsheet Docker Image
+
+**Step 1:** Pull the spreadsheet-server image from Docker Hub.
+
+```console
+docker pull syncfusion/spreadsheet-server
+```
+
+**Step 2:** Create the `docker-compose.yml` file with the following code in your file system.
+
+```yaml
+version: '3.4' 
+
+services:
+  spreadsheet-server:
+    image: syncfusion/spreadsheet-server:latest
+    environment:
+      # Provide your license key for activation
+      SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY
+    ports:
+      - "6002:80"
+```
+
+**Note:** The Spreadsheet is a commercial product. It requires a valid [license key](https://help.syncfusion.com/common/essential-studio/licensing/licensing-faq/where-can-i-get-a-license-key) to use in a production environment. Please replace `YOUR_LICENSE_KEY` with the valid license key in the `docker-compose.yml` file.
+
+**Step 3:** In a terminal tab, navigate to the directory where you've placed the `docker-compose.yml` file and execute the following:
+
+```console
+docker-compose up
+```
+
+Now the Spreadsheet server Docker instance runs on localhost with the provided port number `http://localhost:6002`. Open this link in a browser and navigate to the Spreadsheet Web API open and save service at `http://localhost:6002/api/spreadsheet/open` and `http://localhost:6002/api/spreadsheet/save`.
+
+**Step 4:** Append the URLs of the Docker instance running services to the [`openUrl`](https://helpej2.syncfusion.com/vue/documentation/api/spreadsheet/#openurl) property as `http://localhost:6002/api/spreadsheet/open` and the [`saveUrl`](https://helpej2.syncfusion.com/vue/documentation/api/spreadsheet/#saveurl) property as `http://localhost:6002/api/spreadsheet/save` in the client-side Spreadsheet component. For more information on how to get started with the Spreadsheet component, refer to this [`getting started page.`](https://ej2.syncfusion.com/vue/documentation/spreadsheet/getting-started).
+
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+<template>
+  <ejs-spreadsheet :openUrl="openUrl" :saveUrl="saveUrl" :allowOpen="true" :allowSave="true" ></ejs-spreadsheet>
+</template>
+
+<script setup>
+import { SpreadsheetComponent as EjsSpreadsheet } from "@syncfusion/ej2-vue-spreadsheet";
+
+const openUrl = 'http://localhost:6002/api/spreadsheet/open';
+const saveUrl = 'http://localhost:6002/api/spreadsheet/save';
+
+</script>
+
+<style>
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
+@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
+</style>
+
+{% endhighlight %}
+
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+<template>
+  <ejs-spreadsheet :openUrl="openUrl" :saveUrl="saveUrl" :allowOpen="true" :allowSave="true" ></ejs-spreadsheet>
+</template>
+
+<script>
+import { SpreadsheetComponent } from "@syncfusion/ej2-vue-spreadsheet";
+
+export default {
+  name: "App",
+  components: {
+    "ejs-spreadsheet": SpreadsheetComponent
+  },
+  data: () => {
+    return {
+        openUrl = 'http://localhost:6002/api/spreadsheet/open';
+        saveUrl = 'http://localhost:6002/api/spreadsheet/save';
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style>
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
+@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
+</style>
+
+{% endhighlight %}
+{% endtabs %}
+
+## How to configure different cultures using a Docker compose file
+
+By default, the Spreadsheet Docker container is generated in the `en_US` culture. You can configure different cultures using the `LC_ALL`, `LANGUAGE`, and `LANG` environment variables in the `docker-compose.yml` file. These environment variables are replaced in the Docker file to set the specified culture for the Spreadsheet server.
+
+```yaml
+version: '3.4' 
+
+services:
+  spreadsheet-server:
+    image: syncfusion/spreadsheet-server:latest
+    environment:
+      # Provide your license key for activation
+      SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY
+      # Specify the culture to configure for the Spreadsheet server
+      LC_ALL: de_DE.UTF-8
+      LANGUAGE: de_DE.UTF-8
+      LANG: de_DE.UTF-8
+    ports:
+      - "6002:80"
+```
+
+Please refer to these getting started pages to create a Spreadsheet in [`Javascript`](https://ej2.syncfusion.com/javascript/documentation/spreadsheet/getting-started), [`Angular`](https://ej2.syncfusion.com/angular/documentation/spreadsheet/getting-started), [`React`](https://ej2.syncfusion.com/react/documentation/spreadsheet/getting-started), [`ASP.NET Core`](https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/getting-started-core), and [`ASP.NET MVC`](https://ej2.syncfusion.com/aspnetmvc/documentation/spreadsheet/getting-started-mvc).
\ No newline at end of file
diff --git a/ej2-vue/spreadsheet/open-save.md b/ej2-vue/spreadsheet/open-save.md
index b8854570f..e83915400 100644
--- a/ej2-vue/spreadsheet/open-save.md
+++ b/ej2-vue/spreadsheet/open-save.md
@@ -414,7 +414,6 @@ The following code example shows how to save the spreadsheet data as base64 stri
         
 {% previewsample "page.domainurl/code-snippet/spreadsheet/base-64-string" %}
 
-
 ### To save an Excel file to a server
 
 By default, the Spreadsheet component saves the Excel file and downloads it to the local file system. If you want to save an Excel file to a server location, you need to configure the server endpoint to convert the spreadsheet data into a file stream and save it to the server location. To do this, first, on the client side, you must convert the spreadsheet data into `JSON` format using the [saveAsJson](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#saveasjson) method and send it to the server endpoint. On the server endpoint, you should convert the received spreadsheet `JSON` data into a file stream using `Syncfusion.EJ2.Spreadsheet.AspNet.Core`, then convert the stream into an Excel file, and finally save it to the server location.
@@ -499,7 +498,6 @@ Please find below the code to retrieve blob data from the Spreadsheet component
         
 {% previewsample "page.domainurl/code-snippet/spreadsheet/save-as-blobdata-cs1" %}
 
-
 ### Supported file formats
 
 The following list of Excel file formats are supported in Spreadsheet:
@@ -577,4 +575,5 @@ You can refer to our [Vue Spreadsheet](https://www.syncfusion.com/vue-ui-compone
 
 * [Filtering](./filter)
 * [Sorting](./sort)
-* [Hyperlink](./link)
\ No newline at end of file
+* [Hyperlink](./link)
+* [Docker Image](./docker-deployment)
\ No newline at end of file