openvidu-vue: Updated to vue 3

openvidu-vue/package.json

@@ -8,19 +8,20 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@vue/compat": "^3.1.0",
     "axios": "1.5.1",
     "core-js": "3.33.0",
     "livekit-client": "1.14.0",
-    "vue": "2.6.12"
+    "vue": "3.1.0"
   },
   "devDependencies": {
     "@babel/eslint-parser": "7.19.1",
     "@vue/cli-plugin-babel": "5.0.8",
     "@vue/cli-plugin-eslint": "5.0.8",
     "@vue/cli-service": "5.0.8",
+    "@vue/compiler-sfc": "3.1.0",
     "eslint": "8.31.0",
-    "eslint-plugin-vue": "9.8.0",
-    "vue-template-compiler": "2.6.12"
+    "eslint-plugin-vue": "9.8.0"
   },
   "eslintConfig": {
     "root": true,

openvidu-vue/src/App.vue

@@ -45,17 +45,15 @@
 					value="Leave room"
 				/>
 			</div>
-			<div id="main-video" class="col-md-6">
-				<p v-if="mainPublication" class="participant-name">{{ getParticipantName(mainPublication.trackSid) }}</p>
-				<OvVideo
-					v-if="mainPublication && mainPublication.videoTrack"
+			<div v-if="mainPublication" id="main-video" class="col-md-6">
+				<p class="participant-name">{{ getParticipantName(mainPublication.trackSid) }}</p>
+				<OvVideo v-if="mainPublication.videoTrack"
 					:track="mainPublication.videoTrack"
 				/>
 			</div>
-			<div id="video-container" class="col-md-6">
-				<p v-if="localPublication && localPublication.videoTrack" class="participant-name">{{ myParticipantName }}</p>
+			<div v-if="localPublication && localPublication.videoTrack" id="video-container" class="col-md-6">
+				<p class="participant-name">{{ myParticipantName }}</p>
 				<OvVideo
-					v-if="localPublication && localPublication.videoTrack"
 					:track="localPublication.videoTrack"
 					@click.native="updateMainPublication(localPublication)"
 				/>

openvidu-vue/src/main.js

@@ -1,8 +1,7 @@
-import Vue from 'vue'
+import { createApp } from 'vue'
 import App from './App.vue'
 
-Vue.config.productionTip = false
+const app = createApp(App)
+app.config.productionTip = false
+app.mount('#app')
 
-new Vue({
-  render: h => h(App),
-}).$mount('#app')