Power BI Client for Vue.js

1.1.2 · active · verified Wed Apr 22

powerbi-client-vue-js is a lightweight Vue.js wrapper library designed to streamline the integration of Microsoft Power BI reports, dashboards, and tiles into Vue applications. It provides high-level Vue components that abstract the complexities of directly interacting with the underlying `powerbi-client` JavaScript library, enabling developers to declaratively embed Power BI content. The current stable version is `1.1.2`. The project maintains an active release cadence, typically providing updates every few months to introduce new features, address bugs, and update dependencies. Its primary differentiator is the seamless integration with Vue's reactivity system, offering a more 'Vue-idiomatic' approach to Power BI embedding compared to direct SDK usage.

Common errors

```
Cannot read properties of undefined (reading 'embedConfig')
```
cause The `embedConfig` prop was not passed to the PowerBI component or was `undefined`.

fix Ensure you are passing a valid `embedConfig` object with at least `type`, `id`, `embedUrl`, `accessToken`, and `tokenType` properties to the PowerBI component.
```
[PowerBI] Failed to embed the report. Error: 'accessToken' is missing or empty.
```
cause The `accessToken` property within `embedConfig` is missing or contains an empty string.

fix Provide a valid, non-empty Power BI embed token for the `accessToken` property. This token should be securely fetched from your backend.
```
[Vue warn]: Component <PowerBIReport> is missing template or render function.
```
cause The PowerBI component was imported but not correctly registered in the Vue component's `components` option, or there's a typo in its usage.

fix Verify that `PowerBIReport` is listed in the `components` property of your Vue component and that its usage in the `<template>` matches the imported name (e.g., `<PowerBIReport />`).
```
Error: Unable to retrieve the report. Please check the embed URL and permissions.
```
cause The `embedUrl` provided is incorrect, the report ID is wrong, or the embed token does not have sufficient permissions for the specified content.

fix Double-check the `embedUrl` and `id` in your `embedConfig`. Ensure your Power BI embed token (accessToken) is generated with the correct scope and permissions for the report you are trying to embed.

Warnings

breaking The interface for the paginated report component was updated in v1.1.1. If you are using the paginated report component, you may need to adjust your component props or configuration based on the new interface.
Fix: Review the latest documentation or source code for the paginated report component's expected props and types and update your usage accordingly.
gotcha Previous versions (prior to v1.0.3) had issues with type definitions in the compiled JavaScript files. This could lead to TypeScript compilation errors or incorrect type inference when consuming the library.
Fix: Upgrade to `powerbi-client-vue-js` v1.0.3 or higher to benefit from updated and corrected TypeScript types. Ensure your `tsconfig.json` is correctly configured for library consumption.
gotcha Access tokens for Power BI embeds have a limited lifespan. While the `powerbi-client` library itself handles token refreshing, ensuring your application provides a mechanism to supply renewed tokens (e.g., via `accessToken` prop updates or `event.on('tokenExpired')`) is critical for long-running embeds.
Fix: Implement a server-side endpoint to generate fresh embed tokens. Pass these tokens to the PowerBI component's `accessToken` prop, and consider listening to the `tokenExpired` event from the embed instance to trigger a token refresh programmatically.

Install

npm install powerbi-client-vue-js npm
yarn add powerbi-client-vue-js yarn
pnpm add powerbi-client-vue-js pnpm

Imports

PowerBIReport

wrong:

import PowerBIReport from 'powerbi-client-vue-js';

correct:

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

Components are exported as named exports. Avoid default import.

PowerBIDashboard
wrong:
```
const { PowerBIDashboard } = require('powerbi-client-vue-js');
```
correct:
```
import { PowerBIDashboard } from 'powerbi-client-vue-js';
```
Prefer ES module syntax; CommonJS require is not the primary way to consume this library in modern Vue projects.
models
```
import { models } from 'powerbi-client';
```
Power BI models (TokenType, LayoutType, etc.) are typically imported directly from the underlying `powerbi-client` package, not this wrapper.

Quickstart

This quickstart embeds a Power BI report into a Vue.js component using the PowerBIReport component, configuring its essential properties like ID, embed URL, and access token, while providing basic styling for the container.

<template>
  <div class="powerbi-embed-container">
    <PowerBIReport
      :embedConfig="reportConfig"
      :cssClassName="'my-powerbi-report'"
      :phasedEmbedding="false"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { PowerBIReport } from 'powerbi-client-vue-js';
import { models } from 'powerbi-client'; // Import models for tokenType and settings

export default defineComponent({
  name: 'EmbedPowerBIReport',
  components: {
    PowerBIReport,
  },
  setup() {
    const reportConfig = ref({
      type: 'report',
      id: 'YOUR_REPORT_ID', // Replace with your Power BI Report ID
      embedUrl: 'YOUR_EMBED_URL', // Replace with your Power BI Embed URL
      accessToken: process.env.VUE_APP_PBI_ACCESS_TOKEN ?? '', // Fetch securely, e.g., from an API
      tokenType: models.TokenType.Embed,
      settings: {
        filterPaneEnabled: true,
        navContentPaneEnabled: true,
        layoutType: models.LayoutType.Custom, // Example layout type
        customLayout: {
          displayOption: models.DisplayOption.FitToPage
        }
      }
    });

    return {
      reportConfig,
    };
  },
});
</script>

<style>
.powerbi-embed-container {
  height: 600px; /* Ensure container has height for Power BI embed */
  width: 100%;
  border: 1px solid #ccc;
}
.my-powerbi-report {
  height: 100%;
  width: 100%;
}
</style>

view raw JSON →