4.0.0 • Public • Published

ActiveReportsJS Vue Wrapper

This package is a part of the ActiveReportsJS and provides vue wrapper for ARJS Viewer Component

Usage Example

  1. Install Vue CLI using following command
npm install -g @vue/cli
  1. Create new application and navigate to the application folder:
vue create arjs-vue -d
cd arjs-vue
  1. Add reference to ActiveReportsJS Vue module:
npm install @grapecity/activereports-vue

Or if you are using yarn:

yarn add @grapecity/activereports-vue

Note: If you are using Vue 2.0 then install @vue/composition-api package:

npm install @vue/composition-api

Or if you are using yarn:

yarn add @vue/composition-api
  1. Save the following module source code in src/App.vue:
    <div id="app" style="height: 100vh">
         <GcArViewer :report="{ Uri: reportTemplate }"></GcArViewer>

  import { Viewer } from "@grapecity/activereports-vue";
  import "@grapecity/activereports/styles/ar-js-ui.css";
  import "@grapecity/activereports/styles/ar-js-viewer.css";

  export default {
    name: "App",
    components: {
      GcArViewer: Viewer,
    data: function () {
      return {
        reportTemplate: {
          Type: "report",
          Body: {
            Name: "Body",
            Type: "section",
            ReportItems: [
                Type: "textbox",
                Name: "textbox1",
                Style: { FontSize: "18pt" },
                Value: "Hello, ActiveReportsJS Viewer",
                Height: "10in",
          Name: "Report",
  1. Start application
'npm run serve' or 'yarn serve' command
  1. Go to http://localhost:8080/


For more information on how to use ActiveReportsJS and available tools, refer to the Documentation or API reference for guidance.


npm i @grapecity/activereports-vue

DownloadsWeekly Downloads






Unpacked Size

25 kB

Total Files


Last publish


  • grapecity