default embed code added for useEmbed example

Author: bsrsnlbyrk

example/vue3/src/components/useEmbed.vue

@@ -1,14 +1,21 @@
 <script setup lang="ts">
-import { ref } from 'vue';
-import { useEmbed } from 'vue3-use-hooks';
-const code = ref(null);
+import { ref } from "vue";
+import { useEmbed } from "vue3-use-hooks";
+import exampleEmbed from "../shared/exampleEmbed";
+
+const code = ref(exampleEmbed);
 const { isEmbedBlock, clear } = useEmbed(code);
 </script>
 
 <template>
   <div class="example-container">
     <div class="flex-container">
-      <textarea rows="5" cols="50" placeholder="Place embed code here" v-model="code"></textarea>
+      <textarea
+        rows="5"
+        cols="50"
+        placeholder="Place embed code here"
+        v-model="code"
+      ></textarea>
       <button type="button" class="clear-button" @click="clear">Clear</button>
     </div>
     <div v-if="isEmbedBlock" v-html="code" class="embed-block"></div>
@@ -52,4 +59,4 @@ $white: #fff;
     margin-bottom: 2em;
   }
 }
-</style>
+</style>

example/vue3/src/shared/exampleEmbed.js

@@ -1,4 +1,4 @@
-import { ref, computed, watch, Ref } from 'vue';
+import { ref, computed, watch, Ref, onMounted } from 'vue';
 
 declare global {
     interface Window {
@@ -78,10 +78,15 @@ const useEmbed = (code: any = null) => {
     injectedScripts.value = [];
   };
 
+  onMounted(() => {
+    if (embedCode.value) {
+      injectScript({ id: 'id', src: getEmbedScriptSrc(embedCode.value) });
+    }
+  })
+
   watch(code, newValue => {
     if (newValue) {
-      const src = getEmbedScriptSrc(newValue);
-      injectScript({ id: 'id', src });
+      injectScript({ id: 'id', src: getEmbedScriptSrc(newValue) });
     }
   });
 
@@ -91,4 +96,4 @@ const useEmbed = (code: any = null) => {
   };
 };
 
-export default useEmbed;
+export default useEmbed;