Power BI component for Vue.js applications is now available

We’re thrilled to announce that a new component for embedding Power BI content in Vue.js applications is now available! Vue is an increasingly popular JavaScript framework for building front-end user interfaces and websites. Our new component for Vue makes it possible to embed Power BI content in your Vue application in a simple way, allowing you to make the most of both Vue and Power BI embedded for bringing analytics to your users wherever they are quickly and easily. The new component supports embedding of reports, dashboard, Q&A and more, and is now publicly available on npm and GitHub.

 

The Vue component allows you to embed Power BI content and configure how it interacts with your application. The code below demonstrates embedding a report with multiple event handlers set.

Importing the library:

import { PowerBIReportEmbed} from 'powerbi-client-vue-js';

Embedding a Power BI report into a Vue web application:

<PowerBIReportEmbed
    :embedConfig = {{
        type: "report",
        id: "<Report Id>",
        embedUrl: "<Embed Url>",
        accessToken: "<Access Token>",
        tokenType: models.TokenType.Embed,
        settings: {
            panes: {
                filters: {
                    expanded: false,
                    visible: false
                }
            },
            background: models.BackgroundType.Transparent,
        }
    }}

    :cssClassName = { "reportClass" }

    :phasedEmbedding = { false }

    :eventHandlers = {
        new Map([
            ['loaded', () => console.log('Report loaded');],
            ['rendered', () => console.log('Report rendered');],
            ['error', (event) => console.log(event.detail);]
        ])
    }
>
</PowerBIReportEmbed>

 

To see the component in action, you can also check out the demo application here. This app demonstrates the complete flow of embedding and updating a Power BI report using the PowerBIReportEmbed component and enabling users to edit the report using the powerbi report authoring library.

 

 

In addition to the new Vue component, existing components are also available for embedding Power BI content in React and Angular applications. End-to-end samples are also available in 5 different frameworks including .NET, Java and more. These components and samples save you time and effort on embedding analytics into your application, allowing you to focus more on your core applications and use your resources where needed, all while delivering compelling analytics to your end users.

 

That’s all for this post, we hope you found it useful. As always, we would love to hear more from you! Have any feedback or a great new feature in mind? Any other frameworks you’d like to see samples in? Please share it with us or vote in our Power BI Embedded Analytics Ideas forum.