Radiant Media Player can easily be used in a Vue app - in this guide we will review how.
We support the following environment for using Radiant Media Player with Vue framework:
While it is possible that Radiant Media Player would work with previous versions of Vue, those versions have not been tested by us.
First you will need to install Vue:
npm init vue@latest
For the purpose of this guide we called our app "vue-project", so let's verify it is working as expected before adding our player:
cd vue-project npm install npm run dev
At http://localhost:3000/ we can now see the demo Vue 3 app.
In this guide we will install Radiant Media Player, cloud-player version, as an external library to our Vue project. More precisely we will install it as part of a Vue component so that the player only loads when that component is used.
First we open file
src > components > HelloWorld.vue and we add our player container in the
<template> ... <div id="rmp"></div> </template>
Always in the same file
src > components > HelloWorld.vue we now add a
<script> tag. In this
<script> tag we will dynamically load our player and configure it in the
mounted hook of our component:
We can now run
npm run dev to check our application in a browser. You should now see Radiant Media Player in the demo Vue app now.
©2015-2022 Radiant Media Player. All rights reserved.