docs: add vue mastery video

diff --git a/docs/.vitepress/components/VueMasteryVideo.vue b/docs/.vitepress/components/VueMasteryVideo.vue
new file mode 100644 (file)
index 0000000..5e43b42
--- /dev/null
+++ b/docs/.vitepress/components/VueMasteryVideo.vue
@@ -0,0 +1,52 @@
+<template>
+  <a href="#" role="button" @click.prevent="open" ref="el">
+    <img :src="img" :alt="title" style="border-radius: 6px" />
+  </a>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+    default: 'Get started with Vue Router',
+  },
+  img: {
+    type: String,
+    required: true,
+  },
+  url: {
+    type: String,
+    required: true,
+  },
+})
+
+const isOpened = ref(false)
+const el = ref<HTMLElement>()
+
+function open() {
+  // dropped v-if/v-else way to fix autoplay issue on Chrome
+  // https://github.com/vuejs/vuex/pull/1453#issuecomment-441507095
+  isOpened.value = true
+  const element = el.value
+  if (!element || !element.parentNode) {
+    return
+  }
+  const attrs = {
+    width: '640',
+    height: '360',
+    frameborder: '0',
+    src: props.url + '?autoplay=1',
+    webkitallowfullscreen: 'true',
+    mozallowfullscreen: 'true',
+    allowfullscreen: 'true',
+  }
+  const video = document.createElement('iframe')
+  for (const name in attrs) {
+    video.setAttribute(name, attrs[name as keyof typeof attrs])
+  }
+  element.parentNode.replaceChild(video, element)
+}
+</script>

diff --git a/docs/guide/index.md b/docs/guide/index.md
index 5f6f9839de2028ec67fec6e2435b7f690d806857..10244d78ccb2e7b61dc7781b8d133107a0d72e05 100644 (file)
--- a/docs/guide/index.md
+++ b/docs/guide/index.md
@@ -1,5 +1,15 @@
 # Getting Started
 
+<VueMasteryVideo
+  title="Get Started with Vue Router"
+  url="https://player.vimeo.com/video/548250062"
+  img="https://i.vimeocdn.com/video/1201118933_640"
+/>
+
+<script setup>
+  import VueMasteryVideo from '../.vitepress/components/VueMasteryVideo.vue'
+  </script>
+
 Creating a Single-page Application with Vue + Vue Router feels natural: with Vue.js, we are already composing our application with components. When adding Vue Router to the mix, all we need to do is map our components to the routes and let Vue Router know where to render them. Here's a basic example:
 
 ## HTML