From 64af6fb6f8348d88cf80790de500fdb4ecdb52d1 Mon Sep 17 00:00:00 2001
From: Sangwon Oh <rock@airensoft.com>
Date: Fri, 20 May 2022 10:22:31 +0000
Subject: [PATCH] GitBook: [#80] Add ovenplayer-vue manual

---
 docs/README.md | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/docs/README.md b/docs/README.md
index 792779a8..39eeeefa 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -82,6 +82,12 @@ $ npm install ovenplayer
 $ npm install ovenplayer@0.10.0
 ```
 
+#### Vuejs component
+
+```
+$ npm install ovenplayer-vue3
+```
+
 ## Quick Start
 
 Below is a list of simple OvenPlayer initialization methods for each situation. For detailed options when initializing the OvenPlayer, please refer to the [Initialization](https://airensoft.gitbook.io/ovenplayer/initialization) chapter.
@@ -137,6 +143,50 @@ import OvenPlayer from 'ovenplayer';
 const player = OvenPlayer.create('player_id', options)
 ```
 
+### OvenPlayer for Vue.js
+
+You can use OvenPlayer as a reusable [Vue.js](https://vuejs.org/) component.
+
+```javascript
+<script setup>
+import OvenPlayerVue3 from "ovenplayer-vue3";
+</script>
+
+<template>
+    <OvenPlayerVue3 
+    :config="playerConfig"
+    @ready="readyHandler"
+    @error="errorHandler"
+    >
+    </OvenPlayerVue3>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      playerConfig: {
+        sources: [
+          {
+            type: '...',
+            file: '...',
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    readyHandler(event) {
+      //
+    },
+    errorHandler(event) {
+      //
+    }
+  }
+};
+</script>
+```
+
 ### Initialize for OME
 
 To play Sub-Second Latency Stream of OvenMediaEngine, set the source `type` to `webrtc`and set the `file` to the WebRTC Signaling URL with OvenMediaEngine. An explanation of the WebRTC Signaling URL can be found [here](https://airensoft.gitbook.io/ovenmediaengine/getting-started#playback).