From 2ad2a5a48de184ca6c5dba8114a2e8e6d77d0e93 Mon Sep 17 00:00:00 2001
From: Hariharan Pandi <hariharan.pandi@syncfusion.com>
Date: Mon, 24 Aug 2026 17:32:07 +0530
Subject: [PATCH] 1048453: Solved broken sample links for Globalization and
 Workbook JSON object

---
 .../Excel/Spreadsheet/Vue/global-local.md     | 208 +-------------
 .../Vue/how-to/create-a-object-structure.md   |  64 +----
 .../vue/globalization-cs1/index.html          |   2 +-
 .../vue/globalization-cs1/systemjs.config.js  |   2 +-
 .../open-from-json-cs1/app-composition.vue    |  28 ++
 .../vue/open-from-json-cs1/app.vue            |  36 +++
 .../vue/open-from-json-cs1/data.json          | 257 ++++++++++++++++++
 .../vue/open-from-json-cs1/index.css          |  11 +
 .../vue/open-from-json-cs1/index.html         |  23 ++
 .../vue/open-from-json-cs1/index.js           |  18 ++
 .../vue/open-from-json-cs1/systemjs.config.js |  49 ++++
 11 files changed, 433 insertions(+), 265 deletions(-)
 create mode 100644 Document-Processing/code-snippet/spreadsheet/vue/open-from-json-cs1/app-composition.vue
 create mode 100644 Document-Processing/code-snippet/spreadsheet/vue/open-from-json-cs1/app.vue
 create mode 100644 Document-Processing/code-snippet/spreadsheet/vue/open-from-json-cs1/data.json
 create mode 100644 Document-Processing/code-snippet/spreadsheet/vue/open-from-json-cs1/index.css
 create mode 100644 Document-Processing/code-snippet/spreadsheet/vue/open-from-json-cs1/index.html
 create mode 100644 Document-Processing/code-snippet/spreadsheet/vue/open-from-json-cs1/index.js
 create mode 100644 Document-Processing/code-snippet/spreadsheet/vue/open-from-json-cs1/systemjs.config.js

diff --git a/Document-Processing/Excel/Spreadsheet/Vue/global-local.md b/Document-Processing/Excel/Spreadsheet/Vue/global-local.md
index e8b3031508..1833db73f8 100644
--- a/Document-Processing/Excel/Spreadsheet/Vue/global-local.md
+++ b/Document-Processing/Excel/Spreadsheet/Vue/global-local.md
@@ -383,14 +383,14 @@ The following example demonstrates the Spreadsheet in `French` culture. In the b
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/spreadsheet/vue/local-data-binding-cs2/app-composition.vue %}
+{% include code-snippet/spreadsheet/vue/globalization-cs1/app-composition.vue %}
 {% endhighlight %}
 {% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% include code-snippet/spreadsheet/vue/local-data-binding-cs2/app.vue %}
+{% include code-snippet/spreadsheet/vue/globalization-cs1/app.vue %}
 {% endhighlight %}
 {% endtabs %}
         
-{% previewsample "/document-processing/code-snippet/spreadsheet/vue/local-data-binding-cs2" %}
+{% previewsample "/document-processing/code-snippet/spreadsheet/vue/globalization-cs1" %}
 
 ## Internationalization
 
