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