SpreadJS with Vue

SpreadJS supports Vue - a JavaScript framework that provides developers with distinct tools to help them build complex user interfaces and web applications.

Using Node Package Manager

Vue 3

To create an application in Vue 3 with Composition API, follow the steps given below:

Create a Vue project
Open the command prompt window and type the following commands to create a simple Vue project.
```
vue create sjs-vue-app
cd sjs-vue-app
```
After you finish, the Vue project will be created at the specified location in the directory.
For more information on how to create a Vue project, refer to https://vuejs.org/guide/quick-start.html.
Import SpreadJS Vue module in project
Install SpreadJS Vue modules in your project using the following command:
```
npm install @mescius/spread-sheets-vue
npm install @mescius/spread-sheets
```

Use SpreadJS in Vue application and license SpreadJS

Modify the main.js file by using the sample code given below:

import { createApp } from 'vue'
import App from './App.vue'
import { GcSpreadSheets, GcWorksheet, GcColumn } from '@mescius/spread-sheets-vue';

let app = createApp(App);
app.component('gc-spread-sheets', GcSpreadSheets);
app.component('gc-worksheet', GcWorksheet);
app.component('gc-column', GcColumn);
app.mount('#app')

Modify the App.vue file by using the sample code given below. You can enter a valid SpreadJS license key before initializing the component. In the following code snippet, the Spread component uses the setup function which is a composition API function. The values ofhostClass and the initWorkbook function are declared in the setup function and are returned as objects.

<template>
  <div>
    <gc-spread-sheets
      :hostClass="hostClass"
      @workbookInitialized="initWorkbook"
    >
    </gc-spread-sheets>
  </div>
</template>

<script>

import "@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
import * as GC from "@mescius/spread-sheets";
import "@mescius/spread-sheets-vue";

// Licensing SpreadJS
var SpreadJSKey = "xxx";          // Enter a valid license key.
GC.Spread.Sheets.LicenseKey = SpreadJSKey;

export default {
  name: "App",
  setup() {
    const hostClass = "spread-host";

    function initWorkbook(spread) {
      let sheet = spread.getActiveSheet();
      sheet.setValue(0, 0, "Hello");
    }

    return {
      hostClass,
      initWorkbook
    };
  }
};
</script>

<style>
.spread-host {
  width: 100%;
  height: 600px;
}
</style>

Save and Run the Application
```
npm run serve
```

Vue 3 with TypeScript

Vue 3 also provides support for TypeScript, which can identify many common runtime issues through static analysis. If you choose to use TypeScript, please follow the steps provided below.

Create a Vue project
Create a Vue project by typing the following command in Command Prompt.
```
npm init vue@latest sjs-vue-app
cd sjs-vue-app
```
The command will prompt for the other optional features that can be added to the Vue project.
Add TypeScript
Select Yes for the "Add TypeScript" query.
Install npm packages
Run the following commands to install the npm packages. Install the npm packages first and after that install the following packages.
```
npm install 
npm install @mescius/spread-sheets-vue
npm install @mescius/spread-sheets
```

Use components

Use the SpreadJS Vue component directly in the corresponding component. Modify the App.vue file and use TypeScript with <script setup> as shown in the sample code below.

<template>
  <div id="spread-host">
    <gc-spread-sheets hostClass="spreadHost" @workbookInitialized="initWorkbook">
      <GcWorksheet>
      </GcWorksheet>
    </gc-spread-sheets>
  </div>
</template>

<script setup lang="ts">
import "@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
import * as GC from "@mescius/spread-sheets";
import { GcSpreadSheets, GcWorksheet } from '@mescius/spread-sheets-vue'
function initWorkbook(spread: GC.Spread.Sheets.Workbook) {
  let sheet = spread.getActiveSheet();
  sheet
    .getCell(0, 0)
    .vAlign(GC.Spread.Sheets.VerticalAlign.center)
    .value("Hello SpreadJS");
}
</script>

<style>
.spreadHost {
  width: 800px;
  height: 800px;
}
</style>

Note: No additional configuration is required if you are importing components locally.

App.vue file

Run the project
Save and run the project using the following command.
```
npm run dev
```

Vue 2

