Vue Js Generate and Download Qr Code

<!DOCTYPE html>
<html>

<body>
  <div id="app">
    <h3>Vue js Generate and download QR Code</h3>
    <div class="form-group">

<label for="input">Enter text:</label>
      <input id="input" type="text" v-model="userInput">
      <button @click="generateQRCode()">Generate QR Code</button>
    </div>
    <div class="qr-code-container">
      <img :src="qrCodeImageSrc" alt="QR Code" v-if="qrCodeImageSrc">
    </div>
    <div class="download-button">
      <button v-if="qrCodeImageSrc" @click="downloadQRCode">Download QR Code</button>
    </div>

</div>

h3 {
      font-size: 24px;
      margin-bottom: 20px;
      color: #333;
    }

.form-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 20px;
    }

label {
      font-size: 18px;
      margin-bottom: 10px;
      color: #666;
    }

input {
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 16px;
      width: 400px;
    }

button {
      padding: 10px 20px;
      font-size: 18px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s;
      margin-top: 10px;
    }

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

.qr-code-container {
      margin-top: 20px;
    }

img {
      max-width: 100%;
      height: auto;
    }

.download-button {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }

.download-button button {
      padding: 10px 20px;
      font-size: 18px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

.download-button button:hover {
      background-color: #0056b3;
    }
  </style>

</body>

</html>