CODEWITHSUNDEEP
vue.jsag-gridnuxt.js
AlbatiQue
AlbatiQue

Reputation: 35

How to implement ag-grid into nuxt.js

How to integrate ag-grid to work with nuxt.js via the nuxt.config file?

The error I'm getting:

commons.app.js:16278 Uncaught TypeError: Cannot read property '_init' of null
at AgGridVue (commons.app.js:16278)
at Function.Vue.use (commons.app.js:16233)
at Module../plugins/ag-grid.client.js (app.js:5186)
at webpack_require (runtime.js:791)
at fn (runtime.js:151)
at Module../.nuxt/index.js (app.js:1997)
at webpack_require (runtime.js:791)
at fn (runtime.js:151)
at Module. (app.js:236)
at Module../.nuxt/client.js (app.js:1308)

ag-grid.client.js:

import Vue from "vue";
import { AgGridVue } from "ag-grid-vue";

Vue.use(AgGridVue);

nuxt.config.js:

 plugins: [
"@/plugins/element-ui",
"@/plugins/tooltip",
"@/plugins/calendar",
"@/plugins/ag-grid.client.js"
],

The file to load table into:

<template>
  <div class="flex h-full">
      <no-ssr>

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

  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      columnDefs: null,
      rowData: null
    };
  },
  beforeMount() {
    this.columnDefs = [
      { headerName: "Make", field: "make" },
      { headerName: "Model", field: "model" },
      { headerName: "Price", field: "price" }
    ];

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

Upvotes: 1

Views: 1986

Answers (1)

Edison Harada
Edison Harada

Reputation: 86

In the file "ag-grid.client.js", you can't add a component with Vue.use, you need to use Vue.component and it'll register it globally:

import Vue from 'vue'
import { AgGridVue } from 'ag-grid-vue'

Vue.component('ag-grid-vue', AgGridVue)

And then you don't need to set the tag "".

Upvotes: 3

Related Questions