The world's No. 1 Excel Component for Nuxt Developers.

Based on Nuxt v3

1. Go to the Nuxt app folder and install the SpreadJS library.

npm install @mescius/spreadsheets

2. Create a SpreadSheet.vue file.

Create a SpreadSheet.vue file in the components folder in the application's root folder. * If there is no folder called components in the application's root folder, create it.

3. Add a css file to apply SpreadJS styles.

Add the SpreadJS CSS file to the script section of the components/SpreadSheet.vue  file you just created.

Add the CSS file with the style you want from the various CSS files. (Check the entire theme)

// SpreadSheet.vue

import ' @mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css';

4. SpreadJS does not support server-side rendering (SSR), so configure the component to render only on the client side.

Add the { ssr: false } setting to the nuxt.config.ts file as follows.

// nuxt.config.ts

export  default  defineNuxtConfig({

ssr: false,

})

5. Add the SpreadJS module.

Add the SpreadJS module to the script section of the components/SpreadSheet.vue file as follows.

// SpreadSheet.vue

import { GcSpreadSheets } from  '@mescius/spread-sheets-vue' ;

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

6. Set the Korean cultural sphere.

1) Install resource package. ex) Korean

npm install @mescius/spread-sheets-resources-ko

2) In the SpreadSheet.vue file Add code to import the Korean resource package within the <script></script> tag.

// SpreadSheet.vue

import  '@mescius/spread-sheets-resources-ko'   ;

3) Then add the code below.

// SpreadSheet.vue

GC.Spread.Common.CultureManager.culture("ko-kr");

7. Initialize the SpreadJS control and add it to the screen.

Initialize the SpreadJS control and write code to display it on the screen.

Please check the detailed code in the sample below.

8. Run the Nuxt app and check the results.

npm run dev

When you run the Nuxt app, you will see that the spreadsheet has been added as shown below.