# NuxtJS

## Content

SpreadJS 디자이너 컴포넌트는 Nuxt 3 및 Nuxt 4와 원활하게 연동됩니다.
이 튜토리얼에서는 Nuxt 프로젝트에 SpreadJS 디자이너 컴포넌트를 통합하고, 클라이언트 측 렌더링을 구성하며, Excel과 유사한 편집 도구를 활성화하는 방법을 설명합니다.

## Nuxt 앱에 SpreadJS 디자이너 컴포넌트 통합

### 1단계: Nuxt 프로젝트 설정

기존 Nuxt 3 또는 Nuxt 4 프로젝트를 사용할 수 있습니다.
새 프로젝트에서 시작하려면 다음 명령을 실행합니다.

```bash
npm create nuxt@latest nuxt-with-spreadjs-designer
```

터미널에 구성 관련 메시지가 표시되면 필요한 옵션을 선택하고 Enter 키를 눌러 확인합니다. 이 튜토리얼에서는 다음 옵션을 선택할 수 있습니다.

* Template: Minimal
* Package manager: npm
* Initialize git repository: Yes
* Would you like to browse and install modules?: No

터미널에서 프로젝트 설치 및 생성이 완료될 때까지 잠시 기다립니다. 그런 다음 터미널에 다음 명령을 입력합니다.

```bash
cd nuxt-with-spreadjs-designer
npm install
```

>type=note
> **참고:**
> `npm install` 실행 시 `Cannot find native binding` 오류가 발생하거나 `@rolldown/binding-*` 패키지를 찾을 수 없는 경우 `node_modules` 폴더와 `package-lock.json` 파일을 제거한 다음 `npm install`을 다시 실행합니다.

그런 다음 앱을 실행합니다.

```bash
npm run dev
```

기본 Nuxt 앱이 실행되는지(*http://localhost:3000*) 확인한 후 SpreadJS 디자이너 컴포넌트 통합을 시작할 수 있습니다.

### 2단계: SpreadJS 디자이너 컴포넌트 설치 및 구성

1. **SpreadJS 디자이너 컴포넌트 패키지 설치**

```bash
npm i --save @mescius/spread-sheets @mescius/spread-sheets-barcode @mescius/spread-sheets-charts @mescius/spread-sheets-datacharts-addon @mescius/spread-sheets-designer @mescius/spread-sheets-designer-resources-en @mescius/spread-sheets-designer-vue @mescius/spread-sheets-formula-panel @mescius/spread-sheets-ganttsheet @mescius/spread-sheets-io @mescius/spread-sheets-languagepackages @mescius/spread-sheets-pdf @mescius/spread-sheets-print @mescius/spread-sheets-pivot-addon @mescius/spread-sheets-reportsheet-addon @mescius/spread-sheets-shapes @mescius/spread-sheets-slicers @mescius/spread-sheets-tablesheet
```

2. **SpreadJS 디자이너 컴포넌트 추가**
    Nuxt 프로젝트의 루트 폴더에 components 폴더가 없는 경우 해당 폴더를 만듭니다. `components` 폴더에 `Spreadsheet.vue`라는 파일을 만듭니다. 예를 들어 이 튜토리얼에서 파일 경로는 `nuxt-with-spreadjs-designer/components/Spreadsheet.vue`입니다. 다음과 같이 컴포넌트를 정의합니다.

```auto
<template>
    <div id="gc-designer-container">
        <gc-spread-sheets-designer :styleInfo="styleInfo" :config="config" :spreadOptions="spreadOptions"
            @designerInitialized="initDesigner" />
    </div>
</template>

<script setup>
import "@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css";
import "@mescius/spread-sheets-designer/styles/gc.spread.sheets.designer.light.min.css";

import "@mescius/spread-sheets-print";
import "@mescius/spread-sheets-shapes";
import "@mescius/spread-sheets-datacharts-addon";
import "@mescius/spread-sheets-slicers";
import "@mescius/spread-sheets-pivot-addon";
import "@mescius/spread-sheets-tablesheet";
import "@mescius/spread-sheets-ganttsheet";
import "@mescius/spread-sheets-reportsheet-addon";
import "@mescius/spread-sheets-formula-panel";
import "@mescius/spread-sheets-io";
import "@mescius/spread-sheets-designer-resources-en";

import * as GC from "@mescius/spread-sheets";
import * as GCD from "@mescius/spread-sheets-designer";
import GcSpreadSheetsDesigner from "@mescius/spread-sheets-designer-vue";

// Optional: Set your SpreadJS license key and Designer Component license key
// GC.Spread.Sheets.LicenseKey = "sjs-distribution-key";
// GCD.Spread.Sheets.Designer.LicenseKey = "designer-component-distribution-key";

const styleInfo = { height: "85vh", width: "100%" };
const config = GCD.Spread.Sheets.Designer.DefaultConfig;
const spreadOptions = { sheetCount: 2 };

let designer = null;

function initDesigner(value) {
    designer = value;
    console.log("Designer initialized:", designer);

    const spread = designer.getWorkbook();
    if (spread) {
        const sheet = spread.getSheet(0);
        sheet.setValue(0, 0, "Welcome to SpreadJS Designer!");
    }
}
</script>

<style scoped>
#gc-designer-container {
    width: 100%;
    height: 100%;
}
</style>
```

3. **메인 앱에서 컴포넌트 사용**
    `app.vue`의 기본 내용을 다음과 같이 바꿉니다.

```auto
<template>
  <div>
    <h1>
      Nuxt.JS + SpreadJS Designer Component Demo
    </h1>
    <SpreadSheet />
  </div>
</template>

<script setup>
import SpreadSheet from "../components/Spreadsheet.vue";
</script>
```

4. **Nuxt 구성 업데이트(선택 사항)**

```auto
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  //...

  ssr: false,
  components: true,
})
```

>type=note
> **참고:**
> SpreadJS 디자이너 컴포넌트는 브라우저 API를 사용하며 클라이언트 측에서만 실행됩니다. SSR 모드에서 Nuxt를 사용하는 경우 SpreadJS 디자이너 컴포넌트를 \<client-only> 태그로 감싸거나 클라이언트 전용 플러그인(예: plugins/spreadjs.client.ts)으로 등록합니다.

### 3단계: 통합 실행 및 확인

```bash
npm run dev
```

앱은 *http://localhost:3000*에서 사용할 수 있으며, Nuxt 앱 내에 SpreadJS 디자이너 컴포넌트가 렌더링됩니다.
![image-20260707.3fea6e.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260707.3fea6e-20260821.90e4c9.png?width=800)