Using ActiveReportsJS Report Designer Component in Vue applications

Create a Vue Application

The easiest and recommended way for creating a new Vue application is to use Vue CLI

vue create arjs-designer-app

Install ActivereportsJS

The report designer component is part of @grapecity/activereports npm package. To install the current version, run the following command from the application's root folder.

npm install @grapecity/activereports

Alternatively, if using yarn:

yarn add @grapecity/activereports

Add the Report Designer Host component

Add the DesignerHost.vue file in the src\components folder of the Vue application and insert the following code.

<template>
  <div id="designer-host"></div>
</template>

<script>
import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";
export default {
  name: "DesignerHost",
  mounted: function() {
    new ReportDesigner("#designer-host");
  },
};
</script>

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

This code initializes the Report Designer instance once the component is mounted and the hosting element is available.

Add DesignerHost component to the application

Modify the template and script parts of src\App.vue file so that it contains the following code

<template>
  <div id="app">
    <DesignerHost />
  </div>
</template>

<script>
import DesignerHost from "./components/DesignerHost.vue";

export default {
  name: "App",
  components: {
    DesignerHost,
  },
};
</script>

Import required styles to src\main.js

import "@grapecity/activereports/styles/ar-js-ui.css";
import "@grapecity/activereports/styles/ar-js-designer.css";

Run and test the application

Run the application by using the npm run serve or yarn serve command. The ActiveReportsJS Designer component will appear on the start page of the application. Test the basic functionality by adding controls, setting their properties, creating the data source, et cetera. Visit the Developer Guide and the Online Demo for more information on how to use the Report Designer component.