1. Home
  2. Forum
  3. Vue
  4. Build error when importing Pivotview

Build error when importing Pivotview

Hello,

I'm trying out whether or not the ej2-vue-pivotview component could work in a small project of mine.

However when i run npm run serve (vue-cli) i get the following error.

"This dependency was not found:

* @syncfuion/ej2-vue-pivotview in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/input/resourceplanning/ResourcePivot.vue?vue&type=script&lang=js&

To install it, you can run: npm install --save @syncfuion/ej2-vue-pivotview"

I have installed it version:  16.2.50

It seems to be directly connected to ..

import Vue from "vue";
import { PivotViewPlugin } from "@syncfuion/ej2-vue-pivotview";
Vue.use(PivotViewPlugin);

I have managed to get the datagrid working

Any ideas?




2 Replies
RN Renuka N Syncfusion Team October 4, 2018 05:58 AM UTC

Hi Thomas, 
 
Sorry for the inconvenience. 
 
We need to update the highlighted code snippet in the UG document and we will refresh the document as soon as possible. Please refer the below code snippet. 
 
Code Snippet: [Vue] 
<template> 
    <div id="app"> 
        <ejs-pivotview :dataSource="dataSource" :showGroupingBar="showGroupingBar" :showFieldList="showFieldList"> </ejs-pivotview> 
  </div> 
</template > 
 
<script> 
import Vue from "vue"; 
import {PivotViewPlugin, GroupingBar, FieldList } from "@syncfusion/ej2-vue-pivotview"; 
 
Vue.use(PivotViewPlugin); 
export default { 
            data() { 
        return { 
            dataSource: { 
            data: [ 
          { 
            balance: 2430.87, 
            quantity: 11, 
            name: "Skinner Ward", 
            gender: "male", 
            company: "GROK", 
            state: "New Jercy" 
          }, 
          { 
            balance: 3192.7, 
            quantity: 15, 
            name: "Gwen Dixon", 
            gender: "female", 
            company: "ICOLOGY", 
            state: "Vetaikan" 
          }, 
          { 
            balance: 1663.84, 
            quantity: 14, 
            name: "Deena Gillespie", 
            gender: "female", 
            company: "OVERPLEX", 
            state: "New Jercy" 
          } 
        ], 
        rows: [{name: "company" }], 
        columns: [{name: "name" }], 
        values: [{name: "balance" }, {name: "quantity" }], 
        filters: [{name: "gender" }] 
      }, 
      showFieldList: true, 
      showGroupingBar: true, 
    }; 
  }, 
  provide: { 
            pivotview: [GroupingBar, FieldList] 
  } 
}; 
</script> 
 
<style> 
</style> 
 
Meanwhile, we have prepared simple sample for your convenience. Please find the sample in below link. 
 
Please let us know, if you have any other queries. 
 
Thanks, 
Renuka N. 


TS Thomas Steck October 4, 2018 07:22 AM UTC

Hello Renuka,

Thanks, that seemed to do the trick! :)

Awesome to provide a file as well..

/Thomas

Loader.
Up arrow icon