# Using ActiveReportsJS Report Designer Component in Vue applications

Learn how to integrate the ActiveReportsJS Report Designer component in the Vue.js-based application.

## Content

### Create Vue Application

The easiest and recommended way for creating a new Vue application is to use the [create-vue](https://github.com/vuejs/create-vue) tool. Run the following command from the terminal or command prompt:

```bash
npm create vue@3
```

It will ask for several questions regarding features such as TypeScript and testing support, and below you can find the recommended answers.

```text
✔ Project name: … arjs-vue-designer-app
✔ Add TypeScript? … Yes
✔ Add JSX Support? … Yes
✔ Add Vue Router for Single Page Application development? … No
✔ Add Pinia for state management? … No
✔ Add Vitest for Unit testing? … No
✔ Add Cypress for both Unit and End-to-End testing? … No
✔ Add ESLint for code quality? … Yes
✔ Add Prettier for code formatting? … No

Scaffolding project in .arjs-vue-viewer-app...
Done.
```

### Install ActivereportsJS npm packages

We distribute the Vue Report Designer Component via [@mescius/activereportsjs-vue](https://www.npmjs.com/package/@mescius/activereportsjs-vue) npm package that depends on the main [@mescius/activereportsjs](https://www.npmjs.com/package/@mescius/activereportsjs) package that includes the core functionality.
To install the most current version of these packages, run the following command from the application's root folder.

```bash
npm install @mescius/activereportsjs-vue@latest    
```

Or if you are using yarn:

```bash
yarn add @mescius/activereportsjs-vue@latest
```

### Add ActiveReportsJS report to the application

ActiveReportsJS uses [JSON format](https://www.json.org/json-en.html) and `rdlx-json` extension for report template files.
In the `public` folder, create the new file called `report.rdlx-json` and insert the following JSON content into that file.

```json
{
  "Name": "Report",
  "Body": {
    "ReportItems": [
      {
        "Type": "textbox",
        "Name": "TextBox1",
        "Value": "Hello, ActiveReportsJS Designer",
        "Style": {
          "FontSize": "18pt"
        },
        "Width": "8.5in",
        "Height": "0.5in"
      }
    ]
  }
}
```

### Add Vue Report Designer component to the application

Open the `src\App.vue` file and replace the default content with the following code. This [single file component](https://vuejs.org/v2/guide/single-file-components.html) uses the [Vue Report Designer](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Integration/Vue-Component) to load the report template that you added on the previous step. It also imports the default [Report Designer Component Styles](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Themes#built-in-themes) and defines style for the designer's hosting element.

```html
<template>
  <div id="designer-host">
    <JSDesigner v-bind:report="{id: 'report.rdlx-json', displayName: 'my report' }"></JSDesigner>
  </div>
</template>

<script lang="ts">
import { Designer } from "@mescius/activereportsjs-vue";

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

<style src="../node_modules/@mescius/activereportsjs/styles/ar-js-ui.css"></style>
<style src="../node_modules/@mescius/activereportsjs/styles/ar-js-designer.css" ></style>

<style>
#designer-host {
  width: 100%;
  height: 100vh;
}
</style>
```

### Removing default app style

To prevent the default application style to interfere with the Report Viewer layout, open the `src\main.ts` folder and replace its content with the following

```ts
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
```

### Run and test the application

You can run the application by using the yarn run dev or npm run dev commands. By default, the project runs at [http://localhost:5173/](http://localhost:5173/).
The `ActiveReportsJS Designer` component will appear on the start page of the application and display the report design. Test the basic functionality by adding report items, setting their properties, creating the data source, et cetera. Visit the [Developer Guide](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Overview) and the [Online Demo](/activereportsjs/demos/features/designer-integration/vue) for more information on how to use the Report Designer component.