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

# Quick Start

AG Grid is a high-performance Vue Data Grid library for building Vue Tables with unbeatable performance and hundreds of features. Available in Community and Enterprise editions. Visit [Community vs. Enterprise](https://www.ag-grid.com/vue-data-grid/community-vs-enterprise/) to learn more.

## Create a Vue Data Grid

Add AG Grid to your application in 60 seconds:

### 1. NPM Install

Install the `ag-grid-vue3` package, which also installs `ag-grid-community`:

```bash
npm install ag-grid-vue3
```

### 2. Register Modules

Register the `AllCommunityModule` to access all Community features:

```js
import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';

// Register all Community features
ModuleRegistry.registerModules([AllCommunityModule]);
```

> **Note**
>
> To minimize bundle size, only register the modules you want to use. See the [Modules](https://www.ag-grid.com/vue-data-grid/modules/) page for more information.

### 3. Import the Vue Data Grid

```html
<script>
import { AgGridVue } from "ag-grid-vue3"; // Vue Data Grid Component

export default {
    name: "App",
    components: {
        AgGridVue, // Add Vue Data Grid component
    },
    setup() {},
};
</script>
```

### 4. Define Rows and Columns

```js
setup() {
    // Row Data: The data to be displayed.
    const rowData = ref([
        { make: "Tesla", model: "Model Y", price: 64950, electric: true },
        { make: "Ford", model: "F-Series", price: 33850, electric: false },
        { make: "Toyota", model: "Corolla", price: 29600, electric: false },
    ]);

    // Column Definitions: Defines the columns to be displayed.
    const colDefs = ref([
        { field: "make" },
        { field: "model" },
        { field: "price" },
        { field: "electric" }
    ]);

    return {
        rowData,
        colDefs,
    };
},
```

### 5. Vue Data Grid Component

Set Rows and Columns as `ag-grid-vue` component attributes. Styling is applied through the class and style attributes.

```html
<template>
    <!-- The AG Grid component -->
    <ag-grid-vue
        :rowData="rowData"
        :columnDefs="colDefs"
        style="height: 500px"
    >
    </ag-grid-vue>
</template>
```

### 6. Example Vue Data Grid

Below is a live example of the application running. Click `</> Code` to see the code.

#### Quick Start Example

```ts
import { createApp, defineComponent, ref } from "vue";

import type { ColDef } from "ag-grid-community";
import {
  AllCommunityModule,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import { AgGridVue } from "ag-grid-vue3";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([AllCommunityModule]);

// Row Data Interface
interface IRow {
  make: string;
  model: string;
  price: number;
  electric: boolean;
}

// Define the component configuration
const App = defineComponent({
  name: "App",
  template: `
    <ag-grid-vue
        style="width: 100%; height: 100%"
        :columnDefs="colDefs"
        :rowData="rowData"
        :defaultColDef="defaultColDef"
    >
    </ag-grid-vue>
    `,
  components: {
    AgGridVue,
  },
  setup() {
    const rowData = ref<IRow[]>([
      { make: "Tesla", model: "Model Y", price: 64950, electric: true },
      { make: "Ford", model: "F-Series", price: 33850, electric: false },
      { make: "Toyota", model: "Corolla", price: 29600, electric: false },
      { make: "Mercedes", model: "EQA", price: 48890, electric: true },
      { make: "Fiat", model: "500", price: 15774, electric: false },
      { make: "Nissan", model: "Juke", price: 20675, electric: false },
    ]);

    const colDefs = ref<ColDef<IRow>[]>([
      { field: "make" },
      { field: "model" },
      { field: "price" },
      { field: "electric" },
    ]);

    const defaultColDef = {
      flex: 1,
    };

    return {
      rowData,
      colDefs,
      defaultColDef,
    };
  },
});

createApp(App).mount("#app");
```

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

> **Note**
>
> To live-edit the code, open the example in CodeSandbox or Plunker using the buttons to the lower-right.

## Next Steps

Now that you have a basic Vue Data Grid running, choose one of the following options to continue your learning journey:

- [Key Features](https://www.ag-grid.com/vue-data-grid/key-features/) — Browse an overview of our commonly used features
- [Tutorials](https://www.ag-grid.com/vue-data-grid/deep-dive/) — Get started with our step-by-step tutorials
- [Community vs. Enterprise](https://www.ag-grid.com/vue-data-grid/community-vs-enterprise/) — Understand the differences between each version