ビューワの使用（Nuxt.js）

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

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

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

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

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

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

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

cd arjs-nuxtjs-viewer-app

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

npm install

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

npm install @mescius/activereportsjs-vue @mescius/activereportsjs-i18n

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

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

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

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

<script setup>
import {Viewer} from '@mescius/activereportsjs-vue';
import "@mescius/activereportsjs-i18n";
</script>

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

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

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

npm run dev

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

quick-start-viewer