---
title: "Quick Start"
framework: vue
version: "2.1.2"
---

# Quick Start

AG Studio is an embedded analytics component for building interactive dashboards. This guide covers the minimum code required to render a working dashboard with a single data source and a blank canvas.

## 1. Install

Install the `ag-studio-vue3` package from `npm`:

```bash
npm install ag-studio-vue3
```

## 2. Create Studio

Studio works with arrays of plain objects, where each array becomes a data source.

Render the `AgStudio` component inside a sized parent (it automatically fills the available space) and set `mode` to `"edit"` so users can build and modify reports:

```html
<template>
    <div style="height: 100%; width: 100%">
        <AgStudio :data="data" mode="edit" />
    </div>
</template>

<script setup>
import { AgStudio } from 'ag-studio-vue3';

// Data to display in Studio (can also be loaded asynchronously)
const productData = [
    {
        productName: 'Printer',
        category: 'Printing & Imaging',
        brand: 'CleanSlate Office',
        listPrice: 109.09,
        unitCost: 92.26,
    },
    {
        productName: 'Notebook',
        category: 'Paper & Notebooks',
        brand: 'PaperLine',
        listPrice: 24.70,
        unitCost: 14.19,
    },
    {
        productName: 'Highlighters',
        category: 'Writing Instruments',
        brand: 'PaperLine',
        listPrice: 10.34,
        unitCost: 5.03,
    },
    // ... more rows
];

const data = {
    sources: [{
        id: 'products',
        data: productData,
    }],
};
</script>
```

## 3. Run your app

The result is an empty AG Studio component that users can begin building reports with:

#### Quick Start Example

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgStudio } from "ag-studio-vue3";
import {
  AgDataEngine,
  AgDataSourcesDefinition,
  AgStudioApi,
  AgStudioApiReadyEvent,
  AgStudioMode,
  AgStudioProperties,
} from "ag-studio";

const productData = [
  {
    productName: "Printer",
    category: "Printing & Imaging",
    brand: "CleanSlate Office",
    listPrice: 109.09,
    unitCost: 92.26,
  },
  {
    productName: "Notebook",
    category: "Paper & Notebooks",
    brand: "PaperLine",
    listPrice: 24.7,
    unitCost: 14.19,
  },
  {
    productName: "Highlighters",
    category: "Writing Instruments",
    brand: "PaperLine",
    listPrice: 10.34,
    unitCost: 5.03,
  },
  // ... more rows
];

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div style="display: flex; flex-direction: column; height: 100%">
      <ag-studio
        style="width: 100%; height: 100%;"
        class="my-studio-container"
        @api-ready="onApiReady"
        :data="data"
        :mode="mode"></ag-studio>
      </div>
        </div>
    `,
  components: {
    "ag-studio": AgStudio,
  },
  setup(props) {
    const studioApi = shallowRef<AgStudioApi | null>(null);
    const data = ref<AgDataSourcesDefinition | AgDataEngine>({
      sources: [
        {
          id: "products",
          data: productData,
        },
      ],
    });
    const mode = ref<AgStudioMode>("edit");

    const onApiReady = (params: AgStudioApiReadyEvent) => {
      studioApi.value = params.api;
    };

    return {
      studioApi,
      data,
      mode,
      onApiReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Quick Start Example](https://www.ag-grid.com/studio/examples/quick-start/quick-start-example/vue3/)

## Next Steps

**[Tutorial](https://www.ag-grid.com/studio/vue/tutorial/)**

New to AG Studio? Follow a step-by-step guide to build a complete multi-page dashboard from scratch.

**[Configuring Data](https://www.ag-grid.com/studio/vue/data/)**

Already familiar with dashboard tooling? Learn more about how to configure data.