Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Find everything you need to get certified on Fabric—skills challenges, live sessions, exam prep, role guidance, and more. Get started

Reply
Anonymous
Not applicable

Integrate PowerBi and Vue 3

After doing an npm install of "powerbi-client" and importing the module into a vue component 

 

import * as pbi from "powerbi-client";

 

I can not access methods such as pbi.embed() that exist. I'm not sure if this is possible without a wrapper similar to the react wrapper that was created but if anyone has any feedback on integrating PowerBI with Vue 3 it would be very helpful.

1 ACCEPTED SOLUTION
v-yiruan-msft
Community Support
Community Support

Hi @Anonymous ,

Please try to add the below codes to declare the reference to the corresponding method of Power BI, you can also refer the content in the following links to get it:

// Grab the reference to the div HTML element that will host the report
 let reportContainer = <HTMLElement>document.getElementById('reportContainer');

// Embed the report and display it within the div container
let powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory);

let report = powerbi.embed(reportContainer, config);

Power BI embed + VueJS error: “TypeError: Cannot read property 'powerBiEmbed' of null”

How To Embed Power BI Report In Angular 6

Best Regards

Community Support Team _ Rena
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

View solution in original post

1 REPLY 1
v-yiruan-msft
Community Support
Community Support

Hi @Anonymous ,

Please try to add the below codes to declare the reference to the corresponding method of Power BI, you can also refer the content in the following links to get it:

// Grab the reference to the div HTML element that will host the report
 let reportContainer = <HTMLElement>document.getElementById('reportContainer');

// Embed the report and display it within the div container
let powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory);

let report = powerbi.embed(reportContainer, config);

Power BI embed + VueJS error: “TypeError: Cannot read property 'powerBiEmbed' of null”

How To Embed Power BI Report In Angular 6

Best Regards

Community Support Team _ Rena
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

Helpful resources

Announcements
Sept PBI Carousel

Power BI Monthly Update - September 2024

Check out the September 2024 Power BI update to learn about new features.

September Hackathon Carousel

Microsoft Fabric & AI Learning Hackathon

Learn from experts, get hands-on experience, and win awesome prizes.

Sept NL Carousel

Fabric Community Update - September 2024

Find out what's new and trending in the Fabric Community.

Top Solution Authors