# ActiveReportsJS Report Viewer Wrapper for Vue

Learn how to use ActiveReportsJS Report Viewer wrapper for Vue

## Content

This page provides a detailed overview of ActiveReportsJS Report Viewer Wrapper for Vue. You can check [Get Started](/activereportsjs/docs/v6.1/GettingStarted/QuickStart/QuickStart-Vue) tutorial for a concise guide for integrating this wrapper to a Vue application.

### ActiveReportsJS Vue NPM package

We distribute the library that contains the ActiveReportsJS Report Viewer Wrapper for Vue component 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. If you are using Vue 2.0 then ActiveReportsJS also requires [@vue/composition-api](https://composition-api.vuejs.org/) package to be installed.

### ActiveReportsJS Vue Viewer component

ActiveReportsJS Vue Viewer 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 { Viewer as ReportViewer } from "@mescius/activereportsjs-vue";
import "@mescius/activereportsjs/styles/ar-js-viewer.css";

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

The viewer component accepts the following properties.

| Property | Type | Default Value | Description |
| -------- | ---- | ------------- | ----------- |
| availableExports | Array of strings |  | sets the list of exports that should be available in the viewer UI. See [Exports](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Export#enable-report-viewer-export-sidebar-in-vue-applications) page for more information |
| mouseMode | 'Pan' \| 'Selection' | 'Pan' | sets the mouse mode of Viewer component. |
| renderMode | 'Galley' \| 'Paginated' | 'Paginated' | sets the render mode of Viewer component |
| viewMode | 'Continuous' \| 'SinglePage' | 'Continuous' | sets the view mode of Viewer component |
| zoom | 'FitWidth' \| 'FitPage' \| number | 100 | sets the zoom mode of Viewer component |
| fullscreen | boolean | false | indicates whether the Viewer component should display the content in Full-Screen mode |
| toolbarVisible | boolean | true | indicates whether the toolbar of Viewer component is visible or not |
| sidebarVisible | boolean | true | indicates whether the sidebar of Viewer component is visible or not |
| panelsLayout | 'sidebar' \| 'toolbar' | 'toolbar' | indicates the location of Search and Export functions within the UI of Viewer component |
| parameterPanelLocation | 'default' \| 'top' \| 'bottom' | 'default' | indicates the location of the Parameters bar within the UI of Viewer component |
| toolbarLayout | Object |  | sets the list of available toolbar items. See [Customization](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Customization) page for more information |
| language | string |  | sets the language of the UI. See [Localization](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Localization) page for more information |
| exportsSettings | object |  | sets the export settings. Check the [Export Settings](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Export/Export-Settings) page for more information. |
| report | Object |  | sets the report to load in the Viewer component. |
| reportLoaded | (args: [ReportLoadEventArgs](https://developer.mescius.com/activereportsjs/api/modules/ReportViewer#reportloadeventargs))=>void |  | sets the handler for the event that occurs when a report is loaded but before rendering started |
| documentLoaded | (args: [DocumentLoadEventArgs](https://developer.mescius.com/activereportsjs/api/modules/ReportViewer#documentloadeventargs))=>void |  | sets the handler for the event that occurs when a report rendering is completed |
| errorHandler | ()=> void |  | sets the handler for the event that occurs if report rendering causes an error |
| showParametersOnOpen | 'auto'\|'always' | 'auto' | the `auto` value indicates that the `Parameters Panel` should open automatically upon report loading, even if the report's parameters have default values. |
| animations | AnimationSettings |  | Specifies the animation configuration | 
| themeConfig | UIThemeConfig |  | Specifies the theme configuration | 
| theme | ColorTheme or built-in theme ID |  | Specifies the active theme | 

You can bind these input properties to dynamic values to completely overwrite the viewer component's default UI, check [Customization page](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Customization) for more information.

Besides, the parent component can access [methods and properties of the Viewer Class instance](https://developer.mescius.com/activereportsjs/api/classes/ReportViewer.Viewer) class by creating the `ref` for a Viewer component and using its `Viewer` function, for example

```javascript
import Vue from "vue";
import { Viewer as ReportViewer } from "@mescius/activereportsjs-vue";
import "@mescius/activereportsjs/styles/ar-js-viewer.css";

new Vue({
  el: "#app",
  components: { "arjs-viewer": ReportViewer },
  template:
    "<div style='width:100%;height: 100vh'><arjs-viewer ref='reportViewer' /></div>",
  mounted: function () {
    this.$refs.reportViewer.Viewer().toggleFullScreen();
  },
});
```

### Related links

* [Live Demo](/activereportsjs/demos/features/viewer-integration/vue)
* [Customization](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Customization)
* [Localization](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Localization)
* [Print](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Print)
* [Export](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Export)
* [Themes](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Themes)