Vue

You can perform the following steps to add the SpreadJS Designer Component to a Vue application:

Vue 3

Create a Vue project by typing the following command in Command Prompt.
```
npm init vue@latest
```
The command will present prompts for the project name and other optional features that can be added to the Vue project.

Import the following SpreadJS and SpreadJS Designer Vue modules in the project.

npm install @mescius/spread-sheets-designer npm install @mescius/spread-sheets-designer-resources-en npm install @mescius/spread-sheets-designer-vue npm install @mescius/spread-sheets npm install @mescius/spread-sheets-io npm install @mescius/spread-sheets-barcode npm install @mescius/spread-sheets-charts npm install @mescius/spread-sheets-languagepackages npm install @mescius/spread-sheets-print npm install @mescius/spread-sheets-pdf npm install @mescius/spread-sheets-shapes npm install @mescius/spread-sheets-pivot-addon npm install @mescius/spread-sheets-tablesheet

import { createApp } from 'vue' import App from './App.vue' import Designer from "@mescius/spread-sheets-designer-vue" let app = createApp(App); app.component("gc-spread-sheets-designer", Designer); app.mount('#app');

Add the SpreadJS Designer Vue Component to the application by modifying the App.vue file.

<script setup> import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css'; import "@mescius/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css"; import * as GC from "@mescius/spread-sheets"; import "@mescius/spread-sheets-print"; import "@mescius/spread-sheets-shapes"; import "@mescius/spread-sheets-pivot-addon"; import "@mescius/spread-sheets-tablesheet"; import "@mescius/spread-sheets-designer-resources-en"; import "@mescius/spread-sheets-designer"; </script> <script> export default { name: "App", data: function () { return { styleInfo: { height: "98vh", width: "100%" }, config: config, spreadOptions: { sheetCount: 2, }, designer: null, }; }, methods: { designerInitialized(value) { this.designer = value; }, }, }; </script> <template> <div id="gc-designer-container"> <gc-spread-sheets-designer :styleInfo="styleInfo" :config="config" :spreadOptions="spreadOptions" @designerInitialized="designerInitialized"/> </div> </template> <style> </style>

Run the application.
```
npm run dev
```

Vue with Typescript

Create a Vue project by typing the following command in Command Prompt.
```
npm init vue@latest sjs-designer-vue-app cd sjs-designer-vue-app
```
The command will prompt for the other optional features that can be added to the Vue project.
Select Yes for the "Add TypeScript" query.

Install the following npm packages.

npm install npm install @mescius/spread-sheets-designer npm install @mescius/spread-sheets-designer-resources-en npm install @mescius/spread-sheets-designer-vue npm install @mescius/spread-sheets npm install @mescius/spread-sheets-barcode npm install @mescius/spread-sheets-shapes npm install @mescius/spread-sheets-charts npm install @mescius/spread-sheets-slicers npm install @mescius/spread-sheets-languagepackages npm install @mescius/spread-sheets-print npm install @mescius/spread-sheets-pdf npm install @mescius/spread-sheets-pivot-addon npm install @mescius/spread-sheets-tablesheet npm install @mescius/spread-sheets-ganttsheet npm install @mescius/spread-sheets-reportsheet-addon npm install @mescius/spread-sheets-formula-panel npm install @mescius/spread-sheets-io

Add the SpreadJS Designer Vue Component to the application and use TypeScript with <script setup> by modifying the App.vue file.

