Power BI (Embed dashboard with Vue.js and Power BI REST API using Postman). Part 4 (Embed with Vue.js).

Implementation details:

1. Create a Vue.js project
2. Install powerbi-client and import powerbi-client to your component
3. Add embedded content

Here are full javascript code samples for embed power bi by Microsoft for your reference.

1. Create a Vue.js project

• Run this line of code from the command line to quickly spin up the project

vue create project-name

• Clear the HelloWorld.vue component in the generated project from “Welcome to Vue” text and links. We’ll add the power-bi code later.

2. Install powerbi-client and import powerbi-client to your component

Powerbi-client is a javaScript library for embedding Power BI into your applications that works for any browser application. It provides a service which makes it easy to embed dashboards, reports, and various types of components, as well as an object model that allows you to easily interact with those components.

• Run this line of code from the command line

npm i powerbi-client

To access the methods in the power bi-client object, add this line of code to your HelloWorld.vue component.

import * as pbi from "powerbi-client";

3. Add embedded content

The embedConfiguration object provides the Power BI client API with information about what to embed, such as a report or dashboard, and which dashboard or report ID to embed and with what permissions.

It is important to note that the embedConfiguration object takes a tokenType, which can be of type Embed or Aad depending on the embed solution. Here is a Microsoft doc describing embedding solutions.

• Add the embedConfiguration object to the mounted function of your component.
• Set tokenType as Embed.
• Add accessToken which is the token in the returned body in the Generate an embed token step in Part 3.
• Add embedUrl that is embedUrl in the returned body in the Get the dashboard embed data step in Part 3.

Add code to instruct the powerbi-client library to embed the dashboard into a specific section. 👇

• To start the server run npm run serve .
• And “voila” — the dashboard is embedded into our application.

I‘ve covered a lot of ground here 🤪. I sincerely hope this 4-part post helps you understand the Power BI embed functionality a little better.