{"id":14402,"library":"ag-grid-vue","title":"AG Grid Vue 2 Component","description":"AG Grid Vue Component (`ag-grid-vue`) provides a robust and high-performance data grid solution specifically for Vue 2 applications. This entry focuses on version 31.3.4, which integrates seamlessly with Vue 2.x environments. It offers extensive features for displaying, filtering, sorting, and aggregating large datasets. AG Grid typically follows a major release cadence of a few times a year for its core library, and this `ag-grid-vue` wrapper's version aligns directly with the core AG Grid version it supports, currently AG Grid v31. While newer versions of AG Grid (e.g., v35.x) exist with dedicated Vue 3 wrappers (`@ag-grid-community/vue3`) and modular Vue 2/3 compatible wrappers (`@ag-grid-community/vue`), this specific `ag-grid-vue` package (v31.3.4) remains the designated integration for pure Vue 2 projects using AG Grid v31 functionality. Many advanced capabilities, such as Excel export, row grouping, and integrated charting, are available in its enterprise version.","status":"maintenance","version":"31.3.4","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-vue","lang":"bash","label":"npm"},{"cmd":"yarn add ag-grid-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add ag-grid-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Vue 2 framework integration.","package":"vue","optional":false},{"reason":"Internal package dependency for Vue 2 component setup; required by `ag-grid-vue` v31.x.","package":"vue-property-decorator","optional":false},{"reason":"Core AG Grid library providing grid functionality and styles.","package":"ag-grid-community","optional":false}],"imports":[{"note":"For Vue 2 applications using `ag-grid-vue` (v31.x), import the component directly from 'ag-grid-vue'. Newer AG Grid versions (v32+) and Vue 3 use `@ag-grid-community/vue` or `@ag-grid-community/vue3`.","wrong":"import { AgGridVue } from '@ag-grid-community/vue';","symbol":"AgGridVue","correct":"import { AgGridVue } from 'ag-grid-vue';"},{"note":"Styles are imported from `ag-grid-community/styles/` since AG Grid v27/28. Old paths with `/dist/styles/` are deprecated. For AG Grid v33+, styles can be imported directly from `ag-grid-community` as JS objects or via the 'legacy' theme option.","wrong":"import 'ag-grid-community/dist/styles/ag-grid.css';","symbol":"Grid Styles","correct":"import 'ag-grid-community/styles/ag-grid.css';\nimport 'ag-grid-community/styles/ag-theme-quartz.css';"},{"note":"Types for `GridApi` and `ColumnApi` are generally exposed from the core `ag-grid-community` package, not the framework-specific wrapper.","wrong":"import { GridApi, ColumnApi } from 'ag-grid-vue';","symbol":"GridApi, ColumnApi (Types)","correct":"import { GridApi, ColumnApi } from 'ag-grid-community';"}],"quickstart":{"code":"<template>\n  <div id=\"app\" style=\"width: 500px; height: 200px;\">\n    <ag-grid-vue\n      class=\"ag-theme-quartz\"\n      :columnDefs=\"columnDefs\"\n      :rowData=\"rowData\"\n      @grid-ready=\"onGridReady\">\n    </ag-grid-vue>\n  </div>\n</template>\n\n<script>\nimport { AgGridVue } from 'ag-grid-vue';\nimport 'ag-grid-community/styles/ag-grid.css';\nimport 'ag-grid-community/styles/ag-theme-quartz.css';\n\nexport default {\n  name: 'App',\n  components: {\n    AgGridVue,\n  },\n  data() {\n    return {\n      gridApi: null,\n      columnApi: null,\n      columnDefs: [\n        { headerName: 'Make', field: 'make' },\n        { headerName: 'Model', field: 'model' },\n        { headerName: 'Price', field: 'price' },\n      ],\n      rowData: [\n        { make: 'Toyota', model: 'Celica', price: 35000 },\n        { make: 'Ford', model: 'Mondeo', price: 32000 },\n        { make: 'Porsche', model: 'Boxster', price: 72000 },\n      ],\n    };\n  },\n  methods: {\n    onGridReady(params) {\n      this.gridApi = params.api;\n      this.columnApi = params.columnApi;\n      console.log('Grid is ready!');\n      // Example: Automatically size columns to fit\n      // this.gridApi.sizeColumnsToFit();\n    },\n  },\n  // Vue 2 lifecycle hook for initial data or setup\n  created() {\n    // console.log('App created');\n  },\n  mounted() {\n    // console.log('App mounted');\n  },\n};\n</script>\n\n<style>\n/* Basic styles to make the app visible */\n#app {\n  font-family: Avenir, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n}\n</style>","lang":"javascript","description":"This example demonstrates a basic AG Grid setup within a Vue 2 component, using the Options API, defining columns, providing row data, and accessing the grid API upon readiness."},"warnings":[{"fix":"For AG Grid v32+, use `@ag-grid-community/vue` or `@ag-grid-community/vue3` for Vue 3. Consult the AG Grid migration guides (e.g., for v32, v33, v35) and utilize their provided codemods to automate many of the changes.","message":"The `ag-grid-vue` package (v31.x) is explicitly for AG Grid core v31 and Vue 2. Upgrading to AG Grid core v32 or higher, or migrating to Vue 3, requires switching to newer wrapper packages like `@ag-grid-community/vue` (often for current AG Grid core versions, supports Vue 2 with Composition API plugin or Vue 3) or `@ag-grid-community/vue3` (explicitly Vue 3). This transition involves breaking changes in package imports, component registration, and potentially module usage.","severity":"breaking","affected_versions":">=32.0.0 (of core AG Grid)"},{"fix":"Ensure you are using only Community features if you do not have an Enterprise license, or obtain the appropriate license for Enterprise features. The Enterprise package (`ag-grid-enterprise`) must also be installed and modules registered.","message":"AG Grid has distinct Community and Enterprise versions. Many advanced features (e.g., row grouping, Excel export, server-side row model, integrated charts) are only available in the Enterprise version, which requires a commercial license for production use. Running Enterprise features without a license will result in watermarks.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Update CSS import paths in your project to remove the `/dist` segment: `import 'ag-grid-community/styles/ag-grid.css';` and `import 'ag-grid-community/styles/ag-theme-YOUR_THEME.css';`. For AG Grid v33+, themes can be imported as JavaScript objects.","message":"The import paths for AG Grid styles changed significantly around v27/28. Old paths included `/dist/styles/` (e.g., `ag-grid-community/dist/styles/ag-grid.css`), while newer versions require importing directly from `ag-grid-community/styles/` (e.g., `ag-grid-community/styles/ag-grid.css`). Incorrect paths will lead to unstyled grids.","severity":"gotcha","affected_versions":">=27.0.0"},{"fix":"Consider migrating your application to Vue 3 to leverage the latest AG Grid features and support. If staying on Vue 2, be aware that you will be limited to `ag-grid-vue` v31.x and its corresponding core AG Grid v31 features.","message":"As of AG Grid v32, Vue 2 is no longer officially supported by the latest AG Grid wrappers (`@ag-grid-community/vue` or `@ag-grid-community/vue3`). While `ag-grid-vue` (v31.3.4) targets Vue 2, continued updates and new features will focus on Vue 3.","severity":"deprecated","affected_versions":">=32.0.0 (of core AG Grid)"},{"fix":"Refer to the AG Grid v33 migration guide for detailed steps, including using codemods to automate changes. This involves updating module imports and potentially changing how themes are applied to the grid.","message":"AG Grid v33 introduced a major change to module and package setup to reduce bundle size, unifying previous module/package methods. This impacts how features are imported and registered. Additionally, the theming API was overhauled in v33, moving from CSS class-based themes to JavaScript object-based themes.","severity":"breaking","affected_versions":">=33.0.0 (of core AG Grid)"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `AgGridVue` is correctly imported and registered in your Vue component's `components` option, and that `ag-grid-vue` is installed. For Vue 2, ensure you are not using `setup()` syntax intended for Vue 3 Composition API.","cause":"The `AgGridVue` component is not properly registered with Vue, or its template/render function is missing.","error":"Error: Failed to mount component: template or render function not defined."},{"fix":"Access `gridApi` and `columnApi` only after the `grid-ready` event, typically within the `onGridReady` handler, or ensure `gridApi` is reactively tracked and checked for existence before use.","cause":"Attempting to access `gridApi` or `columnApi` before the `grid-ready` event has fired and set the `api` properties.","error":"Cannot read properties of undefined (reading 'api') / TypeError: this.gridApi is undefined"},{"fix":"Verify `ag-grid-community` is installed via `npm install ag-grid-community`. Ensure CSS import paths are correct: `import 'ag-grid-community/styles/ag-grid.css';` (without `/dist`).","cause":"Incorrect import path for AG Grid CSS files, or `ag-grid-community` package not installed.","error":"Module not found: Error: Can't resolve 'ag-grid-community/styles/ag-grid.css'"},{"fix":"Import and register necessary modules from `ag-grid-community`. For a quick start, `import { ModuleRegistry, AllCommunityModule } from 'ag-grid-community'; ModuleRegistry.registerModules([AllCommunityModule]);` can be used, though tree-shaking benefits are lost. It's recommended to register only the modules you need.","cause":"When using AG Grid v27+ with a modular setup, required modules (e.g., `ClientSideRowModelModule`) were not explicitly registered.","error":"AG Grid: No modules are registered. Please see: https://www.ag-grid.com/javascript-data-grid/modules/"}],"ecosystem":"npm"}