topic Embedding App Owns Data PowerBI Report in Nuxt in Developer

topic Embedding App Owns Data PowerBI Report in Nuxt in Developer https://community.fabric.microsoft.com/t5/Developer/Embedding-App-Owns-Data-PowerBI-Report-in-Nuxt/m-p/4088384#M54656 <P>Anyone have a Nuxt component for embedding a PowerBI report.  I've been using the </P><DIV><DIV><SPAN>powerbi-client-vue-js library, but my report is not rendering consistently.<BR /><BR /></SPAN><SPAN><SPAN>This is my current version;<BR /></SPAN></SPAN></DIV></DIV><P> </P><P> </P><P> </P><LI-CODE lang="javascript"><script setup lang="ts"> import { PowerBIReportEmbed } from "powerbi-client-vue-js"; import { models } from "powerbi-client"; const isLoaded = ref<boolean>(false); const props = defineProps({ reportId: { type: String, required: true, }, workspaceId: { type: String, required: true, }, }); const { reportId, workspaceId } = props; const { data } = await useFetch("/api/embedData", { cache: "no-cache", query: { reportId, workspaceId, }, }); const accessToken = data.value?.accessToken; const embedUrl = data.value?.embedUrl; const embedConfig = ref<models.IReportEmbedConfiguration>({ type: "report", embedUrl: undefined, tokenType: models.TokenType.Embed, accessToken: undefined, settings: undefined, }); const phasedEmbedding = false; isLoaded.value = true; embedConfig.value = { type: "report", id: reportId, embedUrl: embedUrl, accessToken: accessToken, tokenType: models.TokenType.Embed, permissions: models.Permissions.Read, settings: { panes: { filters: { expanded: false, visible: false }, pageNavigation: { visible: false }, }, // background: models.BackgroundType.Transparent, }, }; const eventHandlers = new Map([ ["loaded", () => console.log("Report Loaded")], ["rendered", () => console.log("Report Rendered")], ["error", (event: any) => console.log(event.detail)], ]); </script> <template> <div> <PowerBIReportEmbed v-if="isLoaded" :embedConfig="embedConfig" :eventHandlers="eventHandlers" cssClassName="report-container" :phasedEmbedding="phasedEmbedding" /> </div> </template> <style scoped> .report-container { height: 50vh; margin: 2rem auto; width: 1000px; border-width: 2pt; border-color: blue; border-radius: 3pt; box-shadow: 3px 3px 2px silver; } </style></LI-CODE><P> </P><P> </P><P><SPAN> </SPAN></P><P> </P> Thu, 08 Aug 2024 05:55:11 GMT bnln 2024-08-08T05:55:11Z Embedding App Owns Data PowerBI Report in Nuxt https://community.fabric.microsoft.com/t5/Developer/Embedding-App-Owns-Data-PowerBI-Report-in-Nuxt/m-p/4088384#M54656 <P>Anyone have a Nuxt component for embedding a PowerBI report.  I've been using the </P><DIV><DIV><SPAN>powerbi-client-vue-js library, but my report is not rendering consistently.<BR /><BR /></SPAN><SPAN><SPAN>This is my current version;<BR /></SPAN></SPAN></DIV></DIV><P> </P><P> </P><P> </P><LI-CODE lang="javascript"><script setup lang="ts"> import { PowerBIReportEmbed } from "powerbi-client-vue-js"; import { models } from "powerbi-client"; const isLoaded = ref<boolean>(false); const props = defineProps({ reportId: { type: String, required: true, }, workspaceId: { type: String, required: true, }, }); const { reportId, workspaceId } = props; const { data } = await useFetch("/api/embedData", { cache: "no-cache", query: { reportId, workspaceId, }, }); const accessToken = data.value?.accessToken; const embedUrl = data.value?.embedUrl; const embedConfig = ref<models.IReportEmbedConfiguration>({ type: "report", embedUrl: undefined, tokenType: models.TokenType.Embed, accessToken: undefined, settings: undefined, }); const phasedEmbedding = false; isLoaded.value = true; embedConfig.value = { type: "report", id: reportId, embedUrl: embedUrl, accessToken: accessToken, tokenType: models.TokenType.Embed, permissions: models.Permissions.Read, settings: { panes: { filters: { expanded: false, visible: false }, pageNavigation: { visible: false }, }, // background: models.BackgroundType.Transparent, }, }; const eventHandlers = new Map([ ["loaded", () => console.log("Report Loaded")], ["rendered", () => console.log("Report Rendered")], ["error", (event: any) => console.log(event.detail)], ]); </script> <template> <div> <PowerBIReportEmbed v-if="isLoaded" :embedConfig="embedConfig" :eventHandlers="eventHandlers" cssClassName="report-container" :phasedEmbedding="phasedEmbedding" /> </div> </template> <style scoped> .report-container { height: 50vh; margin: 2rem auto; width: 1000px; border-width: 2pt; border-color: blue; border-radius: 3pt; box-shadow: 3px 3px 2px silver; } </style></LI-CODE><P> </P><P> </P><P><SPAN> </SPAN></P><P> </P> Thu, 08 Aug 2024 05:55:11 GMT https://community.fabric.microsoft.com/t5/Developer/Embedding-App-Owns-Data-PowerBI-Report-in-Nuxt/m-p/4088384#M54656 bnln 2024-08-08T05:55:11Z Re: Embedding App Owns Data PowerBI Report in Nuxt https://community.fabric.microsoft.com/t5/Developer/Embedding-App-Owns-Data-PowerBI-Report-in-Nuxt/m-p/4090186#M54671 <P>Thanks <a href="javascript:void(0)" data-lia-user-mentions="" data-lia-user-uid="787007" data-lia-user-login="robert245" class="lia-mention lia-mention-user">robert245</a> for taking the time to go over the component.  Your comments have been helpful, especially checking the fetch!</P> Thu, 08 Aug 2024 23:34:06 GMT https://community.fabric.microsoft.com/t5/Developer/Embedding-App-Owns-Data-PowerBI-Report-in-Nuxt/m-p/4090186#M54671 bnln 2024-08-08T23:34:06Z Re: Embedding App Owns Data PowerBI Report in Nuxt https://community.fabric.microsoft.com/t5/Developer/Embedding-App-Owns-Data-PowerBI-Report-in-Nuxt/m-p/4094615#M54706 <P>Hi <a href="javascript:void(0)" data-lia-user-mentions="" data-lia-user-uid="781081" data-lia-user-login="bnln" class="lia-mention lia-mention-user">bnln</a> ,</P> <P> </P> <P>I suggest you to follow the steps of <A href="https://learn.microsoft.com/en-us/power-bi/developer/embedded/embed-sample-for-customers?tabs=net-core" target="_self">this offical blog</A> to configure app owns data in your application.</P> <P>If you use service principal as authentication method, please check the blog as below.</P> <P>For reference:<BR /><A href="https://learn.microsoft.com/en-us/power-bi/developer/embedded/embed-service-principal" target="_self">Embed Power BI content in an embedded analytics application with service principal and an application secret</A></P> <P>Finally, you can download the sample from this link and check the <A href="https://github.com/microsoft/PowerBI-Developer-Samples" target="_self">Node JS sample</A> .</P> <P><img /></P> <P> </P> <P>Best Regards,<BR />Rico Zhou</P> <P> </P> <P>If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.</P> <P> </P> Mon, 12 Aug 2024 06:29:02 GMT https://community.fabric.microsoft.com/t5/Developer/Embedding-App-Owns-Data-PowerBI-Report-in-Nuxt/m-p/4094615#M54706 Anonymous 2024-08-12T06:29:02Z