@@ -400,210 +400,14 @@ The following example demonstrates the Spreadsheet in French [ `fr-CH`] culture.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-<template>
-  <ejs-spreadsheet ref="spreadsheet" locale="fr-CH" :created="created">
-    <e-sheets>
-      <e-sheet>
-        <e-ranges>
-          <e-range :dataSource="dataSource"></e-range>
-        </e-ranges>
-      </e-sheet>
-    </e-sheets>
-  </ejs-spreadsheet>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import {
-  L10n,
-  setCulture,
-  setCurrencyCode,
-  loadCldr,
-} from "@syncfusion/ej2-base";
-import { SpreadsheetComponent as EjsSpreadsheet, RangesDirective as ERanges, RangeDirective as ERange, SheetsDirective as ESheets, SheetDirective as ESheet } from "@syncfusion/ej2-vue-spreadsheet";
-import { defaultData } from './data.js';
-
-L10n.load({
-    'fr-CH': {
-        'spreadsheet': {
-            'File': 'Fichier',
-            'Home': 'Accueil',
-            'Insert': 'Insérer',
-            'Formulas': 'Formules',
-            'Data': 'Les données',
-            'View': 'Vue',
-            'Cut': 'Coupe',
-            'Copy': 'Copie',
-            'Paste': 'Pâte',
-            'PasteSpecial': 'Pâte spéciale',
-            'All': 'Tous les',
-            'Values': 'Valeurs',
-            'Formats': 'Les formats',
-            'Font': 'fonte',
-            'FontSize': 'Taille de police',
-            'Bold': 'Audacieux',
-            'Italic': 'Italique',
-            'Underline': 'Souligner',
-            'Strikethrough': 'Barré',
-            'TextColor': 'Couleur du texte',
-            'FillColor': 'La couleur de remplissage',
-            'HorizontalAlignment': 'Alignement horizontal',
-            'AlignLeft': 'Alignez à gauche',
-            'AlignCenter': 'centre',
-            'AlignRight': 'Aligner à droite',
-            'VerticalAlignment': 'Alignement vertical',
-            'AlignTop': 'Aligner en haut',
-            'AlignMiddle': 'Aligner le milieu',
-            'AlignBottom': 'Aligner le bas',
-            'InsertFunction': 'Insérer une fonction',
-            'Delete': 'Effacer',
-            'Rename': 'Rebaptiser',
-            'Hide': 'Cacher',
-            'Unhide': 'Démasquer',
-            'NumberFormat': 'Nombre Format',
-        }
-    }
-});
-import * as numberingSystems from "./numberingSystems.json";
-import * as gregorian from "./ca-gregorian.json";
-import * as numbers from "./numbers.json";
-import * as timeZoneNames from "./timeZoneNames.json";
-import * as currencies from "./currencies.json";
-
-loadCldr(numberingSystems, gregorian, numbers, timeZoneNames, currencies);
-setCulture("fr-CH");
-setCurrencyCode("EUR");
-
-const spreadsheet = ref(null);
-const dataSource = defaultData;
-const created = function () {
-  //Applies cell and number formatting to specified range of the active sheet
-  spreadsheet.value.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:F1');
-  spreadsheet.value.numberFormat('$#,##0.00', 'F2:F11');
-}
-</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>
-
+{% include code-snippet/spreadsheet/vue/globalization-cs1/app-composition.vue %}
 {% endhighlight %}
 {% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-<template>
-  <ejs-spreadsheet ref="spreadsheet" locale="fr-CH" :created="created">
-    <e-sheets>
-      <e-sheet>
-        <e-ranges>
-          <e-range :dataSource="dataSource"></e-range>
-        </e-ranges>
-      </e-sheet>
-    </e-sheets>
-  </ejs-spreadsheet>
-</template>
-
-<script>
-import {
-  L10n,
-  setCulture,
-  setCurrencyCode,
-  loadCldr,
-} from "@syncfusion/ej2-base";
-import { SpreadsheetComponent, RangesDirective, RangeDirective, SheetsDirective, SheetDirective } from "@syncfusion/ej2-vue-spreadsheet";
-import { defaultData } from './data.js';
-
-L10n.load({
-    'fr-CH': {
-        'spreadsheet': {
-            'File': 'Fichier',
-            'Home': 'Accueil',
-            'Insert': 'Insérer',
-            'Formulas': 'Formules',
-            'Data': 'Les données',
-            'View': 'Vue',
-            'Cut': 'Coupe',
-            'Copy': 'Copie',
-            'Paste': 'Pâte',
-            'PasteSpecial': 'Pâte spéciale',
-            'All': 'Tous les',
-            'Values': 'Valeurs',
-            'Formats': 'Les formats',
-            'Font': 'fonte',
-            'FontSize': 'Taille de police',
-            'Bold': 'Audacieux',
-            'Italic': 'Italique',
-            'Underline': 'Souligner',
-            'Strikethrough': 'Barré',
-            'TextColor': 'Couleur du texte',
-            'FillColor': 'La couleur de remplissage',
-            'HorizontalAlignment': 'Alignement horizontal',
-            'AlignLeft': 'Alignez à gauche',
-            'AlignCenter': 'centre',
-            'AlignRight': 'Aligner à droite',
-            'VerticalAlignment': 'Alignement vertical',
-            'AlignTop': 'Aligner en haut',
-            'AlignMiddle': 'Aligner le milieu',
-            'AlignBottom': 'Aligner le bas',
-            'InsertFunction': 'Insérer une fonction',
-            'Delete': 'Effacer',
-            'Rename': 'Rebaptiser',
-            'Hide': 'Cacher',
-            'Unhide': 'Démasquer',
-            'NumberFormat': 'Nombre Format',
-        }
-    }
-});
-import * as numberingSystems from "./numberingSystems.json";
-import * as gregorian from "./ca-gregorian.json";
-import * as numbers from "./numbers.json";
-import * as timeZoneNames from "./timeZoneNames.json";
-import * as currencies from "./currencies.json";
-
-loadCldr(numberingSystems, gregorian, numbers, timeZoneNames, currencies);
-setCulture("fr-CH");
-setCurrencyCode("EUR");
-
-export default {
-   data: () => {
-    return {
-      dataSource: defaultData
-    }
-  },
-  methods: {
-  created: function () {
-    let spreadsheet = this.$refs.spreadsheet;
-    //Applies cell and number formatting to specified range of the active sheet
-    spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:F1');
-    spreadsheet.numberFormat('$#,##0.00', 'F2:F11');
-    }
-  }
-}
-</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>
-
+{% include code-snippet/spreadsheet/vue/globalization-cs1/app.vue %}
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "/document-processing/code-snippet/spreadsheet/vue/local-data-binding-cs2" %}
+{% previewsample "/document-processing/code-snippet/spreadsheet/vue/globalization-cs1" %}
 
 ## Right to left (RTL)
 
