Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
AgGridVue
✓ import { AgGridVue } from 'ag-grid-vue';
✗ import { AgGridVue } from '@ag-grid-community/vue';
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`.
Grid Styles
✓ import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-quartz.css';
✗ import 'ag-grid-community/dist/styles/ag-grid.css';
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.
GridApi, ColumnApi (Types)
✓ import { GridApi, ColumnApi } from 'ag-grid-community';
✗ import { GridApi, ColumnApi } from 'ag-grid-vue';
Types for `GridApi` and `ColumnApi` are generally exposed from the core `ag-grid-community` package, not the framework-specific wrapper.
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.
<template>
<div id="app" style="width: 500px; height: 200px;">
<ag-grid-vue
class="ag-theme-quartz"
:columnDefs="columnDefs"
:rowData="rowData"
@grid-ready="onGridReady">
</ag-grid-vue>
</div>
</template>
<script>
import { AgGridVue } from 'ag-grid-vue';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-quartz.css';
export default {
name: 'App',
components: {
AgGridVue,
},
data() {
return {
gridApi: null,
columnApi: null,
columnDefs: [
{ headerName: 'Make', field: 'make' },
{ headerName: 'Model', field: 'model' },
{ headerName: 'Price', field: 'price' },
],
rowData: [
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxster', price: 72000 },
],
};
},
methods: {
onGridReady(params) {
this.gridApi = params.api;
this.columnApi = params.columnApi;
console.log('Grid is ready!');
// Example: Automatically size columns to fit
// this.gridApi.sizeColumnsToFit();
},
},
// Vue 2 lifecycle hook for initial data or setup
created() {
// console.log('App created');
},
mounted() {
// console.log('App mounted');
},
};
</script>
<style>
/* Basic styles to make the app visible */
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Debug
Known issues
breakingThe `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.fixFor 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.
affects: >=32.0.0 (of core AG Grid)
gotchaAG 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.fixEnsure 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.
affects: >=1.0.0
gotchaThe 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.fixUpdate 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.
affects: >=27.0.0
deprecatedAs 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.fixConsider 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.
affects: >=32.0.0 (of core AG Grid)
breakingAG 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.fixRefer 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.
affects: >=33.0.0 (of core AG Grid)
Errors
Common errors & fixes
Error: Failed to mount component: template or render function not defined.
The `AgGridVue` component is not properly registered with Vue, or its template/render function is missing.
fixEnsure `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.
Cannot read properties of undefined (reading 'api') / TypeError: this.gridApi is undefined
Attempting to access `gridApi` or `columnApi` before the `grid-ready` event has fired and set the `api` properties.
fixAccess `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.
Module not found: Error: Can't resolve 'ag-grid-community/styles/ag-grid.css'
Incorrect import path for AG Grid CSS files, or `ag-grid-community` package not installed.
fixVerify `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`).
AG Grid: No modules are registered. Please see: https://www.ag-grid.com/javascript-data-grid/modules/
When using AG Grid v27+ with a modular setup, required modules (e.g., `ClientSideRowModelModule`) were not explicitly registered.
fixImport 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. Audit
Dependencies
vuerequiredPeer dependency for Vue 2 framework integration.
vue-property-decoratorrequiredInternal package dependency for Vue 2 component setup; required by `ag-grid-vue` v31.x.
ag-grid-communityrequiredCore AG Grid library providing grid functionality and styles.