Vue Js Generate Secret Key

<!DOCTYPE html>
<html lang="en">

<body>
    <div id="app">
        <h1>Vue Js Generate Secret Key</h1>
        <button @click="generateSecretKey">Generate Secret Key</button>
        <p v-if="secretKey">Secret Key: {{ secretKey }}</p>

</div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    secretKey: null,
                };
            },
            methods: {
                generateSecretKey() {
                    // Generate a secret key using crypto.getRandomValues()
                    let secretKey = new Uint8Array(32); // 32 bytes = 256 bits
                    window.crypto.getRandomValues(secretKey);

// Convert the secret key to a base64-encoded string
                    let base64SecretKey = btoa(String.fromCharCode.apply(null, secretKey));

// Set the secret key in the component's data
                    this.secretKey = base64SecretKey;
                },
            },
        })
    </script>
    <style scoped>
        #app {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            max-width: 600px;
        }
        button {
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 4px;
            font-size: 20px;
            font-weight: bold;
            padding: 12px 24px;
            cursor: pointer;
            margin-top: 16px;
        }

button:hover {
            background-color: #0062cc;
        }
    </style>
</body>

</html>