Get Started with ActiveReportsJS Report Designer in Nuxt.js

Nuxt.js is a Vue-based framework that provides a well-defined structure for your application along with optimizations that make the development process and final application faster. In this tutorial, we build a Nuxt.js application that uses the Report Designer component to load a simple report.

Create a Nuxt.js Application

The easiest way to create a Nuxt.js application is to use the Create Nuxt App tool. Run the following command from the command prompt or terminal to create a Nuxt.js project.

# with npm v6.1+
npm init nuxt-app arjs-nuxtjs-designer-app

# with npx(included by default with npm v5.2+)
npx create-nuxt-app arjs-nuxtjs-designer-app

# with yarn
yarn create nuxt-app arjs-nuxtjs-designer-app

It will ask you several questions and here are answers you could use

 Project name: arjs-nuxtjs-designer-app
 Programming language: TypeScript
 Package manager: Yarn
 UI framework: None
 Nuxt.js modules: None
 Linting tools: None
 Testing framework: None
 Rendering mode: Single Page App
 Deployment target: Server (Node.js hosting)
 Development tools: None
 Version control system: None

Install NPM packages

We distribute the Vue Report Designer Component via the @grapecity/activereports-vue NPM package that depends on the @grapecity/activereports package that includes the core functionality. In addition, using ActiveReportsJS with Vue v2.x requires the@vue/composition-api and the @nuxtjs/composition-api packages.

To install the current version of these packages, run the following command from the application's root folder.

# with npm
npm i @grapecity/activereports-vue @vue/composition-api @nuxtjs/composition-api

# with yarn
yarn add @grapecity/activereports-vue @vue/composition-api @nuxtjs/composition-api

Configuring Nuxt.js

Open the nuxt.config.js file located in the root folder of the application and add the '@nuxtjs/composition-api/module' string into the buildModules array, so it looks like below

  buildModules: [
    // https://go.nuxtjs.dev/typescript
    '@nuxt/typescript-build',
    '@nuxtjs/composition-api/module'
  ],

Add an ActiveReportsJS report into the application

ActiveReportsJS uses the JSON format and the rdlx-json extension for report template files. In the application's static folder, create a new file called report.rdlx-json and insert the following JSON content into it.

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

Add the Vue Report Designer component to the application

Open the pages\index.vue file and replace the default content with the following code. It integrates the Vue Report Designer and loads the report template that you added on the previous step. It also imports the default Report Designer Component Styles and defines the style for the designer's hosting element.

<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 '@grapecity/activereports-vue';

export default Vue.extend({
  name: "DesignerPage",
  components: {
    Designer,
}});
</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>

Run and test the application

You can run the application by using the yarn dev command. By default, the project runs on http://localhost:3000/. If you browse this URL, the ActiveReportsJS Report Designer will appear on the page. The designer will display the report that shows the Hello, ActiveReportsJS Designer text. You can test the basic functionality by using the Report Designer User Interface.