Vue Js Detect Internet Speed

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/vue@3.2.22/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h3>Vue Js Check internet Speed</h3>
        <p v-if="!isLoading">
            
            <template v-if="isFastConnection">
                You are on a fast {{ connectionType }} connection ({{ bandwidth }} Mbps).
            </template>
            <template v-else-if="isSlowConnection">
                You are on a slow {{ connectionType }} connection ({{ bandwidth }} Mbps).
            </template>
            <template v-else>
                Your internet connection is {{ connectionType }} ({{ bandwidth }} Mbps).
            </template>
        </p>
       <p v-else>Loading...</p>
    </div>
    <script type="module">
        const app = Vue.createApp({
            data() {
                return {
                    isLoading: true,
                    connectionType: '',
                    bandwidth: '',
                };
            },
            async mounted() {
                if (navigator.connection) {
                    await navigator.connection.ready;

this.connectionType = navigator.connection.effectiveType;
                    this.bandwidth = navigator.connection.downlink.toFixed(2);

this.isLoading = false;
                } else {
                    this.connectionType = 'Unknown';
                    this.bandwidth = 'N/A';

this.isLoading = false;
                }
            },
            computed: {
                isFastConnection() {
                    return (
                        this.connectionType === '4g' || this.connectionType === '5g' || this.bandwidth >= 10
                    );
                },
                isSlowConnection() {
                    return (
                        this.connectionType === '2g' || this.connectionType === '3g' || this.bandwidth < 1
                    );
                },
            },

})

app.mount('#app')
    </script>
    <style scoped>
        #app {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            text-align: center;
        }

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

p {
            font-size: 18px;
            line-height: 1.5;
            margin-bottom: 20px;
        }

.loading {
            font-style: italic;
            color: gray;
        }
    </style>

</body>

</html>