Registry / azure / powerbi-client-vue-js

powerbi-client-vue-js

library1.1.2jsnpmunverified

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.

azure

npm install powerbi-client-vue-js

github ↗package ↗

INSTALL

IMPORT

SIG · POWERBI-CLIENT-VUE

powerbi-client-vue-js

azurejavascriptv1.1.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

PowerBIReport

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

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

Components are exported as named exports. Avoid default import.

PowerBIDashboard

✓ import { PowerBIDashboard } from 'powerbi-client-vue-js';

✗ const { PowerBIDashboard } = require('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.

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>

Debug

Known issues

breakingThe 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.

affects: >=1.1.1

gotchaPrevious 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.

affects: <1.0.3

gotchaAccess 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.

affects: >=1.0.0

Errors

Common errors & fixes

Cannot read properties of undefined (reading 'embedConfig')

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.

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.

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.

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.

Upgrade

Version history

1.1.2latest on npm

Audit

Dependencies

powerbi-clientrequiredCore dependency for Power BI embedding functionality, wrapped by this library.

vuerequiredRuntime peer dependency for the Vue.js framework.

Agent activity

23 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/microsoft/powerbi-client-vue-js ↗

packagehttps://www.npmjs.com/package/powerbi-client-vue-js ↗