# Nuxt.js에서 ActiveReportsJS 보고서 뷰어 시작하기

## Content

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

### Nuxt.js 애플리케이션 만들기

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

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

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

### NPM 패키지 설치

핵심 기능을 포함하는 패키지에 `@grapecity/activereports-vue`의존하는 NPM 패키지를 통해 Vue Report Viewer 구성 요소를 배포합니다 . `@grapecity/activereports`또한 Vue v2.x에서 ActiveReportsJS를 사용하려면 `@vue/composition-api`및 `@nuxtjs/composition-api`패키지가 필요합니다.
이러한 패키지의 현재 버전을 설치하려면 애플리케이션의 루트 폴더에서 다음 명령을 실행하십시오.

```bash
# with npm
npm i @grapecity/activereports-vue%npm_version%

# with yarn
yarn add @grapecity/activereports-vue%npm_version%
```

### Nuxt.js 구성

<span style="color: rgb(34, 34, 34); font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Liberation Sans, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji, Font Awesome 5 Free; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">어플리케이션 루트에 </span>`alias.js`<span style="color: rgb(34, 34, 34); font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Liberation Sans, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji, Font Awesome 5 Free; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;"> 라는 새 파일을 만들고 다음의 코드를 추가합니다.</span>

```js
import moment from "./node_modules/moment";

export const { fn, min, max, now, utc, unix, months,
  isDate, locale, invalid, duration, isMoment, weekdays,
  parseZone, localeData, isDuration, monthsShort, weekdaysMin,
  defineLocale, updateLocale, locales, weekdaysShort, normalizeUnits,
  relativeTimeRounding, relativeTimeThreshold, calendarFormat, ISO_8601
} = moment;

export default moment;
```

<span style="color: rgb(34, 34, 34); font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Liberation Sans, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji, Font Awesome 5 Free; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">어플리케이션의 루트 폴더에 있는 </span>`nuxt.config.ts`<span style="color: rgb(34, 34, 34); font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Liberation Sans, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji, Font Awesome 5 Free; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;"> 파일을 열고 해당 콘텐츠를 아래의 코드로 바꿉니다.</span>

```ts
import path from "path";
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  ssr: false,
  devtools: { enabled: true },
  vite: {
    resolve: {
      alias: [
        {
          find: /^moment$/,
          replacement: path.resolve(__dirname, "./alias.js"),
        },
        {
          find: /^gc-dv$/,
          replacement: path.resolve(
            __dirname,
            "./node_modules/@grapecity/activereports/lib/node_modules/gc-dv.js"
          ),
        },
        {
          find: /^\@grapecity\/ar-js-pagereport$/,
          replacement: path.resolve(
            __dirname,
            "./node_modules/@grapecity/activereports/lib/node_modules/@grapecity/ar-js-pagereport.js"
          ),
        },
        {
          find: /^barcodejs$/,
          replacement: path.resolve(
            __dirname,
            "./node_modules/@grapecity/activereports/lib/node_modules/barcodejs.js"
          ),
        },
      ],
    },    
  }
})
```

### 애플리케이션에 ActiveReportsJS 보고서 추가

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

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

### 응용 프로그램에 Vue 보고서 뷰어 구성 요소 추가

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

```html
<template>
  <div id="viewer-host" >
    <Viewer v-bind:report="{ Uri: 'report.rdlx-json' }" />
  </div>
</template>

<script lang="ts">
import {PdfExport} from '@grapecity/activereports';
import {Viewer} from '@grapecity/activereports-vue';
const pdf = PdfExport;

export default {
  name: "IndexPage",
  components: {
    Viewer
  },
};
</script>

<style
  src="node_modules/@grapecity/activereports/styles/ar-js-ui.css"
></style>
<style
  src="node_modules/@grapecity/activereports/styles/ar-js-viewer.css"
></style>

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

### 애플리케이션 실행 및 테스트

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