Embed Power BI content in a Vue application

2024-06-06

Vue is a JavaScript framework for building front-end user interfaces and websites. The Vue component enables you to embed Power BI content in your Vue application simply, allowing you to make the most of both Vue and Power BI embedded.

The Power BI vue.js library lets you embed the following Power BI items into your Vue application:

Reports
Dashboards
Dashboard tiles
Report visuals
Q&A
Paginated reports

How to embed Power BI content in a Vue web app

This section describes how to import Vue into your app and use it to embed a Power BI report.

For detailed usage information, see the Power BI Vue readme file.

Import the Vue library

You can find Power BI Vue components on NPM. It's also open sourced on GitHub.

To import Vue into your web app, add the imports listed below.

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

Embed the report with Vue

This example shows how to embed a Power BI report using Vue. Below the example is a description of each component in the code sample.

<powerbi-report
    [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);]
        ])
    }
>
</powerbi-report>

The following list includes descriptions or additional information for each component in the code snippet example.

embedConfig - Defines the content that you're embedding, and specifies the content's settings. The embed configuration changes when you embed the following Power BI items:
cssClassName - Gives the embedded item a CSS class names that let you control the style of the embedded iframe using CSS.
phasedEmbedding - Improves the end-user's experience by giving developers more flexibility to phase report embedding. See Use phased embedding for more information.
eventHandlers - A map object for event names and their handlers. See How to handle events for more information.

Bootstrap a Power BI report

powerbi.bootstrap is a method used to help developers embed Power BI items faster and get better performance. For more information, see Use bootstrap for better performance.

<powerbi-report
    [embedConfig] = {{
        type: "report",
        id: undefined,
        embedUrl: undefined,
        accessToken: undefined, // Keep as empty string, null or undefined
        tokenType: models.TokenType.Embed,
        hostname: "https://app.powerbi.com"
    }}
>
</powerbi-report>

To embed the report after bootstrapping, update the embedConfig (with at least accessToken and embedUrl).

Vue demo

The Vue repository includes a demo that embeds a sample report using the PowerBIReportEmbed component. It demonstrates the complete flow from bootstrapping the report, to embedding and updating the embedded report. It also demonstrates how to use the powerbi report authoring library by enabling the user to change the type of visual from a report using the Change visual type button. It also sets a 'DataSelected' event.

For more information, see the demo section of the readme file.

An animated gif that shows the Power BI Vue Demo.

Run the demo

The demo is a subfolder in the repository. To run the demo on localhost, follow these steps:

Run the following commands:
```
npm run demo
```
To view in your browser, redirect it to http:/localhost:3000/.

Share via