<template> <div id="app"> <Designer :styleInfo="styleInfo" :config="config" :spreadOptions="spreadOptions" @designerInitialized="designerInitialized"> </Designer> </div> </template> <script setup lang="ts"> import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css'; import "@mescius/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css"; import * as GC from "@mescius/spread-sheets"; import "@mescius/spread-sheets-print"; import "@mescius/spread-sheets-shapes"; import "@mescius/spread-sheets-charts"; import "@mescius/spread-sheets-slicers"; import "@mescius/spread-sheets-pivot-addon"; import "@mescius/spread-sheets-tablesheet"; import "@mescius/spread-sheets-ganttsheet"; import "@mescius/spread-sheets-reportsheet-addon"; import "@mescius/spread-sheets-formula-panel"; import "@mescius/spread-sheets-io"; import "@mescius/spread-sheets-designer-resources-en"; import Designer from "@mescius/spread-sheets-designer-vue"; // eslint-disable-next-line @typescript-eslint/no-explicit-any const config = (GC.Spread.Sheets as any).Designer.DefaultConfig; if ((config).ribbon[0].buttonGroups[0].commandGroup.children[0].commands[0] !== "Welcome") { config.commandMap = { Welcome: { title: "Welcome", text: "Welcome", iconClass: "ribbon-button-welcome", bigButton: true, commandName: "Welcome", execute: async () => { alert("Welcome to new designer."); }, }, }; // eslint-disable-next-line @typescript-eslint/no-explicit-any (config as any).ribbon[0].buttonGroups.unshift({ label: "NewDesigner", thumbnailClass: "welcome", commandGroup: { children: [ { direction: "vertical", commands: ["Welcome"], }, ], }, }); } const styleInfo = { height: "98vh", width: "100%" }; const spreadOptions = { sheetCount: 3, }; // eslint-disable-next-line @typescript-eslint/no-explicit-any function designerInitialized(value: any) { const spread: GC.Spread.Sheets.Workbook = value.getWorkbook(); const activeSheet = spread.getActiveSheet(); activeSheet.setValue(0, 0, "Sample"); } </script>

Run the application.
```
npm run dev
```

Vue 2

Create a Vue project by typing the following commands in Command Prompt.
```
npm install -g @vue/cli vue create designer-component
```

Select the option containing “Vue2” in the presets.

? Please pick a preset: (Use arrow keys) Default ([Vue 3] babel, eslint) > Default ([Vue 2] babel, eslint) Manually select features

Go to the project directory and install the relevant dependencies.

cd designer-component npm install @mescius/spread-sheets npm install @mescius/spread-sheets-barcode npm install @mescius/spread-sheets-charts npm install @mescius/spread-sheets-languagepackages npm install @mescius/spread-sheets-pdf npm install @mescius/spread-sheets-print npm install @mescius/spread-sheets-shapes npm install @mescius/spread-sheets-tablesheet npm install @mescius/spread-sheets-pivot-addon npm install @mescius/spread-sheets-designer npm install @mescius/spread-sheets-designer-resources-en npm install @mescius/spread-sheets-vue npm install @mescius/spread-sheets-designer-vue npm install @mescius/spread-sheets-io

Import the required modules and add the designer tag into the template using the following code snippet in App.vue.

<!--Add designer tag into the template--> <template> <div id="app"> <gc-spread-sheets-designer :styleInfo='styleInfo' :config='config' @designerInitialized="designerInitialized"> </gc-spread-sheets-designer> </div> </template> <script> // import the required modules import '@mescius/spread-sheets-designer-resources-en' import '@mescius/spread-sheets-designer-vue' export default { name: 'App', data: function () { return { styleInfo: { height: '800px', width: '1200px', border: 'solid black 1px' }, config: null, designer: null } }, methods: { designerInitialized (value) { this.designer = value } } } </script> <style> @import '~@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css'; @import '~@mescius/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css'; </style>

Run the application.
```
npm run serve
```

Apply License

The licensed version allows you to use all features of the SpreadJS Designer Component. You need to set the license key for SpreadJS and the Designer Component which can be done by using the following code snippet.

import '@mescius/spread-sheets-designer-resources-en'; import { Designer } from '@mescius/spread-sheets-designer-vue'; import * as GC from '@mescius/spread-sheets'; import "@mescius/spread-sheets-io"; // license keys var sjsLicense = 'sjs-distribution-key' GC.Spread.Sheets.LicenseKey = sjsLicense GC.Spread.Sheets.Designer.LicenseKey = 'designer-component-distribution-key'