NuxtJS

To add the Lura Player to a NuxtJS component, you can follow the following steps:

1. Create a NuxtJS app

yarn create nuxt-app lura-player-demo-app

2. Change current working directory to lura-player-demo-app

cd lura-player-demo-app

3. Create a new LuraPlayerComponent.vue file in components directory.

<template>
    <div ref="playerContainer" style="width: 640px; height: 360px;"></div>
</template>

<script lang="ts">
    import { defineComponent } from "vue";

    export default defineComponent({
        props: {
            config: {
                type: Object as () => Record<string, any>,
                required: true,
            },
        },
        mounted() {
            const script = document.createElement("script");
            script.src = "https://w3.mp.lura.live/lura-player/web/latest/lura-player.js";
            script.async = true;
            script.onload = () => {
                // @ts-ignore
                const luraPlayer = new lura.Player(this.$refs.playerContainer);
                luraPlayer.setConfig(this.config);
                document.body.removeChild(script);
            };
            document.body.appendChild(script);
        },
    });
</script>

5. Now use the LuraPlayerComponent in your pages/index.vue

<template>
    <LuraPlayerComponent
        :config="{
      lura: {
        appKey:
          'PqSpQb9pFu1A_v4qrMnRNwcXJGoFMO0B02BwGBQ4Zwa0_uMdXPXrqjnlSbJbkv8duDNk2-c3JbOXq2auBscWP1GyvlWlgFcIzaO6QFG74nY',
        assetId: '5179686',
      },
    }" />
</template>

<script lang="ts">
    import Vue from "vue";
    import LuraPlayerComponent from "~/components/LuraPlayerComponent.vue";

    export default Vue.extend({
        name: "IndexPage",
        components: { LuraPlayerComponent },
    });
</script>

Note that you need to replace the placeholder value for the "config" property with your own Lura Player config.

6. Run the NuxtJS app by executing:

yarn dev

That's it! You should now see the Lura Player embedded in your NuxtJS component.