Added Vue 3

Author: Philipp

README.md

@@ -1,4 +1,4 @@
-# Responsive Video Background Player for Vue ⚡️
+# Responsive Video Background Player for Vue 2 and Vue 3 ⚡️
 
 <a href="https://www.npmjs.com/package/vue-responsive-video-background-player">
   <img src="https://img.shields.io/npm/dt/vue-responsive-video-background-player.svg" alt="Downloads">
@@ -14,12 +14,16 @@
 
 **If you are looking to play videos in the background, you have found the best Vue package for it 😜 (Currently no YouTube videos)**
 
- >**Prerequisites**: Vue 2.x.x
+ >**Prerequisites**: Vue 2.x.x or Vue 3.x.x
 
 ## Installation in 2 Steps
 
 ### 1: Add with npm 💻
 ```bash
+ # For Vue 2.x.x
+ npm install [email protected]
+
+# For Vue 3.x.x
  npm install vue-responsive-video-background-player
 ```
 

demo/public/js/app.js

@@ -1,9 +1,8 @@
-
-import Vue from 'vue';
+import { createApp } from 'vue';
 import VideoBackground from '../../../src/index';
 
-Vue.component('video-background', VideoBackground);
+const app = createApp({});
+
+app.component('VideoBackground', VideoBackground);
 
-new Vue({ // eslint-disable-line no-new
-    el: '#app',
-});
+app.mount('#app');

demo/resources/js/app.js

@@ -51,8 +51,8 @@ <h6 class="text-light">Vue.js component</h6>
          <section class="container mt-5">
              <div class="row">
                 <div class="col-12 col-md-6">
-                    <h4 class="text-white d-md-none" style="font-weight: 600;">Designed for Vue</h4>
-                    <h2 class="text-white d-none d-md-block" style="font-weight: 600; ">Designed for Vue</h2>
+                    <h4 class="text-white d-md-none" style="font-weight: 600;">Designed for Vue 2 & 3</h4>
+                    <h2 class="text-white d-none d-md-block" style="font-weight: 600; ">Designed for Vue 2 & 3</h2>
                 </div>
                 <div class="col-12 col-md-6">
                     <p class="text-white">You can even change the video resolution with different breakpoints. Try it out, resize your window!</p>
@@ -61,7 +61,6 @@ <h2 class="text-white d-none d-md-block" style="font-weight: 600; ">Designed for
 
          </section>
     </div>
-
     <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
     <script async defer src="https://buttons.github.io/buttons.js"></script>
     <script src="demo/public/js/app.js"></script>