{"id":17334,"library":"powerbi-client-vue-js","title":"Power BI Client for Vue.js","description":"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.","status":"active","version":"1.1.2","language":"javascript","source_language":"en","source_url":"https://github.com/microsoft/powerbi-client-vue-js","tags":["javascript","microsoft","powerbi","embedded","vue-js","typescript"],"install":[{"cmd":"npm install powerbi-client-vue-js","lang":"bash","label":"npm"},{"cmd":"yarn add powerbi-client-vue-js","lang":"bash","label":"yarn"},{"cmd":"pnpm add powerbi-client-vue-js","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for Power BI embedding functionality, wrapped by this library.","package":"powerbi-client","optional":false},{"reason":"Runtime peer dependency for the Vue.js framework.","package":"vue","optional":false}],"imports":[{"note":"Components are exported as named exports. Avoid default import.","wrong":"import PowerBIReport from 'powerbi-client-vue-js';","symbol":"PowerBIReport","correct":"import { PowerBIReport } from 'powerbi-client-vue-js';"},{"note":"Prefer ES module syntax; CommonJS require is not the primary way to consume this library in modern Vue projects.","wrong":"const { PowerBIDashboard } = require('powerbi-client-vue-js');","symbol":"PowerBIDashboard","correct":"import { PowerBIDashboard } from 'powerbi-client-vue-js';"},{"note":"Power BI models (TokenType, LayoutType, etc.) are typically imported directly from the underlying `powerbi-client` package, not this wrapper.","symbol":"models","correct":"import { models } from 'powerbi-client';"}],"quickstart":{"code":"<template>\n  <div class=\"powerbi-embed-container\">\n    <PowerBIReport\n      :embedConfig=\"reportConfig\"\n      :cssClassName=\"'my-powerbi-report'\"\n      :phasedEmbedding=\"false\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref } from 'vue';\nimport { PowerBIReport } from 'powerbi-client-vue-js';\nimport { models } from 'powerbi-client'; // Import models for tokenType and settings\n\nexport default defineComponent({\n  name: 'EmbedPowerBIReport',\n  components: {\n    PowerBIReport,\n  },\n  setup() {\n    const reportConfig = ref({\n      type: 'report',\n      id: 'YOUR_REPORT_ID', // Replace with your Power BI Report ID\n      embedUrl: 'YOUR_EMBED_URL', // Replace with your Power BI Embed URL\n      accessToken: process.env.VUE_APP_PBI_ACCESS_TOKEN ?? '', // Fetch securely, e.g., from an API\n      tokenType: models.TokenType.Embed,\n      settings: {\n        filterPaneEnabled: true,\n        navContentPaneEnabled: true,\n        layoutType: models.LayoutType.Custom, // Example layout type\n        customLayout: {\n          displayOption: models.DisplayOption.FitToPage\n        }\n      }\n    });\n\n    return {\n      reportConfig,\n    };\n  },\n});\n</script>\n\n<style>\n.powerbi-embed-container {\n  height: 600px; /* Ensure container has height for Power BI embed */\n  width: 100%;\n  border: 1px solid #ccc;\n}\n.my-powerbi-report {\n  height: 100%;\n  width: 100%;\n}\n</style>","lang":"typescript","description":"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."},"warnings":[{"fix":"Review the latest documentation or source code for the paginated report component's expected props and types and update your usage accordingly.","message":"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.","severity":"breaking","affected_versions":">=1.1.1"},{"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.","message":"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.","severity":"gotcha","affected_versions":"<1.0.3"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Ensure you are passing a valid `embedConfig` object with at least `type`, `id`, `embedUrl`, `accessToken`, and `tokenType` properties to the PowerBI component.","cause":"The `embedConfig` prop was not passed to the PowerBI component or was `undefined`.","error":"Cannot read properties of undefined (reading 'embedConfig')"},{"fix":"Provide a valid, non-empty Power BI embed token for the `accessToken` property. This token should be securely fetched from your backend.","cause":"The `accessToken` property within `embedConfig` is missing or contains an empty string.","error":"[PowerBI] Failed to embed the report. Error: 'accessToken' is missing or empty."},{"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 />`).","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.","error":"[Vue warn]: Component <PowerBIReport> is missing template or render function."},{"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.","cause":"The `embedUrl` provided is incorrect, the report ID is wrong, or the embed token does not have sufficient permissions for the specified content.","error":"Error: Unable to retrieve the report. Please check the embed URL and permissions."}],"ecosystem":"npm","meta_description":null}