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.
npm install ag-grid-vue3Verified import paths — ran on the pinned version, not inferred.
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.
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.
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.
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.
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';`
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'}))`.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.