# Get Started with ActiveReportsJS Report Viewer in Nuxt.js

Learn how to use ActiveReportsJS Report Viewer component within a Nuxt.js application

## Content

[Nuxt.js](https://nuxtjs.org/) is a Vue-based framework that provides a well-defined structure for your application along with optimizations that make the development process and final application faster. In this tutorial, we build a Nuxt.js application that uses the Report Viewer component to display the output of a simple report.

### Create a Nuxt.js Application

The easiest way to create a Nuxt.js application is to use the `Nuxt CLI`(nuxi) tool. Run the following command from the command prompt or terminal to create a Nuxt.js project.

```bash
# with npx(included by default with npm v5.2+)
npx nuxi@latest init arjs-nuxtjs-viewer-app

# with pnpm
pnpm dlx nuxi@latest init arjs-nuxtjs-viewer-app
```

### Install NPM packages

We distribute the Vue Report Viewer Component via the `@mescius/activereportsjs-vue` NPM package that depends on the `@mescius/activereportsjs` package that includes the core functionality.
To install the current version of these packages, run the following command from the application's root folder.

```bash
# with npm
npm i @mescius/activereportsjs-vue@latest

# with yarn
yarn add @mescius/activereportsjs-vue@latest
```

### Configuring Nuxt.js
Open the `nuxt.config.ts` file located in the root folder of the application and replace its content with the following:

```
export default defineNuxtConfig({
  ssr: false,
  devtools: { enabled: true },
})
```

### Add an ActiveReportsJS report into the application

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

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

### Add the Vue Report Viewer component to the application

Open the `app.vue` file and replace the default content with the following code. It integrates the [Vue Report Viewer](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Integration/Vue-Component) to display the report template that you added in the previous step. It also imports the default [Report Viewer Component Styles](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Themes) and defines the style for the viewer's hosting element.

```html
<template>
  <div id="viewer-host">
      <ClientOnly>
        <Viewer v-bind:report="{ Uri: 'report.rdlx-json' }" />
      </ClientOnly>  
  </div>
</template>

<script lang="ts">
import {PdfExport} from '@mescius/activereportsjs';
import {Viewer} from '@mescius/activereportsjs-vue';
const pdf = PdfExport;

export default {
  name: "IndexPage",
  components: {
    Viewer
  },
};
</script>

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

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

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

### Run and test the application

You can run the application by using the `yarn dev` command. By default, the project runs on `http://localhost:3000/`. If you browse this URL, the `ActiveReportsJS Report Viewer` will appear on the page. The viewer will display the report that shows the `Hello, ActiveReportsJS Viewer` text. You can test the basic functionality by using the [Report Viewer User Interface](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Viewer-Interface).