diff --git a/Document-Processing/Excel/Spreadsheet/Vue/how-to/create-a-object-structure.md b/Document-Processing/Excel/Spreadsheet/Vue/how-to/create-a-object-structure.md
index 2fe65f9e9d..597e2a729f 100644
--- a/Document-Processing/Excel/Spreadsheet/Vue/how-to/create-a-object-structure.md
+++ b/Document-Processing/Excel/Spreadsheet/Vue/how-to/create-a-object-structure.md
@@ -151,69 +151,11 @@ In the following code, the JSON structure is passed to the `openFromJson` method
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-<template>
-   <ejs-spreadsheet ref="spreadsheet" :created="created"></ejs-spreadsheet>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import { SpreadsheetComponent as EjsSpreadsheet } from "@syncfusion/ej2-vue-spreadsheet";
-import { jsonData }  from './data.json';
-
-const spreadsheet = ref(null);
-const created = function () {
-  spreadsheet.value.openFromJson({ file: jsonData });
-}
-</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>
-
+{% include code-snippet/spreadsheet/vue/open-from-json-cs1/app-composition.vue %}
 {% endhighlight %}
 {% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-<template>
-   <ejs-spreadsheet ref="spreadsheet" :created="created"></ejs-spreadsheet>
-</template>
-
-<script>
-import { SpreadsheetComponent } from "@syncfusion/ej2-vue-spreadsheet";
-import { jsonData }  from './data.json';
-
-export default {
-  components: {
-    'ejs-spreadsheet': SpreadsheetComponent
-  },
-  methods: {
-    created: function () {
-        let spreadsheet = this.$refs.spreadsheet;
-        spreadsheet.openFromJson({ file: jsonData });
-    }
-  }
-}
-</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>
-
+{% include code-snippet/spreadsheet/vue/open-from-json-cs1/app.vue %}
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "/document-processing/code-snippet/spreadsheet/vue/cell-data-binding-cs1" %}
\ No newline at end of file
+{% previewsample "/document-processing/code-snippet/spreadsheet/vue/open-from-json-cs1" %}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/vue/globalization-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/vue/globalization-cs1/index.html
index e08e8e48c2..6bbb3bc243 100644
--- a/Document-Processing/code-snippet/spreadsheet/vue/globalization-cs1/index.html
+++ b/Document-Processing/code-snippet/spreadsheet/vue/globalization-cs1/index.html
@@ -10,7 +10,7 @@
     <meta name="description" content="Typescript UI Controls" />
     <meta name="author" content="Syncfusion" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
-    <link href="https://cdn.syncfusion.com/ej2/27.1.48/tailwind3.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css" rel="stylesheet" />
     <link href="index.css" rel="stylesheet" />
     <script src="systemjs.config.js"></script>
 </head>
