Using Ag-Grid with Vue2 and Nuxt2

Question

I've just started learning (exploring the world of frontend if you will) now and received a task to incorporate Ag Grid into a very basic nuxt 2 app, but no matter what i do, it just doesn't seem to be possible - the grid isn't showing along with a number of other problems.

I tried following their official tutorial to at least create a Vue2 app with a very basic grid. If i follow what they say (https://www.ag-grid.com/vue-data-grid/vue2/) word for word, the first problem is -

Module not found: Error: Can't resolve 'vue-class-component' in '/home/ulkash/Desktop/JS/my-project/node_modules/vue-property-decorator/lib/decorators'

So i ran npm install --save vue-class-component

and got just a white page. If i open Developer tools it says:

TypeError: Class constructor BaseComponentWrapper cannot be invoked without 'new'

What can I do to make it work??

My App.vue:

<template>
  <ag-grid-vue style="width: 500px; height: 500px;" class="ag-theme-alpine" :columnDefs="columnDefs" :rowData="rowData">
  </ag-grid-vue>
</template>

<script>
import { AgGridVue } from "ag-grid-vue";

export default {
  name: "App",
  data() {
    return {
      columnDefs: null,
      rowData: null,
    };
  },
  components: {
    AgGridVue,
  },
  beforeMount() {
    this.columnDefs = [
      { field: "make" },
      { field: "model" },
      { field: "price" },
    ];

    this.rowData = [
      { make: "Toyota", model: "Celica", price: 35000 },
      { make: "Ford", model: "Mondeo", price: 32000 },
      { make: "Porsche", model: "Boxster", price: 72000 },
    ];
  },
};
</script>

<style lang="scss">
@import "~ag-grid-community/styles/ag-grid.css";
@import "~ag-grid-community/styles/ag-theme-alpine.css";
</style>

My jsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}

My package.json:

{
  "name": "my-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "ag-grid-community": "^30.0.2",
    "ag-grid-vue": "^30.0.2",
    "core-js": "^3.8.3",
    "vue": "^2.6.14",
    "vue-class-component": "^7.2.6",
    "vue-property-decorator": "^9.1.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "vue-template-compiler": "^2.6.14"
  }
}

Answer 1

This was a recent issue reported on the ag-grid github using their react library, but the issue (and solution) appears to be the same for Vue. To fix:

1. Make sure you're on ag-grid-vue and ag-grid-community v30.0.2 (according to your package.json you already are)
2. Include this code in your vue.config.js file

const { defineConfig } = require('@vue/cli-service');
var path = require('path');

module.exports = defineConfig({
  configureWebpack: {
    resolve: {
      alias: {
        'ag-grid-community/styles': path.resolve(
          __dirname,
          'node_modules/ag-grid-community/styles'
        ),
        'ag-grid-community': path.resolve(
          __dirname,
          'node_modules/ag-grid-community/dist/ag-grid-community.cjs.js'
        ),
      },
    },
  },
});

working Stackblitz example