[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

SpreadJS with Nuxt

SpreadJS supports NuxtJS, a framework of VueJS used to create web apps. NuxtJS makes development easy, quick, and organized. NuxtJS is quite similar to NextJS, a framework of React.js. Some of the useful features of NuxtJS are folder structure, server-side rendering, statical Rendering, and code splitting.

For more information, refer to https://nuxtjs.org/docs/get-started/installation.

In this tutorial, we build a Nuxt.js application that uses SpreadJS.

Vue2

Create Nuxt.js App

The easiest way to create a Nuxt.js application is to use the Create Nuxt App tool.

  1. Run the following command from the command prompt or terminal to create a Nuxt.js project.

    npx create-nuxt-app nuxt2WithSJS

    When the terminal prompts the configuration messages, select the required option and press Enter to confirm. Wait a while as the terminal installs and creates the project. It will ask you several questions and here are answers you could use:

    Project language: JavaScript
Project manager: Npm
UI framework: None
Template engine: HTML
Nuxt.js modules: Axios
Linting tools: ESLint
Testing framework: None
Rendering mode: Single Page App
Deployment target: Static
Development tools: jsconfig.json
Continuous integration: None
Version control system: Git

  2. Type the following commands in the terminal.

    cd nuxt2WithSJS
npm run dev

  3. Open the following link using a browser. Then you will see the welcome page of NuxtJS.

    http://localhost:3000/

  4. Close the current terminal. Open the nuxtjs-with-spreadjs folder using Visual Studio Code or an IDE.

Install SpreadJS

  1. Install the SpreadJS package.

    npm install --save @grapecity/spread-sheets-vue

    Create a folder called components, if it does not exist in the applications' root folder.

  2. Create a JavaScript XML file SpreadSheet.vue and add it to the components folder with the following code into it. You can enter a valid SpreadJS license key before initializing the component.

    <template>
<div>
    <gc-spread-sheets :hostClass='hostClass'>
        <gc-worksheet :dataSource="dataTable">
            <gc-column :width="width" :dataField="'preferredFullName'"></gc-column>
            <gc-column :width="width" :dataField="'jobTitleName'"></gc-column>
            <gc-column :width="width" :dataField="'phoneNumber'"></gc-column>
            <gc-column :width="width" :dataField="'region'"></gc-column>
        </gc-worksheet>
    </gc-spread-sheets>
</div>
</template>

<script>
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
import '@grapecity/spread-sheets-vue'
import * as GC from "@grapecity/spread-sheets";

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

export default {
    data() {
        return {
            hostClass: 'spread-host',
            width: 100
        }
    },
    computed: {
        dataTable() {
            return [{
                    "jobTitleName": "Developer",
                    "preferredFullName": "Romin Irani",
                    "region": "CA",
                    "phoneNumber": "408-1234567"
                },
                {
                    "jobTitleName": "Developer",
                    "preferredFullName": "Neil Irani",
                    "region": "CA",
                    "phoneNumber": "408-1111111"
                },
                {
                    "jobTitleName": "Program Directory",
                    "preferredFullName": "Tom Hanks",
                    "region": "CA",
                    "phoneNumber": "408-2222222"
                }
            ];
        }
    }
}
</script>

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

  3. Change the index file content. Replace the default content of the pages\index.tsx file with the following code.

    <template>
<div>
    <h1>
        Adding Spreadsheets to a Jamstack Application
    </h1>
    <p>
        Nuxt.JS v2 + SpreadJS demo
    </p>
    <SpreadSheet />
</div>
</template>

Run and Test App

You can run the application by using the npm run dev commands. By default, the project runs at http://localhost:3000/.

Vue3

Create Nuxt.js App

The easiest way to create a Nuxt.js application is to use the Create Nuxt App tool.

  1. Run the following command from the command prompt or terminal to create a Nuxt.js project.

    npx nuxi init nuxt3WithSJS

  2. Type the following commands in the terminal.

    cd nuxt3WithSJS
npm install
npm run dev

  3. Open the following link using a browser. Then you will see the welcome page of NuxtJS.

    http://localhost:3000/

  4. Close the current terminal. Open the nuxtjs-with-spreadjs folder using Visual Studio Code or an IDE.

Install SpreadJS

  1. Install the SpreadJS package.

    npm install --save @grapecity/spread-sheets-vue

    Create a folder called components, if it does not exist in the applications' root folder.

  2. Create a JavaScript XML file SpreadSheet.vue and add it to the components folder with the following code into it. You can enter a valid SpreadJS license key before initializing the component.

    <template>
<div>
    <gc-spread-sheets :hostClass='hostClass'>
        <gc-worksheet :dataSource="dataTable">
            <gc-column :width="width" :dataField="'preferredFullName'"></gc-column>
            <gc-column :width="width" :dataField="'jobTitleName'"></gc-column>
            <gc-column :width="width" :dataField="'phoneNumber'"></gc-column>
            <gc-column :width="width" :dataField="'region'"></gc-column>
        </gc-worksheet>
    </gc-spread-sheets>
</div>
</template>

<script>
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
import {
    GcSpreadSheets,
    GcWorksheet,
    GcColumn
} from '@grapecity/spread-sheets-vue'

import * as GC from "@grapecity/spread-sheets";

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

export default {
    components: {
        GcSpreadSheets, GcWorksheet, GcColumn
    },
    data() {
        return {
            hostClass: 'spread-host',
            width: 100
        }
    },
    computed: {
        dataTable() {
            return [{
                    "jobTitleName": "Developer",
                    "preferredFullName": "Romin Irani",
                    "region": "CA",
                    "phoneNumber": "408-1234567"
                },
                {
                    "jobTitleName": "Developer",
                    "preferredFullName": "Neil Irani",
                    "region": "CA",
                    "phoneNumber": "408-1111111"
                },
                {
                    "jobTitleName": "Program Directory",
                    "preferredFullName": "Tom Hanks",
                    "region": "CA",
                    "phoneNumber": "408-2222222"
                }
            ];
        }
    }
}
</script>

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

  3. Replace the default content of the app.vue file with the following code.

    <template>
<div>
    <h1>
        Adding Spreadsheets to a Jamstack Application
    </h1>
    <p>
        Nuxt.JS v3 + SpreadJS demo
    </p>
    <SpreadSheet />
</div>
</template>

  4. Change the nuxt.config.ts file as given below:

    // https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    ssr: false,
    components: true
})

Run and Test App

You can run the application by using the npm run dev commands. By default, the project runs at http://localhost:3000/.