Vue Copy to Clipboard onclick button | Vue Js Paste from Clipboard

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app" class="container">
      <h2>Vue Copy to Clipboard</h2>
      <div class="input-group">
        <label for="copy-text">Text to be copied:</label>
        <input id="copy-text" type="text" v-model="copyText" />
        <button @click="copyToClipboard">Copy to Clipboard</button>
      </div>
      <pre v-if="result">{{result}}</pre>
    </div>

app.mount("#app");
    </script>
    <style scoped>
      .container {
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
        background-color: #fff;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        margin-top: 50px;
      }

h2 {
        text-align: center;
        margin-bottom: 20px;
      }

.input-group {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

label {
        font-size: 16px;
        margin-bottom: 10px;
      }

input {
        width: 100%;
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin-bottom: 15px;
      }

button {
        padding: 10px 20px;
        background-color: #007bff;
        color: #fff;
        font-size: 16px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease;
      }

button:hover {
        background-color: #0056b3;
      }

pre {
        padding: 10px;
        background-color: #f0f0f0;
        border-radius: 5px;
        overflow-x: auto;
        font-size: 14px;
        white-space: pre-wrap;
        word-break: break-all;
      }
    </style>
  </body>
</html>