AG Grid Vue 3 Component

35.2.1 · active · verified Tue Apr 21

ag-grid-vue3 is the official Vue 3 wrapper component for AG Grid, a high-performance, fully-featured, and highly customizable data grid. It enables developers to integrate the powerful AG Grid core into their Vue 3 applications, providing advanced functionalities like sorting, filtering, grouping, aggregation, and custom cell rendering. The library emphasizes outstanding performance and aims to have no direct third-party dependencies for its core grid logic, though it naturally requires Vue 3 as a peer dependency for the wrapper. It is currently at version 35.2.1, with a rapid release cadence that includes frequent patch and minor updates, and significant new features or breaking changes occurring with major version increments. Its key differentiators include its extensive feature set, superior performance, and the ability to handle large datasets efficiently without external JavaScript libraries.

Common errors

```
AG Grid appears unstyled or broken, with columns stacked vertically.
```
cause The required AG Grid CSS styles and theme have not been imported.

fix Add the core AG Grid CSS and a theme CSS import to your main application entry file or component. Example: `import 'ag-grid-community/styles/ag-grid.css'; import 'ag-grid-community/styles/ag-theme-alpine.css';`
```
Grid does not update when I change a property on `columnDefs` or `rowData`.
```
cause AG Grid often relies on object identity for updates, especially for arrays like `columnDefs` and `rowData`. Mutating the array in place does not trigger a reactivity update.

fix Ensure you provide a *new* array reference when updating `columnDefs` or `rowData`. For example, `rowData.value = [...newRowData]` or `columnDefs.value = columnDefs.value.map(col => ({...col, newProp: 'value'}))`.
```
Error: Cannot find module 'ag-grid-community' or 'ag-grid-vue3' when running in Node.js (e.g., SSR or tests).
```
cause This can be related to the core AG Grid's module distribution (ESM/CJS) or incorrect import paths in a given module context.

fix If using AG Grid v35+, review the module distribution changes for `ag-grid-community`. Ensure your Node.js environment or build/test setup correctly handles ESM if you are using module-based imports. For package-based imports, CommonJS is often the default from v30.0.6. Verify the import paths are correct for your module system and environment.

Warnings

breaking The `flex` property within `defaultColDef` now defaults to `null` instead of `0` in AG Grid v35+. This change might alter column resizing behavior if you relied on the implicit `flex: 0` default for non-flexed columns, potentially causing unexpected layout changes.
Fix: Explicitly set `flex: 0` in your `defaultColDef` or individual `ColDef`s if you need the old behavior of non-flexing columns, or `flex: 1` (or another specific value) to enable column flexing as desired.
breaking When updating `columnDefs` using `api.setColumnDefs()` or by directly binding to `gridOptions.columnDefs`, AG Grid v35+ now uses object identity for change detection. Modifying the `columnDefs` array in-place will no longer trigger a grid update.
Fix: Always provide a new array reference when updating `columnDefs` to trigger reactivity. For example, use `columnDefs.value = [...newColumnDefs]` or ensure your state management system provides a new array instance on update rather than mutating the existing one.
breaking Starting with v35, the core `ag-grid-community` and `ag-grid-enterprise` packages are distributed as ESM-only for Node.js environments. This affects server-side rendering (SSR) or build processes that might import the core grid in Node.js, and specifically for AG Grid's 'Packages' distribution, this was later reverted to CommonJS from v30.0.6 onwards while 'Modules' remain ESM.
Fix: For Node.js environments (e.g., SSR), ensure your configuration supports ESM if using the module-based imports (e.g., `@ag-grid-community/core`). If using the package-based imports (`ag-grid-community`), these generally default to CommonJS since v30.0.6, which might simplify some setups. Verify import paths and module configurations in your build tools.

Install

npm install ag-grid-vue3 npm
yarn add ag-grid-vue3 yarn
pnpm add ag-grid-vue3 pnpm

Imports

AgGridVue
wrong:
```
const AgGridVue = require('ag-grid-vue3')
```
correct:
```
import { AgGridVue } from 'ag-grid-vue3'
```
AgGridVue is the primary Vue 3 component. The 'ag-grid-vue3' package is ESM-first, so CommonJS 'require' syntax is generally incorrect in modern Vue CLI or Vite projects targeting the browser.
ColDef / GridOptions / GridReadyEvent
wrong:
```
import { ColDef, GridOptions } from 'ag-grid-community'
```
correct:
```
import type { ColDef, GridOptions, GridReadyEvent } from 'ag-grid-community'
```
Type imports for core grid interfaces (like column definitions or grid options) should use 'import type' for clarity and to ensure they are stripped during compilation. These types are sourced from 'ag-grid-community', not 'ag-grid-vue3'.
AG Grid Styles
wrong:
```
/* Missing import of CSS styles */
```
correct:
```
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
```
AG Grid requires CSS for its layout and themes. It is a very common mistake to forget these critical imports, leading to an unstyled or visually broken grid. Always include 'ag-grid.css' and at least one theme, such as 'ag-theme-alpine' or 'ag-theme-quartz'.

Quickstart

This quickstart demonstrates how to set up a basic AG Grid with Vue 3 using the AgGridVue component, define column and row data, apply a theme, and handle grid readiness.

<template>
  <div class="ag-theme-alpine" style="height: 500px; width: 100%;">
    <AgGridVue
      :columnDefs="columnDefs"
      :rowData="rowData"
      :gridOptions="gridOptions"
      @grid-ready="onGridReady"
      style="height: 100%;"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { AgGridVue } from 'ag-grid-vue3';
import type { ColDef, GridReadyEvent, GridOptions } from 'ag-grid-community';

// Import AG Grid styles
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css'; // Or another theme like ag-theme-quartz

const columnDefs = ref<ColDef[]>([
  { field: 'make', headerName: 'Make', sortable: true, filter: true, flex: 1 },
  { field: 'model', headerName: 'Model', sortable: true, filter: true, flex: 1 },
  { field: 'price', headerName: 'Price', sortable: true, filter: true, type: 'numericColumn' },
]);

const rowData = ref<any[]>([]);

const gridOptions: GridOptions = {
  // Example: Enable row selection
  rowSelection: 'multiple',
  animateRows: true,
  // More options as needed
};

const onGridReady = (params: GridReadyEvent) => {
  // Simulate fetching data
  rowData.value = [
    { make: 'Tesla', model: 'Model Y', price: 64950 },
    { make: 'Ford', model: 'F-Series', price: 33865 },
    { make: 'Toyota', model: 'RAV4', price: 28475 },
    { make: 'Chevrolet', model: 'Silverado', price: 34600 },
    { make: 'Honda', model: 'CR-V', price: 29500 },
    { make: 'Ram', model: 'Ram Pickup', price: 37900 },
    { make: 'GMC', model: 'Sierra', price: 39500 }
  ];
  params.api.sizeColumnsToFit();
};
</script>

<style scoped>
/* Scoped styles are generally not used for global AG Grid themes,
   but can be used for wrapper element styles or custom cell renderers. */
</style>

view raw JSON →