{"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.","language":"javascript","status":"active","last_verified":"Wed Apr 22","install":{"commands":["npm install powerbi-client-vue-js"],"cli":null},"imports":["import { PowerBIReport } from 'powerbi-client-vue-js';","import { PowerBIDashboard } from 'powerbi-client-vue-js';","import { models } from 'powerbi-client';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}