Step 5. Add Flexmonster instance to a Vue component

posted on June 10th, 2021

Answered

Cristian Marques Santos asked on June 10, 2021

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:

6 answers

Public

Vera Didenko ⋅ Flexmonster ⋅ June 11, 2021

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 3.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. 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 ⋅ June 11, 2021

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

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 ⋅ Flexmonster ⋅ June 11, 2021

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 ⋅ June 11, 2021

perfect, that's right

Public

Cristian Marques Santos ⋅ June 11, 2021

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

Public

Vera Didenko ⋅ Flexmonster ⋅ June 14, 2021

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

Step 5. Add Flexmonster instance to a Vue component

6 answers

Please login or Register to Submit Answer