# SpreadJS with Vue

## Content

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](https://learnvue.co/tutorials/intro-to-vue-3#understanding-the-vue-3-component), follow the steps given below:

1. **Create a Vue Project**
    Open the command prompt window and type the following commands to create a simple Vue project.

    ```Shell
    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](https://vuejs.org/guide/quick-start.html).
2. **Import SpreadJS Vue Module in Project**
    Install SpreadJS Vue modules in your project using the following command:

    ```Shell
    npm install @grapecity/spread-sheets-vue
    npm install @grapecity/spread-sheets
    ```
3. **Use SpreadJS in Vue application and license SpreadJS**
    Modify the main.js file by using the sample code given below:

    ```JavaScript
    import { createApp } from 'vue'
    import App from './App.vue'
    import { GcSpreadSheets, GcWorksheet, GcColumn } from '@grapecity/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`](https://vuejs.org/api/composition-api-setup.html) function which is a composition API function. The values of`hostClass` and the `initWorkbook` function are declared in the `setup` function and are returned as objects.

    ```HTML
    <template>
      <div>
        <gc-spread-sheets
          :hostClass="hostClass"
          @workbookInitialized="initWorkbook"
        >
        </gc-spread-sheets>
      </div>
    </template>
    
    <script>
    
    import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
    import * as GC from "@grapecity/spread-sheets";
    import "@grapecity/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>
    ```
4. **Save and Run the Application**

    ```Shell
    npm run serve
    ```

### Vue 2

1. **Create a Vue Project**
    Open the command prompt window and type the following commands to create a simple Vue project.

    ```Shell
    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](https://v2.vuejs.org/v2/guide/installation.html).
2. **Import SpreadJS Vue Module in Project**
    Install `@grapecity/spread-sheets-vue` in your project using the following command:

    ```Shell
    npm install @grapecity/spread-sheets-vue
    ```
3. **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:

    ```HTML
    <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 '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
      import * as GC from "@grapecity/spread-sheets";
      import  '@grapecity/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>
    ```
4. Save and Run the Application

    ```Shell
    npm run dev
    ```

## Using Traditional HTML

### Vue 2

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

1. **Create a HTML page**
    As the first step, you need to create an HTML page.
2. **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).
3. **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:

    ```HTML
    <!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:

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

The following topics list the element directives.

* [Gc-spread-sheets Element](https://developer.mescius.com/spreadjs/docs/javascript_frameworks/UsingSpread.SheetswithVue/UsingtheGC-spread-sheetselement)
* [Gc-worksheet Element](https://developer.mescius.com/spreadjs/docs/javascript_frameworks/UsingSpread.SheetswithVue/UsingtheGC-worksheetElement)
* [Gc-column Element](https://developer.mescius.com/spreadjs/docs/javascript_frameworks/UsingSpread.SheetswithVue/UsingtheGc-columnElement)
* [Excel IO Element](https://developer.mescius.com/spreadjs/docs/javascript_frameworks/UsingSpread.SheetswithVue/vue-excelio)