Embedding App Owns Data PowerBI Report in Nuxt

[bnln]

Anyone have a Nuxt component for embedding a PowerBI report.  I've been using the 

powerbi-client-vue-js library, but my report is not rendering consistently.

This is my current version;

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

[bnln]

Thanks @robert245 for taking the time to go over the component.  Your comments have been helpful, especially checking the fetch!

[v-rzhou-msft · Accepted solution]

Hi @bnln ,

I suggest you to follow the steps of this offical blog to configure app owns data in your application.

If you use service principal as authentication method, please check the blog as below.

For reference:
Embed Power BI content in an embedded analytics application with service principal and an applicatio...

Finally, you can download the sample from this link and check the Node JS sample .

Best Regards,
Rico Zhou

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.