How to use ag-grid in a Nuxt app

问题:

I'm building a Nuxt application and I'm trying to render an ag-grid in one of my pages

I created a plugin called ag-grid.js:

import * as agGridEnterpise from 'ag-grid-enterprise/main'

agGridEnterpise.LicenseManager.setLicenseKey([MY_LICENSE_KEY])

On nuxt.config.js i have registered the plugin:

plugins: [
    //...
    {
      src: '~/plugins/ag-grid.js',
      ssr: false
    }
],

And in my page component i have:

<template>
    <ag-grid-vue ref="table" class="ag-theme-material" 
 :pinnedTopRowData="pinnedRow ? [pinnedRow] : []" :gridOptions="gridOptions" 
 :columnDefs="columnDefs" :rowData="tableData" v-show="!loadingGridData" 
 :cellValueChanged="onCellValueChanged">
    </ag-grid-vue>
</template>
<script>
import { AgGridVue } from 'ag-grid-vue'
export default {
  // ....
  components: {
    'ag-grid-vue': AgGridVue
    // ....
  }
}
</script>

But when I'm rendering the page i get the following error:

TypeError: Cannot read property 'match' of undefined at Environment.webpackJsonp../node_modules/ag-grid/dist/lib/environment.js.Environment.getTheme (C:\xampp\htdocs\ate_crm_webapp\node_modules\ag-grid\dist\lib\environment.js:76) at GridOptionsWrapper.webpackJsonp../node_modules/ag-grid/dist/lib/gridOptionsWrapper.js.GridOptionsWrapper.specialForNewMaterial (C:\xampp\htdocs\ate_crm_webapp\node_modules\ag-grid\dist\lib\gridOptionsWrapper.js:636) at GridOptionsWrapper.webpackJsonp../node_modules/ag-grid/dist/lib/gridOptionsWrapper.js.GridOptionsWrapper.getHeaderHeight (C:\xampp\htdocs\ate_crm_webapp\node_modules\ag-grid\dist\lib\gridOptionsWrapper.js:352) at GridOptionsWrapper.webpackJsonp../node_modules/ag-grid/dist/lib/gridOptionsWrapper.js.GridOptionsWrapper.getGroupHeaderHeight (C:\xampp\htdocs\ate_crm_webapp\node_modules\ag-grid\dist\lib\gridOptionsWrapper.js:368) at GridPanel.webpackJsonp../node_modules/ag-grid/dist/lib/gridPanel/gridPanel.js.GridPanel.setBodyAndHeaderHeights (C:\xampp\htdocs\ate_crm_webapp\node_modules\ag-grid\dist\lib\gridPanel\gridPanel.js:1193) at GridPanel.webpackJsonp../node_modules/ag-grid/dist/lib/gridPanel/gridPanel.js.GridPanel.init (C:\xampp\htdocs\ate_crm_webapp\node_modules\ag-grid\dist\lib\gridPanel\gridPanel.js:191) at C:\xampp\htdocs\ate_crm_webapp\node_modules\ag-grid\dist\lib\context\context.js:215 at Array.forEach (<anonymous>) at C:\xampp\htdocs\ate_crm_webapp\node_modules\ag-grid\dist\lib\context\context.js:215 at Array.forEach (<anonymous>)

And i get a Vue warning:

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

found in

---> <AgGridVue>
       //....

Any clue what's going on?

回答1:

The ag-grid failed to find the css. That's why you need these lines to your nuxt.config.js file:

module.exports = {
  css: [
    '@/node_modules/ag-grid/dist/styles/ag-grid.css',
    '@/node_modules/ag-grid/dist/styles/ag-theme-material.css'
  ],
build: ect...

To resolve the other answerers problems (like MouseEvent error) put this to the build:

build: {
  extend (config, context) {
    config.resolve.alias['vue'] = 'vue/dist/vue.common'
  }
}