{"id":15081,"library":"ag-grid-vue3","title":"AG Grid Vue 3 Component","description":"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.","status":"active","version":"35.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/ag-grid/ag-grid","tags":["javascript","grid","data","table","vue","vuejs","typescript"],"install":[{"cmd":"npm install ag-grid-vue3","lang":"bash","label":"npm"},{"cmd":"yarn add ag-grid-vue3","lang":"bash","label":"yarn"},{"cmd":"pnpm add ag-grid-vue3","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for the AG Grid Vue 3 wrapper component.","package":"vue","optional":false},{"reason":"The core AG Grid library is a transitive dependency that provides the grid's functionality and styles. It's often installed explicitly for type imports and direct API usage.","package":"ag-grid-community","optional":false}],"imports":[{"note":"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.","wrong":"const AgGridVue = require('ag-grid-vue3')","symbol":"AgGridVue","correct":"import { AgGridVue } from 'ag-grid-vue3'"},{"note":"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'.","wrong":"import { ColDef, GridOptions } from 'ag-grid-community'","symbol":"ColDef / GridOptions / GridReadyEvent","correct":"import type { ColDef, GridOptions, GridReadyEvent } from 'ag-grid-community'"},{"note":"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'.","wrong":"/* Missing import of CSS styles */","symbol":"AG Grid Styles","correct":"import 'ag-grid-community/styles/ag-grid.css';\nimport 'ag-grid-community/styles/ag-theme-alpine.css';"}],"quickstart":{"code":"<template>\n  <div class=\"ag-theme-alpine\" style=\"height: 500px; width: 100%;\">\n    <AgGridVue\n      :columnDefs=\"columnDefs\"\n      :rowData=\"rowData\"\n      :gridOptions=\"gridOptions\"\n      @grid-ready=\"onGridReady\"\n      style=\"height: 100%;\"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { AgGridVue } from 'ag-grid-vue3';\nimport type { ColDef, GridReadyEvent, GridOptions } from 'ag-grid-community';\n\n// Import AG Grid styles\nimport 'ag-grid-community/styles/ag-grid.css';\nimport 'ag-grid-community/styles/ag-theme-alpine.css'; // Or another theme like ag-theme-quartz\n\nconst columnDefs = ref<ColDef[]>([\n  { field: 'make', headerName: 'Make', sortable: true, filter: true, flex: 1 },\n  { field: 'model', headerName: 'Model', sortable: true, filter: true, flex: 1 },\n  { field: 'price', headerName: 'Price', sortable: true, filter: true, type: 'numericColumn' },\n]);\n\nconst rowData = ref<any[]>([]);\n\nconst gridOptions: GridOptions = {\n  // Example: Enable row selection\n  rowSelection: 'multiple',\n  animateRows: true,\n  // More options as needed\n};\n\nconst onGridReady = (params: GridReadyEvent) => {\n  // Simulate fetching data\n  rowData.value = [\n    { make: 'Tesla', model: 'Model Y', price: 64950 },\n    { make: 'Ford', model: 'F-Series', price: 33865 },\n    { make: 'Toyota', model: 'RAV4', price: 28475 },\n    { make: 'Chevrolet', model: 'Silverado', price: 34600 },\n    { make: 'Honda', model: 'CR-V', price: 29500 },\n    { make: 'Ram', model: 'Ram Pickup', price: 37900 },\n    { make: 'GMC', model: 'Sierra', price: 39500 }\n  ];\n  params.api.sizeColumnsToFit();\n};\n</script>\n\n<style scoped>\n/* Scoped styles are generally not used for global AG Grid themes,\n   but can be used for wrapper element styles or custom cell renderers. */\n</style>","lang":"typescript","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=35.0.0"},{"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.","message":"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.","severity":"breaking","affected_versions":">=35.0.0"},{"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.","message":"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.","severity":"breaking","affected_versions":">=35.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"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';`","cause":"The required AG Grid CSS styles and theme have not been imported.","error":"AG Grid appears unstyled or broken, with columns stacked vertically."},{"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'}))`.","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.","error":"Grid does not update when I change a property on `columnDefs` or `rowData`."},{"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.","cause":"This can be related to the core AG Grid's module distribution (ESM/CJS) or incorrect import paths in a given module context.","error":"Error: Cannot find module 'ag-grid-community' or 'ag-grid-vue3' when running in Node.js (e.g., SSR or tests)."}],"ecosystem":"npm"}