# Nuxt에서 ActiveReportsJS 보고서 디자이너 시작하기

## Content

[Nuxt](https://nuxtjs.org/) 는 개발 프로세스 및 최종 응용 프로그램을 더 빠르게 만드는 최적화와 함께 응용 프로그램에 잘 정의된 구조를 제공하는 Vue 기반 프레임워크입니다. 이 자습서에서는 보고서 디자이너 구성 요소를 사용하여 간단한 보고서를 로드하는 Nuxt 응용 프로그램을 빌드합니다.

### Nuxt 응용 프로그램 만들기

Nuxt 응용 프로그램을 만드는 가장 쉬운 방법은 [Nuxt App 만들기](https://github.com/nuxt/create-nuxt-app) 도구를 사용하는 것입니다. 명령 프롬프트 또는 터미널에서 다음 명령을 실행하여 Nuxt 프로젝트를 생성합니다.

```bash
# with npx(included by default with npm v5.2+)
npx nuxi@latest init arjs-nuxtjs-designer-app

# with pnpm
pnpm dlx nuxi@latest init arjs-nuxtjs-designer-app
```

### NPM 패키지 설치

핵심 기능을 포함하는 `@mescius/activereportsjs` 패키지에 의존하는 `@mescius/activereportsjs-vue` NPM 패키지를 통해 [Vue 보고서 디자이너 컴포넌트](/activereportsjs/docs/GettingStarted/QuickStart-ARJS-Designer-Component/QuickStart-Vue)를 배포합니다.
이러한 패키지의 현재 버전을 설치하려면 응용 프로그램의 루트 폴더에서 다음 명령을 실행하십시오.

```bash
# with npm
npm i @mescius/activereportsjs-vue@latest

# with yarn
yarn add @mescius/activereportsjs-vue@latest
```

### Nuxt 구성

응용 프로그램의 루트 폴더에 위치한 `Nuxt.config.ts` 파일을 열고 내용을 다음과 같이 교체합니다.

```auto
export default defineNuxtConfig({
  ssr: false,
  devtools: { enabled: true },
})
```

### 응용 프로그램에 ActiveReportsJS 보고서 추가

ActiveReportsJS는 [JSON](https://www.json.org/json-en.html) 형식과 `rdlx-json`보고서 템플릿 파일의 확장자를 사용합니다. 애플리케이션의 `public`폴더에서 라는 새 파일을 만들고 `report.rdlx-json`다음 JSON 콘텐츠를 삽입합니다.

```json
{
  "Name": "Report",
  "Body": {
    "ReportItems": [
      {
        "Type": "textbox",
        "Name": "TextBox1",
        "Value": "Hello, ActiveReportsJS Designer",
        "Style": {
          "FontSize": "18pt"
        },
        "Width": "8.5in",
        "Height": "0.5in"
      }
    ]
  }
}
```

### 애플리케이션에 Vue Report Designer 구성 요소 추가

파일을 열고 `pages\index.vue`기본 콘텐츠를 다음 코드로 바꿉니다. Vue 보고서 디자이너를 통합하고 이전 단계에서 추가한 보고서 템플릿을 로드합니다. 또한 기본 [보고서 디자이너 구성 요소 스타일을](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Themes) 가져오고 디자이너의 호스팅 요소에 대한 스타일을 정의합니다.

```html
<template>
  <div id="designer-host">
    <Designer v-bind:report="{id: 'report.rdlx-json', displayName: 'my report' }" />
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import {Designer} from '@mescius/activereportsjs-vue';

export default{
  name: "DesignerPage",
  components: {
    Designer,
}};
</script>

<style
  src="node_modules/@mescius/activereportsjs/styles/ar-js-ui.css"
></style>
<style
  src="node_modules/@mescius/activereportsjs/styles/ar-js-designer.css"
></style>

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

### 응용 프로그램실행 및 테스트

`yarn dev` 명령을 사용하여 응용 프로그램을 실행할 수 있습니다. 기본적으로 프로젝트는 `http://localhost:3000/`에서 실행됩니다 . 이 URL을 탐색하면 `ActiveReportsJS 보고서 디자이너`가 이 페이지에 나타납니다. 이 디자이너는 `Hello, ActiveReportsJS Designer`라는 텍스트를 보여주는 보고서를 표시합니다. [보고서 디자이너 사용자 인터페이스](/activereportsjs/docs/ReportAuthorGuide/Report-Designer-Interface)를 사용하여 기본 기능을 테스트할 수 있습니다 .