ActiveReportsJS in Vue

Let us see how to create a web application in Vue framework that uses the ActiveReportsJS Viewer component.


  • Node.js
  • Vue-CLI - Install the global tool for Vue using command
   npm install -g @vue/cli


   yarn global add -g @vue/cli

The following steps create a Vue application.

  1. Create a new Vue CLI application by typing following command in command console
   vue create arjs-vue -d
  1. Make this directory your working directory
   cd arjs-vue
  1. Install the ActiveReportsJS package
   yarn add @grapecity/activereports
  1. Save the following module source code in 'App.vue':
     <div id="ARJSviewerDiv" style="height: 800px" />

   import '@grapecity/activereports/styles/ar-js-viewer.css';
   import { Viewer } from '@grapecity/activereports';
   import { PdfExport, HtmlExport, XlsxExport, Core } from '@grapecity/activereports'; 

   export default {
     name: 'app',
     el: '#demo',
     mounted () {
       var v = new Viewer.Viewer('#ARJSviewerDiv');
          "Type": "report",
           "Body": {
             "Name": "Body",
             "Type": "section",
             ReportItems: [
               { Type: "textbox", Name: "textbox1", Value: "Hello from ActiveReportsJS", Height: "10in" }
           "Name": "Report"
  1. In the command console, type following command to run the application
   yarn serve

You will get a running application in the browser; follow the instructions in the application output.