🍉 Meet Flexmonster Pivot Table & Charts 2.9.Check out all hot features!
Get Free Trial

Step 5. Add Flexmonster instance to a Vue component

Answered
Cristian Marques Santos asked 6 days ago

Step 5. Add Flexmonster instance to a Vue component
Include the Pivot module in the <template> section of the chosen component (e.g., in the src/App.vue). Make sure the component template contains exactly one root <div> element.

<template>
<div id="app">
  <Pivot
ref="pivot"
v-bind:

report="'https://cdn.flexmonster.com/reports/report.json'">
</Pivot>

</div>
</template>


I have de return:
Failed to compile.

./src/App.vue
Module Error (from ./node_modules/eslint-loader/index.js):
error: Duplicate key 'components' (no-dupe-keys) at src\App.vue:35:3:
33 | name: "app",
34 | components: { TopMenu, SideMenu }, >
35 | components: { Pivot }, | ^
36 | };
37 | /*
38 | <template>

1 error found.

In my app.vue file I do it as follows:

<template>
  <section id=”app”>
    <TopMenu />
    <div class=”wrap”>
      <div>
        <SideMenu />
      </div>
      <div class=”pivot-example-container”>
        <router-view />
      </div>      
    </div>
    <div id=”app”>
        <Pivot
        ref=”pivot”
        v-bind:
        report=”‘https://cdn.flexmonster.com/reports/report.json'”>
      </Pivot>
    </div>
  </section>
</template>

<script>
import TopMenu from “./components/UIElements/TopMenu”;
import SideMenu from “./components/UIElements/SideMenu”;

 

6 answers

Public
Vera Didenko Vera Didenko Flexmonster 6 days ago

Hello, Cristian,
 
Thank you for reaching out to us.
 
According to the error, it seems you have two components definitions in your App.vue file:

components: { TopMenu, SideMenu },
components: { Pivot }

 

  • If you are trying to register the vue-flexmonster module locally in your project (see Step 4 (2)), please leave only one definition the following way:
    components: { TopMenu, SideMenu, Pivot }

    As a result, your App.vue file should look similar to this:

    <template>...</template>

    <script>

    import TopMenu from "./components/UIElements/TopMenu";
    import SideMenu from "./components/UIElements/SideMenu";

    // Using the vue-flexmonster module (local registration):
    import {Pivot} from "vue-flexmonster";
    import 'flexmonster/flexmonster.css';

    export default {
    name:"app",
    components: { TopMenu, SideMenu, Pivot},
    };

    </script>
  • An alternative solution is to use vue-flexmonster globally in your project (see Step 4 (1)). This way, you need to import vue-flexmonster only once in your main.js file (see example), and then you can use it anywhere in your Vue project.

    If you use the global approach, please remove the Pivot component registration from the <script></script> section in your App.vue file.
    As a result, your App.vue file should look similar to this:

    <template>...</template>

    <script>

    import TopMenu from "./components/UIElements/TopMenu";
    import SideMenu from "./components/UIElements/SideMenu";

    export default {
    name:"app",
    components: { TopMenu, SideMenu}
    };

    </script>

 
 
Also, you are welcome to check out our sample Vue project on GitHub.
To run the sample project, please follow the steps provided in this link: https://github.com/flexmonster/pivot-vue#installation.
 
 
Please let us know if this helps.
Looking forward to your response.
 
Kind regards,
Vera

Public
Cristian Marques Santos 5 days ago

I was not successful in the suggested change
my file looked like this:

<template>
  <section id=”app”>
    <TopMenu />
    <div class=”wrap”>
      <div>
        <SideMenu />
      </div>
      <div class=”pivot-example-container”>
        <router-view />
      </div>      
    </div>
    <div id=”app”>
      <Pivot
      ref=”pivot”
      v-bind:
      report=”‘https://cdn.flexmonster.com/reports/report.json'”>
      </Pivot>
    </div>
  </section>
</template>

<script>
  import TopMenu from “./components/UIElements/TopMenu”;
  import SideMenu from “./components/UIElements/SideMenu”;

  // Using the vue-flexmonster module (local registration):
  import {Pivot} from “vue-flexmonster”;
  import ‘flexmonster/flexmonster.css’;

  export default {
    name:”app”,
    components: { TopMenu, SideMenu, Pivot},
  };
</script>

 
 
when compiling
 

error in ./src/App.vue?vue&type=template&id=7ba5bd90&
Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error)
Errors compiling template:
The value for a v-bind expression cannot be empty. Found in “v-bind:”
1 |
|
2 | <section id=”app”>
| ^^^^^^^^^^^^^^^^^^
3 | <TopMenu />
| ^^^^^^^^^^^^^
4 | <div class=”wrap”>
| ^^^^^^^^^^^^^^^^^^^^
5 | <div>
| ^^^^^^^^^
6 | <SideMenu />
| ^^^^^^^^^^^^^^^^^^
7 | </div>
| ^^^^^^^^^^
8 | <div class=”pivot-example-container”>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
9 | <router-view />
| ^^^^^^^^^^^^^^^^^^^^^
10 | </div>
| ^^^^^^^^^^^^^^^^
11 | </div>
| ^^^^^^^^
12 | <div id=”app”>
| ^^^^^^^^^^^^^^^^
13 | <Pivot
| ^^^^^^^^^^
14 | ref=”pivot”
| ^^^^^^^^^^^^^^^
15 | v-bind:
| ^^^^^^^^^^^
16 | report=”‘https://cdn.flexmonster.com/reports/report.json'”>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
17 | </Pivot>
| ^^^^^^^^^^^^
18 | </div>
| ^^^^^^^^
19 | </section>
| ^^^^^^^^^^

@ ./src/App.vue?vue&type=template&id=7ba5bd90& 1:0-396 1:0-396
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.0.20:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
<s> [webpack.Progress] 100%

Public
Vera Didenko Vera Didenko Flexmonster 5 days ago

Hello, Cristian,
 
Thank you for your reply.
 
Please make sure that v-bind: is directly followed by the value. For example, there should be no line breaks in the following line:
v-bind:report="'https://cdn.flexmonster.com/reports/report.json'"
 
Hence, please change:

<Pivot
  ref="pivot"
  v-bind:
report="'https://cdn.flexmonster.com/reports/report.json'">
</Pivot>

to this:

<Pivot
  ref="pivot"
  v-bind:report="'https://cdn.flexmonster.com/reports/report.json'">
</Pivot>

 
Please let us know if this helps.
 
Kind regards,
Vera

Public
Cristian Marques Santos 5 days ago

perfect, that’s right

Public
Cristian Marques Santos 5 days ago

Now that I have it working, how do I make the call from my project’s menu?

Public
Vera Didenko Vera Didenko Flexmonster 3 days ago

Hello, Cristian,
 
We are happy to hear that everything works.
 
As for loading the Pivot component from your project’s menu, it seems we answered your question in the following Support Forum thread.
 
Kind regards,
Vera

Please login or Register to Submit Answer