Webデザイナコンポーネントの使用（Nuxt.js）

Nuxt.jsはVueをベースに開発されたフレームワークであり、アプリケーションに対して明確に定義された構造を提供し、最適化によって開発プロセスを高速化します。このチュートリアルでは、レポートデザイナコンポーネントを使用してNuxt.jsアプリケーションを作成し、単純なレポートを読み込みます。

Nuxt.jsアプリケーションを作成する

新しいNuxt.jsアプリケーションを作成する簡単な方法はCLIツールのnuxiを使用することです。

nuxiを使用するためには事前にNodeJSがコンピュータにインストールされている必要があります。

コマンドプロンプトで次のコマンドを入力して、新しいNuxt.jsアプリケーションを作成します。

npx nuxi@latest init arjs-nuxtjs-designer-app

作成したディレクトリを作業ディレクトリとします。次のコマンドを入力して作業ディレクトリに移動します。

cd arjs-nuxtjs-designer-app

作成したアプリケーションにはアプリケーションを動かすのに必要なパッケージがまだインストールされていません。次のコマンドを入力して必要なパッケージをインストールします。

npm install

次のコマンドを入力してActiveReportsJSのVue対応パッケージ、およびWebデザイナコンポーネントを日本語化するためのローカライズパッケージをインストールします。

npm install @grapecity/activereports-vue @grapecity/activereports-localization

nuxiを利用してアプリケーションを作成した場合、最初からViteを利用した形式でアプリケーションが作成されます。ActiveReportsJSをViteと連携させるには設定を追加する必要があり、プロジェクトのルートフォルダに「alias.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;

nuxt.config.jsファイルを開き、以下の内容を設定します。ActiveReportsJSをViteと連携させる設定の他、ActiveReportsJSはクライアント側でのみ動作する製品のためSSR（サーバーサイドレンダリング）を抑止します。

// https://nuxt.com/docs/api/configuration/nuxt-config
import path from "path";

export default defineNuxtConfig({
  ssr: false,
  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"
          ),
        },
      ],  
    }
  }
})

ルートディレクトリ直下のapp.vueファイルを開き、以下の内容を設定します。

<template>
  <div id="designer-host" >
    <Designer v-bind:report="{id: 'reports/quick-start-sample.rdlx-json' }" language="ja" />
  </div>
</template>

<script setup>
import {Designer} from '@grapecity/activereports-vue';
import "@grapecity/activereports-localization/dist/designer/ja-locale";
</script>

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

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

public\reportsディレクトリを作成し、サンプルレポートを作成するで作成したquick-start-sample.rdlx-jsonファイルを配置します。
次のコマンドを入力してNuxt.jsアプリケーションを実行します。

npm run dev

ブラウザで「localhost:3000」を参照し、アプリケーションを表示します。