title: How to use ag-grid in a Nuxt app
body: <p>I'm building a Nuxt application and I'm trying to render an ag-grid in one of my pages</p>
  
  <p>I created a plugin called <code>ag-grid.js</code>:</p>
  
  <pre><code>import * as agGridEnterpise from 'ag-grid-enterprise/main'
  
  agGridEnterpise.LicenseManager.setLicenseKey([MY_LICENSE_KEY])
  </code></pre>
  
  <p>On <code>nuxt.config.js</code> i have registered the plugin:</p>
  
  <pre><code>plugins: [
      //...
      {
        src: '~/plugins/ag-grid.js',
        ssr: false
      }
  ],
  </code></pre>
  
  <p>And in my page component i have:</p>
  
  <pre><code>&lt;template&gt;
      &lt;ag-grid-vue ref="table" class="ag-theme-material" 
   :pinnedTopRowData="pinnedRow ? [pinnedRow] : []" :gridOptions="gridOptions" 
   :columnDefs="columnDefs" :rowData="tableData" v-show="!loadingGridData" 
   :cellValueChanged="onCellValueChanged"&gt;
      &lt;/ag-grid-vue&gt;
  &lt;/template&gt;
  &lt;script&gt;
  import { AgGridVue } from 'ag-grid-vue'
  export default {
    // ....
    components: {
      'ag-grid-vue': AgGridVue
      // ....
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>But when I'm rendering the page i get the following error:</p>
  
  <p><code>
  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 (&lt;anonymous&gt;)
      at C:\xampp\htdocs\ate_crm_webapp\node_modules\ag-grid\dist\lib\context\context.js:215
      at Array.forEach (&lt;anonymous&gt;)
  </code></p>
  
  <p>And i get a Vue warning:</p>
  
  <pre><code>[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
  
  ---&gt; &lt;AgGridVue&gt;
         //....
  </code></pre>
  
  <p>Any clue what's going on?</p>