diff --git a/examples/shared/audio.vue b/examples/shared/audio.vue
new file mode 100644
index 00000000..55aef883
--- /dev/null
+++ b/examples/shared/audio.vue
@@ -0,0 +1,17 @@
+<template>
+	<div>
+		<h2>Audio Player</h2>
+		<vue-plyr>
+			<audio controls crossorigin playsinline>
+				<source
+					src="https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3"
+					type="audio/mp3"
+				/>
+				<source
+					src="https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg"
+					type="audio/ogg"
+				/>
+			</audio>
+		</vue-plyr>
+	</div>
+</template>
diff --git a/examples/shared/demo.vue b/examples/shared/demo.vue
new file mode 100644
index 00000000..c707926a
--- /dev/null
+++ b/examples/shared/demo.vue
@@ -0,0 +1,48 @@
+<template>
+	<div id="app">
+		<h1>vue-plyr demo</h1>
+		<div class="components">
+			<vue-plyr-video />
+			<vue-plyr-audio />
+			<youtube />
+			<youtube-np />
+			<vimeo />
+			<vimeo-np />
+		</div>
+	</div>
+</template>
+
+<script>
+	import VuePlyrVideo from './video'
+	import VuePlyrAudio from './audio'
+	import Youtube from './youtube'
+	import YoutubeNp from './youtube-np'
+	import Vimeo from './vimeo'
+	import VimeoNp from './vimeo-np'
+
+	export default {
+		name: 'Demo',
+		components: {
+			VuePlyrVideo,
+			VuePlyrAudio,
+			Youtube,
+			YoutubeNp,
+			Vimeo,
+			VimeoNp
+		}
+	}
+</script>
+
+<style>
+	#app {
+		font-family: 'Avenir', Helvetica, Arial, sans-serif;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+		text-align: center;
+		color: #2c3e50;
+	}
+
+	h1 {
+		margin: 3rem;
+	}
+</style>
diff --git a/examples/shared/elements.vue b/examples/shared/elements.vue
deleted file mode 100644
index 5c04a7a2..00000000
--- a/examples/shared/elements.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<template>
-	<h1>Video Player</h1>
-	<vue-plyr>
-		<video
-			controls
-			crossorigin
-			playsinline
-			data-poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
-		>
-			<source
-				size="576"
-				src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4"
-				type="video/mp4"
-			/>
-			<source
-				size="720"
-				src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4"
-				type="video/mp4"
-			/>
-			<source
-				size="1080"
-				src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4"
-				type="video/mp4"
-			/>
-			<track
-				default
-				kind="captions"
-				label="English captions"
-				src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
-				srclang="en"
-			/>
-			<track
-				kind="captions"
-				label="Légendes en français"
-				src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"
-				srclang="fr"
-			/>
-			<a
-				download=""
-				href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4"
-			>
-				Download
-			</a>
-		</video>
-	</vue-plyr>
-
-	<h1>Audio Player</h1>
-	<vue-plyr>
-		<audio crossorigin playsinline>
-			<source
-				src="https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3"
-				type="audio/mp3"
-			/>
-			<source
-				src="https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg"
-				type="audio/ogg"
-			/>
-		</audio>
-	</vue-plyr>
-
-	<h1>YouTube</h1>
-	<vue-plyr>
-		<div class="plyr__video-embed">
-			<iframe
-				allow="autoplay"
-				allowfullscreen
-				allowtransparency
-				src="https://www.youtube.com/embed/bTqVqk7FSmY?iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1"
-			></iframe>
-		</div>
-	</vue-plyr>
-
-	<h1>Vimeo</h1>
-	<vue-plyr>
-		<div class="plyr__video-embed">
-			<iframe
-				allow="autoplay"
-				allowfullscreen
-				allowtransparency
-				src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
-			></iframe>
-		</div>
-	</vue-plyr>
-
-	<h1>YouTube (Not Progressive Enhancement)</h1>
-	<vue-plyr>
-		<div data-plyr-embed-id="bTqVqk7FSmY" data-plyr-provider="youtube"></div>
-	</vue-plyr>
-
-	<h1>Vimeo (Not Progressive Enhancement)</h1>
-	<vue-plyr>
-		<div data-plyr-embed-id="76979871" data-plyr-provider="vimeo"></div>
-	</vue-plyr>
-</template>
-
-<script>
-	export default {
-		name: 'Elements'
-	}
-</script>
-
-<style>
-	#app {
-		font-family: 'Avenir', Helvetica, Arial, sans-serif;
-		-webkit-font-smoothing: antialiased;
-		-moz-osx-font-smoothing: grayscale;
-		text-align: center;
-		color: #2c3e50;
-	}
-
-	h1 {
-		margin: 3rem;
-	}
-</style>
diff --git a/examples/shared/video.vue b/examples/shared/video.vue
new file mode 100644
index 00000000..43b605b1
--- /dev/null
+++ b/examples/shared/video.vue
@@ -0,0 +1,59 @@
+<template>
+	<div>
+		<h2>Video Player</h2>
+		<vue-plyr :options="options">
+			<video
+				controls
+				crossorigin
+				playsinline
+				data-poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
+			>
+				<source
+					size="576"
+					src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4"
+					type="video/mp4"
+				/>
+				<source
+					size="720"
+					src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4"
+					type="video/mp4"
+				/>
+				<source
+					size="1080"
+					src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4"
+					type="video/mp4"
+				/>
+				<track
+					default
+					kind="captions"
+					label="English captions"
+					src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
+					srclang="en"
+				/>
+				<track
+					kind="captions"
+					label="Légendes en français"
+					src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"
+					srclang="fr"
+				/>
+				<a
+					download=""
+					href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4"
+				>
+					Download
+				</a>
+			</video>
+		</vue-plyr>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'Video',
+		data() {
+			return {
+				options: { quality: { default: '1080p' } }
+			}
+		}
+	}
+</script>
diff --git a/examples/shared/vimeo-np.vue b/examples/shared/vimeo-np.vue
new file mode 100644
index 00000000..13341ce1
--- /dev/null
+++ b/examples/shared/vimeo-np.vue
@@ -0,0 +1,8 @@
+<template>
+	<div>
+		<h2>Vimeo (Not Progressive-Enhancement)</h2>
+		<vue-plyr>
+			<div data-plyr-provider="vimeo" data-plyr-embed-id="143418951"></div>
+		</vue-plyr>
+	</div>
+</template>
diff --git a/examples/shared/vimeo.vue b/examples/shared/vimeo.vue
new file mode 100644
index 00000000..19465e74
--- /dev/null
+++ b/examples/shared/vimeo.vue
@@ -0,0 +1,15 @@
+<template>
+	<div>
+		<h2>Vimeo Embed</h2>
+		<vue-plyr>
+			<div class="plyr__video-embed">
+				<iframe
+					src="https://player.vimeo.com/video/143418951?loop=false&amp;byline=false&amp;portrait=false&amp;title=false&amp;speed=true&amp;transparent=0&amp;gesture=media"
+					allowfullscreen
+					allowtransparency
+					allow="autoplay"
+				></iframe>
+			</div>
+		</vue-plyr>
+	</div>
+</template>
diff --git a/examples/shared/youtube-np.vue b/examples/shared/youtube-np.vue
new file mode 100644
index 00000000..51ada898
--- /dev/null
+++ b/examples/shared/youtube-np.vue
@@ -0,0 +1,8 @@
+<template>
+	<div>
+		<h2>YouTube (Not Progressive-Enhancement)</h2>
+		<vue-plyr>
+			<div data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY"></div>
+		</vue-plyr>
+	</div>
+</template>
diff --git a/examples/shared/youtube.vue b/examples/shared/youtube.vue
new file mode 100644
index 00000000..1a362df8
--- /dev/null
+++ b/examples/shared/youtube.vue
@@ -0,0 +1,15 @@
+<template>
+	<div>
+		<h2>YouTube Embed</h2>
+		<vue-plyr>
+			<div class="plyr__video-embed">
+				<iframe
+					src="https://www.youtube.com/embed/bTqVqk7FSmY?amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1"
+					allowfullscreen
+					allowtransparency
+					allow="autoplay"
+				></iframe>
+			</div>
+		</vue-plyr>
+	</div>
+</template>