Squashed commit of the following:

commit 1008c2f
Author: Philipp <[email protected]>
Date:   Mon Sep 12 17:54:55 2022 +0200

    NPM update

commit a5a4b4d
Author: Philipp <[email protected]>
Date:   Mon Sep 12 17:41:39 2022 +0200

    Update README.md

commit b2f6fbe
Author: Philipp <[email protected]>
Date:   Mon Sep 12 17:35:41 2022 +0200

    Update README.md

commit a81e0b6
Author: Philipp <[email protected]>
Date:   Mon Sep 12 17:33:46 2022 +0200

    Update vite.config.js

commit 7262cf9
Author: Philipp <[email protected]>
Date:   Mon Sep 12 17:26:42 2022 +0200

    Removing vue content

    WEIRD! Had to move Vue Content from index.html to App.vue. It's not working :(

commit 61da247
Author: Philipp <[email protected]>
Date:   Mon Sep 12 17:21:00 2022 +0200

    Creating Output Demo JS

commit c345301
Author: Philipp <[email protected]>
Date:   Mon Sep 12 13:02:46 2022 +0200

    Added favicon

commit 18d835e
Author: Philipp <[email protected]>
Date:   Sun Sep 11 18:54:01 2022 +0200

    Vite Build Dist

commit a4ae2b1
Author: Philipp <[email protected]>
Date:   Sun Sep 11 15:51:52 2022 +0200

    Ignore Warning

commit 6d5b453
Author: Philipp <[email protected]>
Date:   Sun Sep 11 11:43:35 2022 +0200

    Vite Rollup

commit a7f4959
Author: Philipp <[email protected]>
Date:   Fri Sep 9 19:05:58 2022 +0200

    Installed Vite

Author: Philipp

.eslintrc.js

@@ -1,3 +1,6 @@
 module.exports = {
     extends: ['avidofood'],
+    env: {
+        es2021: true,
+    },
 };

.gitignore

@@ -1 +1,3 @@
-node_modules/
+node_modules/
+
+dist

README.md

@@ -42,6 +42,7 @@
 ```
 
 ### (3: Only for Nuxt.js users)
+#### Nuxt.js v2.xx.x
  >Thanks to [@skoulix](https://github.com/avidofood/vue-responsive-video-background-player/issues/8#issuecomment-654821213) for his instructions:
 
   Again this is only for Nuxt.js users. Gridsome users click [here](https://gridsome.org/docs/assets-scripts/#without-ssr-support). At your `nuxt.config.js` locate the part where you declare your plugins and import the file. Example: 
@@ -57,6 +58,22 @@ plugins: [
 
 Now the component is globally available and can be used at any .vue file without issues.
 
+#### Nuxt.js v3.xx.x
+ >Thanks to [@Vertenz](https://github.com/avidofood/vue-responsive-video-background-player/issues/8#issuecomment-1192011721) for his instructions:
+
+ for NUXT 3 I used directive to make it work. Create **plugins** directory then add **video-bg.client.ts** _(or any name but **.client** is obligatory for client side render, cause you don't have the window at ssr)_ file with
+
+```
+import { defineNuxtPlugin } from "#app";
+import { Plugin } from "vue-responsive-video-background-player";
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(Plugin);
+});
+```
+
+then you use the **video-background** tag
+
 
 ## Usage - (or to make it runnable 🏃‍♂️)
 
@@ -103,14 +120,14 @@ This package is for responsive videos depicting different video resolution. Have
 
 This is your path to your video. You can just use this value for showing your video in every resolution.
 
- >⚠️**Warning** for [Vue CLI](https://cli.vuejs.org/guide/creating-a-project.html): You need to bind the source like this: `:src="require(``@/assets/video/timelapse.mp4``)"`. [Read here why](https://github.com/avidofood/vue-responsive-video-background-player/issues/10#issuecomment-646959090)
+ >**Warning** for [Vue CLI](https://cli.vuejs.org/guide/creating-a-project.html): You need to bind the source like this: ``:src="require(`@/assets/video/timelapse.mp4`)"``. [Read here why](https://github.com/avidofood/vue-responsive-video-background-player/issues/10#issuecomment-646959090)
 
 
 - `poster` (default: `''`)
 
 This is your first background image that is shown before the video is loaded.
 
- >⚠️**Warning** for [Vue CLI](https://cli.vuejs.org/guide/creating-a-project.html): You need to bind the source like this: `:src="require(``@/assets/img/logo.png``)"`. [Read here why](https://github.com/avidofood/vue-responsive-video-background-player/issues/10#issuecomment-646959090)
+ >**Warning** for [Vue CLI](https://cli.vuejs.org/guide/creating-a-project.html): You need to bind the source like this: ``:src="require(`@/assets/img/logo.png`)"``. [Read here why](https://github.com/avidofood/vue-responsive-video-background-player/issues/10#issuecomment-646959090)
 
 - `sources` (default: `[]`)
 

demo/public/build/js/app.js

@@ -0,0 +1,79 @@
+<template>
+    <video-background
+        class="video-container"
+        src="/demo/public/videos/roadster-loop-imperial.mp4"
+        overlay="linear-gradient(0deg, rgba(0, 0, 0, 0.88), rgba(251, 148, 158, 0.22), rgba(251, 148, 158, 0.42))"
+        :sources="[
+            {src: '/demo/public/videos/accessories-hero-desktop.mp4', res: 991, autoplay: true},
+            {src: '/demo/public/videos/power-hero-mobile.mp4', res: 575, autoplay: true, poster: '/demo/public/images/[email protected]'}
+        ]"
+    >
+        <div class="d-flex justify-content-center align-items-center h-50 px-2">
+            <h4
+                class="text-white text-center d-md-none"
+                style="font-weight: 600;"
+            >
+                Vue Responsive Background Player
+            </h4>
+            <h1
+                class="text-white d-none d-md-block"
+                style="font-weight: 600;"
+            >
+                Vue Responsive Background Player
+            </h1>
+        </div>
+    </video-background>
+
+    <section class="container text-center mt-3">
+        <h6 class="text-light">
+            Vue.js component
+        </h6>
+        <a
+            class="btn btn-danger"
+            href="https://github.com/avidofood/vue-responsive-video-background-player"
+            role="button"
+        >Source on GitHub</a>
+
+        <div class="social mt-4">
+            <a
+                href="https://twitter.com/share?ref_src=twsrc%5Etfw"
+                class="twitter-share-button"
+                data-show-count="false"
+            >Tweet</a>
+            <a
+                class="github-button"
+                href="https://github.com/avidofood/vue-responsive-video-background-player"
+                data-show-count="true"
+                aria-label="Star avidofood/vue-responsive-video-background-player on GitHub"
+            >Star</a>
+        </div>
+    </section>
+
+    <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 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>
+            </div>
+        </div>
+    </section>
+</template>
+
+<script setup>
+import VideoBackground from '../../../src/index';
+</script>

demo/public/js/app.js

@@ -1,8 +1,4 @@
 import { createApp } from 'vue';
-import VideoBackground from '../../../src/index';
+import App from './App.vue';
 
-const app = createApp({});
-
-app.component('VideoBackground', VideoBackground);
-
-app.mount('#app');
+createApp(App).mount('#app');