Vue

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

Vue 3

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

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

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

3. Register SpreadJS Designer Vue Component to the application in the main.js file.

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

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

   <script setup>
   import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
   import "@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
   import * as GC from "@grapecity/spread-sheets";
   import "@grapecity/spread-sheets-print";
   import "@grapecity/spread-sheets-shapes";
   import "@grapecity/spread-sheets-pivot-addon";
   import "@grapecity/spread-sheets-tablesheet";
   import "@grapecity/spread-sheets-designer-resources-en";
   import "@grapecity/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>

5. Run the application.

   npm run dev

Vue 2

1. Create a Vue project by typing the following commands in Command Prompt.

   npm install -g @vue/cli
   npm i -g @vue/cli-init
   vue init webpack designercomponent
   cd designercomponent
   npm run dev

2. Import the following SpreadJS Vue modules in the project.

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

3. 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 '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css'
   import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css'
   import '@grapecity/spread-sheets-designer-resources-en'
   import '@grapecity/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>

4. Run the application.

   npm run dev

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, ExcelIO, and the Designer Component which can be done by using the following code snippet.

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