<commit_before>---
title: "Vue Grid | ag-Grid"
---

## Overview

ag-Grid is designed to integrate deeply into Vue.<br>
Use our grid as a Vue component to quickly add a Vue grid table to your application.<br>
Discover key benefits and resources available to quickly add a data grid or Vue datatable to your Vue application.

This page details how to set up ag-Grid inside a Vue application.

## ag-Grid VueJS Features

[Every feature](../features-overview/) of ag-Grid is available when using the ag-Grid Vue table Component. The Vue Table Grid Component wraps the functionality of ag-Grid, it doesn't duplicate, so there will be no difference between core ag-Grid and Vue ag-Grid when it comes to features.

## Configuring ag-Grid in Vue

You can configure the grid in the following ways through VueJS:

- **Events:** All data out of the grid comes through events. These use VueJS event bindings eg `@model-updated="onModelUpdated"`. As you interact with the grid, the different events are fixed and output text to the console (open the dev tools to see the console). Note: Event binding must use the kebab style naming (i.e. `@model-updated`.
- **Properties:** All the data is provided to the grid as VueJS bindings. These are bound onto the ag-Grid properties bypassing the elements attributes. The values for the bindings come from the parent controller. eg `:rowData="rowData"`

- **Attributes:** When the property is just a simple string value, then no binding is necessary, just the value is placed as an attribute eg `rowHeight="22"`. If the attribute is a boolean and a value is not provided, it is taken as true.

- **Changing Properties:** When a property changes value, VueJS automatically passes the new value onto the grid.

Notice that the Vuejs table grid has its properties marked as **immutable**. Hence for object properties, the object reference must change for the grid to take impact. For example, `rowData` must be a new list of data for the grid to be informed to redraw.

### Defining VueJS Components for use in ag-Grid

VueJS components can be defined as either simple inline components, or as full/complex externalised ones (i.e in a separate file).<commit_msg>AG-4634 - added vue getting started pages<commit_after>---
title: "Vue Grid | ag-Grid"
frameworks: ["vue"]
---

## Overview

ag-Grid is designed to integrate deeply into Vue.<br>
Use our grid as a Vue component to quickly add a Vue grid table to your application.<br>
Discover key benefits and resources available to quickly add a data grid or Vue datatable to your Vue application.

This page details how to set up ag-Grid inside a Vue application.

## ag-Grid VueJS Features

[Every feature](../features-overview/) of ag-Grid is available when using the ag-Grid Vue table Component. The Vue Table Grid Component wraps the functionality of ag-Grid, it doesn't duplicate, so there will be no difference between core ag-Grid and Vue ag-Grid when it comes to features.

## Configuring ag-Grid in Vue

You can configure the grid in the following ways through VueJS:

- **Events:** All data out of the grid comes through events. These use VueJS event bindings eg `@model-updated="onModelUpdated"`. As you interact with the grid, the different events are fixed and output text to the console (open the dev tools to see the console). Note: Event binding must use the kebab style naming (i.e. `@model-updated`.
- **Properties:** All the data is provided to the grid as VueJS bindings. These are bound onto the ag-Grid properties bypassing the elements attributes. The values for the bindings come from the parent controller. eg `:rowData="rowData"`

- **Attributes:** When the property is just a simple string value, then no binding is necessary, just the value is placed as an attribute eg `rowHeight="22"`. If the attribute is a boolean and a value is not provided, it is taken as true.

- **Changing Properties:** When a property changes value, VueJS automatically passes the new value onto the grid.

Notice that the Vuejs table grid has its properties marked as **immutable**. Hence for object properties, the object reference must change for the grid to take impact. For example, `rowData` must be a new list of data for the grid to be informed to redraw.

### Defining VueJS Components for use in ag-Grid

VueJS components can be defined as either simple inline components, or as full/complex externalised ones (i.e in a separate file).
{'fraction_non_alphanumeric': 0.0653254972875226, 'fraction_numerical': 0.0018083182640144665, 'mean_word_length': 4.249110320284697, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1567525', 'n_tokens_mistral': 1136, 'n_tokens_neox': 1111, 'n_words': 688}