Create a Vue Project
Open the command prompt window and type the following commands to create a simple Vue project.
```
npm install -g @vue/cli
npm i -g @vue/cli-init
vue init webpack spreadjs-quickstart :: Here, select Vue 2.
cd spreadjs-quickstart
npm run dev 
```
After you finish, the Vue project will be created at the specified location in the directory. For more information on how to create a Vue project, refer to https://v2.vuejs.org/v2/guide/installation.html.
Import SpreadJS Vue Module in Project
Install @mescius/spread-sheets-vue in your project using the following command:
```
npm install @mescius/spread-sheets-vue
```

Use SpreadJS in Vue application and license SpreadJS

Modify the App.vue file as per your requirements. Changes will be reflected when the browser window is refreshed. You can enter a valid SpreadJS license key before initializing the component. As an example, you can use the sample code given below:

<template>
  <div>
      <gc-spread-sheets
        :hostClass='hostClass'
      >
        <gc-worksheet
          :dataSource="dataTable"
          :autoGenerateColumns = 'autoGenerateColumns'
        >
          <gc-column
            :width="width"
            :dataField="'price'"
            :visible = 'visible'
            :formatter = 'formatter'
            :resizable = 'resizable'
          ></gc-column>
        </gc-worksheet>
      </gc-spread-sheets>
  </div>
</template>
<script>
  import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
  import * as GC from "@mescius/spread-sheets";
  import  '@mescius/spread-sheets-vue'

  // Licensing SpreadJS
  var SpreadJSKey = "xxx";          // Enter a valid license key.
  GC.Spread.Sheets.LicenseKey = SpreadJSKey;

  export default {
    data(){
      return {
        hostClass:'spread-host',
        autoGenerateColumns:true,
        width:300,
        visible:true,
        resizable:true,
        formatter:"$ #.00"
      }
    },
    computed:{
      dataTable(){
        let dataTable = [];
        for (let i = 0; i < 42; i++) {
          dataTable.push({price: i + 0.56})
        }
        return dataTable
      }
    }
  }
</script>
<style scoped>
.spread-host {
    width: 500px;
    height: 600px;
}
</style>

Save and Run the Application
```
npm run dev
```

Using Traditional HTML

Vue 2

SpreadJS can be used with Vue 2 using traditional HTML. This method involves the following steps:

Create a HTML page
As the first step, you need to create an HTML page.
Add SpreadJS and Vue-SpreadJS to HTML template
Add references to the gc.spread.sheets.all.*.*.*.min.js, gc.SpreadJS.*.*.*.css and gc.spread.sheets.vue.*.*.*.js files in the HTML template (i.e. your index.html file).

Use SpreadJS in Vue application and license SpreadJS

Now, you can use SpreadJS in your Vue application. You can enter a valid SJS license key before initializing the component. As an example, you can use the sample code given below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello SpreadJS Vue</title>
    <link rel="stylesheet" href="lib/gc.spread.sheets.excel2016colorful.0.0.0.css" type="text/css"/>
    <style>
        #app{
            width: 100%;
            height:100%;
        }
        .vue-demo{
            width: 800px;
            height:400px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="app">
 <app></app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="lib/gc.spread.sheets.all.0.0.0.js"></script>
<script src="lib/gc.spread.sheets.vue.js"></script>
<script type="text/x-template" id="app-template">
     <div>
        <gc-spread-sheets
          v-bind:hostClass='hostClass'
          @workbookInitialized='spreadInitHandle'
        >
            <gc-worksheet  >
            </gc-worksheet>
        </gc-spread-sheets>
     </div>
</script>
<script type="text/javascript">
    window.onload = function () {

    // Licensing SpreadJS
    GC.Spread.Sheets.LicenseKey = "xxx";        // Enter a valid license key.

        Vue.component('app', {
            template: '#app-template',
            data:function () {
                return {
                    hostClass: "vue-demo"
                }
            },
            methods: {
                spreadInitHandle: function (spread) {
                    window.mySpread = spread;
                    console.log('now you can also get spread from window');
                }
            }
        });
        new Vue({
            el:"#app",
        })
    }
</script>
</body>
</html>

The SpreadSheets, Worksheet, and Column are the basic elements of tag hierarchy. Other elements work by setting them. The main tag hierarchy is:

<gc-spread-sheets>
<gc-worksheet>
<gc-column></gc-column>
    ...
</gc-worksheet>
  ...
</gc-spread-sheets>

The following topics list the element directives.