Nuxt.js

SpreadJS は、Vue.jsのフレームワークであるNuxt.jsをサポートしています。 Nuxt.jsを使用すると、開発を簡単、かつ迅速にすることができます。 Nuxt.jsは、React.js のフレームワークである Next.jsとよく似ています。

詳細については、https://nuxtjs.org/ja/docs/get-started/installation/ を参照してください。

このチュートリアルでは、SpreadJS を使用する Nuxt.js アプリケーションを作成します。

Vue3

Nuxt.jsアプリを作成する

Nuxt.js アプリケーションを簡単に作成するには、Create Next Appツールを使用します。

コマンドプロンプトまたはターミナルで次のコマンドを実行して、Nuxt.jsプロジェクトを作成します。
npx nuxi init nuxt3WithSJS
次のコマンドを実行します。
cd nuxt3WithSJS
npm install
npm run dev
ブラウザで次のリンクを開きます。Nuxt.jsの公式ページが表示されます。
http://localhost:3000/
現在のターミナルを閉じて、Visual Studio Code（または他のIDE）を使用して nuxtjs-with-spreadjs フォルダを開きます。

SpreadJSをインストールする

SpreadJSパッケージ、および日本語リソースをインストールします。
npm install @grapecity/spread-sheets-vue
npm install @grapecity/spread-sheets-resources-ja
アプリケーションのルートフォルダに、「components」フォルダを作成します（componentsフォルダが存在しない場合のみ）。

Vueコンポーネントファイル（ファイル名：SpreadSheet.vue）を「components」フォルダに追加し、次のコードを入力します。

<template>
  <div>
    <gc-spread-sheets class="hostClass" @workbookInitialized="initSpread">
      <gc-worksheet> </gc-worksheet>
    </gc-spread-sheets>
  </div>
</template>

<script setup>
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
import { GcSpreadSheets, GcWorksheet } from "@grapecity/spread-sheets-vue";
import * as GC from "@grapecity/spread-sheets";
import '@grapecity/spread-sheets-resources-ja';

// カルチャ設定
GC.Spread.Common.CultureManager.culture('ja-jp');

var data = [
  {
    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",
  },
];
let initSpread = function (spread) {
  var sheet = spread.getSheet(0);
  sheet.setDataSource(data);
};
</script>
<style scoped>
.hostClass {
  width: 600px;
  height: 600px;
}
</style>

app.vue ファイルの内容を次のコードに変更します。

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

以下のように nuxt.config.ts ファイルを変更します。

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

アプリを実行する

npm run dev コマンドを使用してアプリケーションを実行します。デフォルトでは、プロジェクトは http://localhost:3000/ で実行されます。