Working With Vue

Get started with Vue

Vue is a popular JavaScript progressive framework to build modern web user interfaces.

Radiant Media Player can easily be used in a Vue app - in this guide we will review how.

Scope of support

We support the following environment for using Radiant Media Player with Vue framework:

• Vue 3+

While it is possible that Radiant Media Player would work with previous versions of Vue, those versions have not been tested by us.

Creating our Vue app with Vite

First you will need to install Vue. For this guide we will use Vite as a building tool and the Vue composition API

npm create vite@latest player-app -- --template vue

Let's verify it is working as expected before adding our player:

cd player-app
npm install
npm run dev

Installing Radiant Media Player in a Vue app

For this guide we are using self-hosting of player files. First we need to add Radiant Media Player files to the Vue app. The self-hosted package folder is named radiantmediaplayer-*.*.* where *.*.* is player version. In this example we have renamed that folder to radiantmediaplayer. We now add that folder in full to the public folder of our Vue app.

Then we need to add Radiant Media Player as a module to the Vue app. In the src/assets folder we now create a player folder and we add player module files:

• rmp.min.d.mts
• rmp.min.mjs

We can now create our Vue player component in a Player.vue file, with the following code in the src/components folder:

<script setup>
import { onMounted } from 'vue'
import RadiantMP from '../assets/player/rmp.min.mjs'

onMounted(() => {
  const elementID = 'rmp';
  const src = {
    hls: 'https://your-hls-url.m3u8'
  };
  const settings = {
    licenseKey: 'your-license-key',
    src,
    width: 640,
    height: 360,
    pathToRmpFiles: '/radiantmediaplayer/',
  };
  const rmp = new RadiantMP(elementID);
  async function initRmpPlayer() {
    try {
      await rmp.init(settings);
    } catch (error) {
      console.error('Radiant Media Player failed to initialize', error);
    }
  }
  initRmpPlayer();
})
</script>

<template>
  <div id="rmp"></div>
</template>

We can now import our Player component in HelloWorld.vue.

<script setup>
import { ref } from 'vue'
import Player from './Player.vue'

defineProps({
  msg: String,
})

const count = ref(0)
</script>

<template>
  <h1>{{ msg }}</h1>

  <Player />

  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
  </div>

  <p>
    Check out
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite
    starter
  </p>
  <p>
    Learn more about IDE Support for Vue in the
    <a href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support" target="_blank">Vue Docs Scaling up Guide</a>.
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>

We can now run npm run dev to check our application in a browser. You should now see Radiant Media Player in the Vue app.