# Get Started with ActiveReportsJS Report Designer in Nuxt.js

Learn how to use the ActiveReportsJS Designer 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 Designer component to load 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-designer-app

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

### Install NPM packages

We distribute the [Vue Report Designer Component](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Overview) 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 Designer",
        "Style": {
          "FontSize": "18pt"
        },
        "Width": "8.5in",
        "Height": "0.5in"
      }
    ]
  }
}
```

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

Open the `app.vue` file and replace the default content with the following code. It integrates the Vue Report Designer and loads 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) and defines the style for the designer's hosting element.

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

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

export default{
  name: "DesignerPage",
  components: {
    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 scoped>
#designer-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 Designer` will appear on the page. The designer will display the report that shows the `Hello, ActiveReportsJS Designer` text. You can test the basic functionality by using the [Report Designer User Interface](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Designer-Interface).