# ✨ useEmbed

useEmbed is a function that allows you to have state variables for embed code blocks in composable components.

# 🍁 Usage

The useEmbed function is used as following reactive state:

import { useEmbed } from 'vue-use-embed';

const { isEmbedBlock, clear } = useEmbed(code);
 
        Copied!

# 🚀 Features

useEmbed provides you "reactive" properties that allows you to manage your embed blocks.

useEmbed: give as argument a reactive string that contains embed block code.

const code = ref(null);

const { isEmbedBlock, clear } = useEmbed(code);
 
        Copied!

# ⚗️ isEmbedBlock

isEmbedBlock is a computed that return the given code is an embed code or not.

<template>
  <div>
    <textarea rows="5" cols="50" placeholder="Place embed code here" v-model="code"></textarea>
    <button type="button" @click="clear">Clear</button>
    <div v-if="isEmbedBlock" v-html="code"></div>
  </div>
</template>
 
        Copied!

# ❌ Clear

Clears scripts added to DOM.

<template>
  <div class="hello">
    <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>
</template>
 
        Copied!

# 💐 Example

You can see how it changes reactively using the example below.

<template>
  <div class="example-container">
    <div class="flex-container">
      <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>
  </div>
</template>
 
        Copied!