No PowerBIReportEmbed events firing

[TylerTiller]

I have a very simple implementation of using the powerbi-client-vue-js library:

<template>
    <div class="embed-component">
        <PowerBIReportEmbed
            :embed-config="embedConfig"
            :event-handlers="eventHandlers"
            css-class-name="powerbi-component"
            :phased-embedding="true"
            @report-obj="setReportObj"
        ></PowerBIReportEmbed>
    </div>
</template>

<script setup lang="ts">
    import { Embed, service } from 'powerbi-client';
    import { PowerBIReportEmbed } from 'powerbi-client-vue-js';

    const props = defineProps({
        embedUrl: String,
        type: String,
    });

    const eventHandlers = new Map([
        ["loaded", () => console.log("Report Loaded")],
        ["rendered", () => console.log("Report Rendered")],
        ["error", (event) => console.log(event.detail)],
    ]);

    const embedConfig = computed(() => ({
        type: props.type,
        embedUrl: props.embedUrl,
        tokenType: 1,
    }));

    const setReportObj = (reportObj: Report) => {
        console.log('setting report:', reportObj);
    }
</script>

<style scoped>
    .powerbi-component {
        height: 500px;
    }
</style>

This loads the reports just fine given the embed url. However, absolutely no events fire. Loaded, rendered, and even report-obj do not fire...... Have not been able to get these to work at all. This is an incredibly basic implementation essentially going off of the documentation for this vue library as largely we just need to display the reports, but want to make sure it is fully functional in case we do have to hook into the events, but apparently it is not fully functional? 

Has anyone utilized this library and got these events to work?

[v-linyulu-msft]

Hi, @TylerTiller 
Thanks for reaching out to the Microsoft fabric community forum.

Based on my understanding, embedding Vue currently requires authentication information, including accessToken and embedUrl. In your code, I did not see a clear declaration of accessToken. Here is a screenshot from the relevant documentation:

Below is an example code snippet:

<PowerBIReportEmbed
    :embedConfig = {{
        type: "report",
        id: undefined,
        embedUrl: undefined,
        accessToken: undefined, // Keep as empty string, null or undefined
        tokenType: models.TokenType.Embed,
        hostname: "https://app.powerbi.com"
    }}
>
</PowerBIReportEmbed>

For further details, please refer to:

 GitHub - microsoft/powerbi-client-vue-js: Power BI Vue.js component. This library lets you embed Pow...

Here are some questions and answers to help you:

vue.js - PowerBI Embeded into VueJS - Stack Overflow

Of course, if you have any new discoveries or questions, please feel free to get in touch with us.
 

Best Regards,

Leroy Lu

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

[TylerTiller]

@v-linyulu-msft 

Still didn't do anything. I even tried switching to embedding with javascript like

    const embedConfig = computed(() => ({
        type: props.type,
        id: 'embed-report',
        embedUrl: props.embedUrl,
        tokenType: models.TokenType.Embed,
        accessToken: token.value?.accessToken,
        hostname: "https://app.powerbi.com",
    }));

    onMounted(() => {
        var reportContainer = document.querySelector('.embed-component') as HTMLElement;
        console.log(reportContainer);
        const powerbi = new service.Service(factories.hpmFactory, factories.wpmpFactory, factories.routerFactory);
        powerbi.accessToken = token.value?.accessToken ?? '';
        var report = powerbi.embed(reportContainer!, embedConfig.value);
        report.on('loaded', () => {
            console.log('Report loaded');
        });
        report.on('rendered', () => {
            console.log('Report rendered');
        });
        report.on('error', (event: any) => {
            console.log(event.detail);
        });
    })

Nothing. No console.logs from my event handlers show up. And keeping accessToken to null/undefined/empty string threw a missing accessToken error. I had to either omit it or actually set it. So I set it to my access token (these are public reports, so don't need them anyway).

But yeah, nothing is getting these events to actually fire.