diff --git a/Document-Processing/code-snippet/spreadsheet/vue/globalization-cs1/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/vue/globalization-cs1/systemjs.config.js
index 6a35f162f3..58e4d4e7ae 100644
--- a/Document-Processing/code-snippet/spreadsheet/vue/globalization-cs1/systemjs.config.js
+++ b/Document-Processing/code-snippet/spreadsheet/vue/globalization-cs1/systemjs.config.js
@@ -16,7 +16,7 @@ System.config({
         '*.json': { loader: 'plugin-json' }
     },
     paths: {
-        "syncfusion:": "https://cdn.syncfusion.com/ej2/27.1.48/"
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/33.1.44/"
     },
     map: {
         typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
diff --git a/Document-Processing/code-snippet/spreadsheet/vue/open-from-json-cs1/app-composition.vue b/Document-Processing/code-snippet/spreadsheet/vue/open-from-json-cs1/app-composition.vue
new file mode 100644
index 0000000000..c25385f247
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/vue/open-from-json-cs1/app-composition.vue
@@ -0,0 +1,28 @@
+<template>
+  <ejs-spreadsheet ref="spreadsheet" :created="created"></ejs-spreadsheet>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { SpreadsheetComponent as EjsSpreadsheet } from '@syncfusion/ej2-vue-spreadsheet';
+import { jsonData } from './data.json';
+
+const spreadsheet = ref(null);
+
+const created = function () {
+  // Load workbook JSON data into the Spreadsheet using openFromJson.
+  spreadsheet.value.openFromJson({ file: jsonData });
+}
+</script>
+
+<style>
+@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/tailwind3.css';
+</style>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/vue/open-from-json-cs1/app.vue b/Document-Processing/code-snippet/spreadsheet/vue/open-from-json-cs1/app.vue
new file mode 100644
index 0000000000..e3715e17ec
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/vue/open-from-json-cs1/app.vue
@@ -0,0 +1,36 @@
+<template>
+  <ejs-spreadsheet ref="spreadsheet" :created="created"></ejs-spreadsheet>
+</template>
+
+<script>
+import { SpreadsheetComponent } from '@syncfusion/ej2-vue-spreadsheet';
+import { jsonData } from './data.json';
+
+export default {
+  name: 'App',
+  components: {
+    'ejs-spreadsheet': SpreadsheetComponent
+  },
+  methods: {
+    created: function () {
+      // Load workbook JSON data into the Spreadsheet using openFromJson.
+      this.$refs.spreadsheet.openFromJson({ file: jsonData });
+      // Apply additional styling after loading the JSON data.
+      this.$refs.spreadsheet.cellFormat({ verticalAlign: 'middle' }, 'A1:D11');
+      this.$refs.spreadsheet.cellFormat({ verticalAlign: 'middle' }, 'A1:F11');
+    }
+  }
+}
+</script>
+
+<style>
+@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/tailwind3.css';
+</style>
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/vue/open-from-json-cs1/data.json b/Document-Processing/code-snippet/spreadsheet/vue/open-from-json-cs1/data.json
new file mode 100644
index 0000000000..f155055110
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/vue/open-from-json-cs1/data.json
@@ -0,0 +1,257 @@
+{
+  "Workbook": {
+    "sheets": [
+      {
+        "name": "Employee Info",
+        "columns": [
+          { "width": 100 },
+          { "width": 160 },
+          { "width": 140 },
+          { "width": 120 }
+        ],
+        "rows": [
+          {
+            "cells": [
+              { "value": "Employee ID", "style": { "fontWeight": "bold", "textAlign": "center" } },
+              { "value": "Name", "style": { "fontWeight": "bold", "textAlign": "center" } },
+              { "value": "Department", "style": { "fontWeight": "bold", "textAlign": "center" } },
+              { "value": "Join Date", "style": { "fontWeight": "bold", "textAlign": "center" } }
+            ]
+          },
+          {
+            "cells": [
+              { "value": "EMP001" },
+              { "value": "Romona Heaslip" },
+              { "value": "Engineering" },
+              { "value": "2022-01-15", "format": "yyyy-mm-dd" }
+            ]
+          },
+          {
+            "cells": [
+              { "value": "EMP002" },
+              { "value": "Clare Batterton" },
+              { "value": "Marketing" },
+              { "value": "2021-11-03", "format": "yyyy-mm-dd" }
+            ]
+          },
+          {
+            "cells": [
+              { "value": "EMP003" },
+              { "value": "Eamon Traise" },
+              { "value": "Sales" },
+              { "value": "2023-03-22", "format": "yyyy-mm-dd" }
+            ]
+          },
+          {
+            "cells": [
+              { "value": "EMP004" },
+              { "value": "Julius Gorner" },
+              { "value": "Finance" },
+              { "value": "2020-08-10", "format": "yyyy-mm-dd" }
+            ]
+          },
+          {
+            "cells": [
+              { "value": "EMP005" },
+              { "value": "Jenna Schoolfield" },
+              { "value": "Human Resources" },
+              { "value": "2019-06-18", "format": "yyyy-mm-dd" }
+            ]
+          },
+          {
+            "cells": [
+              { "value": "EMP006" },
+              { "value": "Marylynne Harring" },
+              { "value": "Operations" },
+              { "value": "2022-09-11", "format": "yyyy-mm-dd" }
+            ]
+          },
+          {
+            "cells": [
+              { "value": "EMP007" },
+              { "value": "Vilhelmina Leipelt" },
+              { "value": "Engineering" },
+              { "value": "2021-05-06", "format": "yyyy-mm-dd" }
+            ]
+          },
+          {
+            "cells": [
+              { "value": "EMP008" },
+              { "value": "Barby Heisler" },
+              { "value": "Customer Support" },
+              { "value": "2024-01-08", "format": "yyyy-mm-dd" }
+            ]
+          },
+          {
+            "cells": [
+              { "value": "EMP009" },
+              { "value": "Karyn Boik" },
+              { "value": "Marketing" },
+              { "value": "2020-12-01", "format": "yyyy-mm-dd" }
+            ]
+          },
+          {
+            "cells": [
+              { "value": "EMP010" },
+              { "value": "Jeanette Pamplin" },
+              { "value": "Sales" },
+              { "value": "2023-07-19", "format": "yyyy-mm-dd" }
+            ]
+          },
+          {
+            "cells": [
+              { "value": "EMP011" },
+              { "value": "Cristi Espinos" },
+              { "value": "Engineering" },
+              { "value": "2022-12-14", "format": "yyyy-mm-dd" }
+            ]
+          }
+        ]
+      },
+
+      {
+        "name": "Order Details",
+        "columns": [
+          { "width": 90 },
+          { "width": 110 },
+          { "width": 140 },
+          { "width": 90 },
+          { "width": 100 },
+          { "width": 110 }
+        ],
+        "rows": [
+          {
+            "cells": [
+              { "value": "Order ID", "style": { "fontWeight": "bold", "textAlign": "center" } },
+              { "value": "Employee ID", "style": { "fontWeight": "bold", "textAlign": "center" } },
+              { "value": "Product Name", "style": { "fontWeight": "bold", "textAlign": "center" } },
+              { "value": "Quantity", "style": { "fontWeight": "bold", "textAlign": "center" } },
+              { "value": "Price", "style": { "fontWeight": "bold", "textAlign": "center" } },
+              { "value": "Total", "style": { "fontWeight": "bold", "textAlign": "center" } }
+            ]
+          },
+          {
+            "cells": [
+              { "value": "ORD001" },
+              { "value": "EMP001" },
+              { "value": "Laptop" },
+              { "value": 2 },
+              { "value": 1200 },
+              { "value": 2400 }
+            ]
+          },
+          {
+            "cells": [
+              { "value": "ORD002" },
+              { "value": "EMP002" },
+              { "value": "Mouse" },
+              { "value": 5 },
+              { "value": 25 },
+              { "value": 125 }
+            ]
+          },
+          {
+            "cells": [
+              { "value": "ORD003" },
+              { "value": "EMP003" },
+              { "value": "Keyboard" },
+              { "value": 3 },
+              { "value": 75 },
+              { "value": 225 }
+            ]
+          },
+          {
+            "cells": [
+              { "value": "ORD004" },
+              { "value": "EMP004" },
+              { "value": "Monitor" },
+              { "value": 4 },
+              { "value": 300 },
+              { "value": 1200 }
+            ]
+          },
+          {
+            "cells": [
+              { "value": "ORD005" },
+              { "value": "EMP005" },
+              { "value": "Printer" },
+              { "value": 2 },
+              { "value": 450 },
+              { "value": 900 }
+            ]
+          },
+          {
+            "cells": [
+              { "value": "ORD006" },
+              { "value": "EMP006" },
+              { "value": "Webcam" },
+              { "value": 6 },
+              { "value": 80 },
+              { "value": 480 }
+            ]
+          },
+          {
+            "cells": [
+              { "value": "ORD007" },
+              { "value": "EMP007" },
+              { "value": "Headphones" },
+              { "value": 7 },
+              { "value": 150 },
+              { "value": 1050 }
+            ]
+          },
+          {
+            "cells": [
+              { "value": "ORD008" },
+              { "value": "EMP008" },
+              { "value": "SSD 1TB" },
+              { "value": 8 },
+              { "value": 120 },
+              { "value": 960 }
+            ]
+          },
+          {
+            "cells": [
+              { "value": "ORD009" },
+              { "value": "EMP009" },
+              { "value": "USB Hub" },
+              { "value": 10 },
+              { "value": 35 },
+              { "value": 350 }
+            ]
+          },
+          {
+            "cells": [
+              { "value": "ORD010" },
+              { "value": "EMP010" },
+              { "value": "Graphics Card" },
+              { "value": 1 },
+              { "value": 900 },
+              { "value": 900 }
+            ]
+          },
+          {
+            "cells": [
+              { "value": "ORD011" },
+              { "value": "EMP011" },
+              { "value": "Router" },
+              { "value": 5 },
+              { "value": 95 },
+              { "value": 475 }
+            ]
+          },
+          {
+            "cells": [
+              { "value": "" },
+              { "value": "" },
+              { "value": "" },
+              { "value": "" },
+              { "value": "Grand Total", "style": { "fontWeight": "bold", "textAlign": "center" } },
+              { "value": 9065, "style": { "fontWeight": "bold" } }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/vue/open-from-json-cs1/index.css b/Document-Processing/code-snippet/spreadsheet/vue/open-from-json-cs1/index.css
new file mode 100644
index 0000000000..dd4453b8fb
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/vue/open-from-json-cs1/index.css
@@ -0,0 +1,11 @@
+
+ 
+   
+   
+   
+   
+ 
+ 
+ 
+ 
+ 
diff --git a/Document-Processing/code-snippet/spreadsheet/vue/open-from-json-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/vue/open-from-json-cs1/index.html
new file mode 100644
index 0000000000..6bbb3bc243
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/vue/open-from-json-cs1/index.html
@@ -0,0 +1,23 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
+    <title>EJ2 Vue Sample</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+    <meta name="author" content="Syncfusion" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='app'>Loading....</div>
+</body>
+
+</html>
+
diff --git a/Document-Processing/code-snippet/spreadsheet/vue/open-from-json-cs1/index.js b/Document-Processing/code-snippet/spreadsheet/vue/open-from-json-cs1/index.js
new file mode 100644
index 0000000000..84cc68b0cf
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/vue/open-from-json-cs1/index.js
@@ -0,0 +1,18 @@
+import Vue from "vue";
+import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";
+
+Vue.use(SpreadsheetPlugin);
+
+new Vue({
+	el: '#app',
+	template: `
+   <ejs-spreadsheet ref="spreadsheet" :created="created"></ejs-spreadsheet>`,
+	methods: {
+		created: function () {
+			let spreadsheet = this.$refs.spreadsheet;
+			fetch('./data.json').then(response => response.json()).then(jsonData => {
+				spreadsheet.openFromJson({ file: jsonData });
+			});
+		}
+	}
+});
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/vue/open-from-json-cs1/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/vue/open-from-json-cs1/systemjs.config.js
new file mode 100644
index 0000000000..eefa444a78
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/vue/open-from-json-cs1/systemjs.config.js
@@ -0,0 +1,49 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        },
+        '*.json': { loader: 'plugin-json' }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/33.1.44/"
+    },
+    map: {
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
+        "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-spreadsheet": "syncfusion:ej2-vue-spreadsheet/dist/ej2-vue-spreadsheet.umd.min.js"
+    }
+});
+
+System.import('index.js');
\ No newline at end of file