Skip to main content

Embedding Lura Player in NuxtJS

To add the Lura player to a NuxtJS component, you can use the following code:

  1. Create a new plugin in your NuxtJS project by creating a new file lura-player.js in the plugins directory with the following code:
import Vue from "vue";

export default ({ app }, inject) => {
app.luraPlayer = {
createPlayer: (element, token) => {
const script = document.createElement("script");
script.src = "https://w3.mp.lura.live/lura-player/latest/loader.js";
script.async = true;
document.body.appendChild(script);

script.onload = () => {
const player = LuraPlayer(element, {
token: token,
});

Vue.prototype.$luraPlayer = player;
};
},
};
};
  1. In your nuxt.config.js file, add the following code to register the plugin:
module.exports = {
plugins: ["~/plugins/lura-player.js"],
};
  1. In your component file, add the following code to create the Lura player instance:
<template>
<div ref="playerContainer" style="width: 640px; height: 360px;"></div>
</template>

<script>
export default {
mounted() {
this.$app.luraPlayer.createPlayer(
this.$refs.playerContainer,
"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ2aWQiOiI0MzY2NjIzIiwiaXNzIjoiM1FMWjdaV0JsRko1Vk16Y2pyczJPbTd3VTdEanIzNFkifQ.CruM1W3gIEyQTBTqfaY5gTdf7b_2SSNg4gj6JGOj4Mg"
);
},
};
</script>

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

This code uses the mounted lifecycle hook to create an instance of the Lura player and make it available to the component through the $luraPlayer property of the Vue instance.

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