SpreadJS with Create Vue

SpreadJS supports using individual module and plugin together in create vue development environment.

Using Module and Plugin together

This involves the following steps:

1. Create a Create Vue Project

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

   npm create vue@3
   cd vue-project
   npm install
   npm run dev

2. Install SpreadJS modules and plugins in the project

   Install the SpreadJS NPM modules and plugins using the following commands:

   npm install @grapecity/spread-common @grapecity/spread-calc-engine @grapecity/spread-sheets-core @grapecity/spread-sheets-calc-engine @grapecity/spread-sheets-bindings @grapecity/spread-sheets-print @grapecity/spread-sheets-vue tiny-emitter

3. Use SpreadJS in Create Vue application

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

   import '../node_modules/@grapecity/spread-common/styles/gc.spread.sheets.excel2016colorful.css';
   import { createApp } from 'vue'
   import { GcSpreadSheets, GcWorksheet, GcColumn } from '@grapecity/spread-sheets-vue'
   import App from './App.vue'
   let app = createApp(App);
   app.component('gc-column', GcColumn);
   app.component('gc-spread-sheets', GcSpreadSheets);
   app.component('gc-worksheet', GcWorksheet);
   app.mount('#app');

   Modify the App.vue file by using the code given below:

   <template>
   <div id="sample-tutorial">
       <gc-spread-sheets hostClass="sample-spreadsheets" @workbookInitialized="initSpread">
          <gc-worksheet>
                   <gc-column>  </gc-column>
           </gc-worksheet>
        </gc-spread-sheets>
   </div>
   </template>
   <script setup>
     import "@grapecity/spread-common";
     import "@grapecity/spread-sheets-core";
     import "@grapecity/spread-calc-engine";
     import "@grapecity/spread-sheets-calc-engine";
     import "@grapecity/spread-sheets-bindings";
     import "@grapecity/spread-sheets-print";
     import { ref } from "vue";
     import "@grapecity/spread-sheets-vue";
     const spreadRef = ref(null);
     const initSpread = (spread) => {
      spreadRef.value = spread;
      let sheet = spread.getActiveSheet();
      sheet.setValue(0, 0, "Hello SpreadJS");
      sheet.setColumnCount(20);
      spread.print();
    }
   </script>
   <style scoped>
     #app {
      height: 300px;
      width: 100%;
   }
   #sample-tutorial {
    position: relative;
    height: 300px;
    width: 100%;
    overflow: hidden;
   }
   .sample-spreadsheets {
    height: 300px;
    width: 100%;}
   body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    }
   </style>

   Modify vite.config.js file using the following code:

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   // https://vitejs.dev/config/export default defineConfig({
      plugins: [
         vue(),
      ],
      resolve: {
         alias: {
               "@grapecity/spread-sheets": require.resolve("@grapecity/spread-common")
         }
      }
   })

4. Save and Run the Application

   npm run dev