# ActiveReportsJS ActiveReportsJS Vue Report Designer

Learn how to use ActiveReportsJS Vue Report Designer

## Content

This page provides a detailed overview of the ActiveReportsJS Vue Report Designer. You can check the [Get Started](/activereportsjs/docs/v6.1/GettingStarted/QuickStart-ARJS-Designer-Component/QuickStart-Vue) tutorial for a concise guide for integrating the report designer into a Vue application.

### ActiveReportsJS Vue NPM package

We distribute the library that contains the ActiveReportsJS Vue Report Designer via the [@mescius/activereportsjs-vue](https://www.npmjs.com/package/@mescius/activereportsjs-vue) npm package. The main [@mescius/activereportsjs](https://www.npmjs.com/package/@mescius/activereportsjs) package provides the core functionality. 

### ActiveReportsJS Vue Designer component

ActiveReportsJS Vue Designer component can be imported from `@mescius/activereportsjs-vue` package and included in a parent component's template, for example:

```javascript
import Vue from "vue";
import { Designer } from "@mescius/activereportsjs-vue";

new Vue({
  el: "#app",
  components: { "arjs-designer": Designer },
  template: "<div style='width:100%;height: 100vh'><arjs-designer /></div>",
});
```

The designer component accepts the following properties.

| Property | Type | Description |
| -------- | ---- | ----------- |
| onInit | ()=>[DesignerConfig](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner#designerconfig) | returns the [DesignerConfig](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner#designerconfig) object that contains the designer's initialization options |
| hotkeysEnabled | boolean | **Obsolete**: use the `onInit` callback instead. |
| language | string | **Obsolete**: use the `onInit` callback instead. |
| customInitTemplates |  | **Obsolete**: use the `onInit` callback instead. |
| fontSet | "default" \| "registered" \| "all" | **Obsolete**: use the `onInit` callback instead. |
| dataSources | array of [Data Source Templates](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner#datasourcetemplate) | sets the [Pre-defined data sources and data sets](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Add-Predefined-Datasources-Datasets). |
| reportList | array of [Report Resource Info items](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner#reportresourceinfo) | sets the [Pre-defined report names for a subreport](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Use-Shared-Resources) |
| imageList | array of [Image Resource Info items](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner#imageresourceinfo) | sets the [Pre-defined images for an Image report item](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Use-Shared-Resources) |
| onCreate | [onCreate function](https://developer.mescius.com/activereportsjs/api/interfaces/ReportDesigner.ActionHandlers#oncreate) | adds the [New Report button](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Create-New-Report#enabling-the-new-report-button) in the designer toolbar and sets the corresponding click handler |
| onOpen | [onOpen function](https://developer.mescius.com/activereportsjs/api/interfaces/ReportDesigner.ActionHandlers#onopen) | adds the [Open Report](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Create-New-Report#enabling-the-open-report-button) button in the designer toolbar and sets the corresponding click handler |
| onRender | [onRender function](https://developer.mescius.com/activereportsjs/api/interfaces/ReportDesigner.ActionHandlers#onrender) | adds the [Preview Report button](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Preview-Reports) in the designer toolbar and sets the corresponding click handler |
| onSave | [onSave function](https://developer.mescius.com/activereportsjs/api/interfaces/ReportDesigner.ActionHandlers#onsave) | adds the [Save Report button](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Save-Reports) in the designer toolbar and sets the corresponding click handler |
| onSaveAs | [onSaveAs function](https://developer.mescius.com/activereportsjs/api/interfaces/ReportDesigner.ActionHandlers#onsaveas) | adds the [Save As.. button](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Save-Reports) in the designer toolbar and sets the corresponding click handler |
| onOpenFileMenu | [onOpenFileMenu function](https://developer.mescius.com/activereportsjs/api/interfaces/ReportDesigner.ActionHandlers#onopenfilemenu) | adds the "File" menu in the designer toolbar and sets the corresponding click handler |
| report | [Report object](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner#report) | loads the specified report in the designer |
| documentChanged | (args: DocumentChangedEventArgs)=>void | sets the handler for the event that occurs when a report loaded into the designer changes |

In addition, the parent component can use the `getReport`, `setReport`, and `processCommand` methods of the [Designer class instance](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner) by creating the `ref` for a Designer component, for example

```javascript
import Vue from "vue";
import { Designer } from "@mescius/activereportsjs-vue";

new Vue({
  el: "#app",
  components: { "arjs-designer": Designer },
  template:
    "<div style='width:100%;height: 100vh'><arjs-designer ref='reportDesigner' /></div>",
  mounted: function () {
    this.$refs.reportDesigner.setReport({id: "report.rdlx-json"})
  },
});
```