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

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

Type the following commands in the terminal.
```
cd nuxt2WithSJS
npm run dev
```
Open the following link using a browser. Then you will see the welcome page of NuxtJS.
http://localhost:3000/
Close the current terminal. Open the nuxtjs-with-spreadjs folder using Visual Studio Code or an IDE.

Install SpreadJS

Install the SpreadJS package.
```
npm install --save @mescius/spread-sheets-vue
```
Create a folder called components, if it does not exist in the applications' root folder.

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 '@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
import '@mescius/spread-sheets-vue'
import * as GC from "@mescius/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>

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