SpeedOf.Me API - Vue.js Integration

This example demonstrates how to integrate the SpeedOf.Me speed test API with Vue.js 3.

Live Demo

Open index.html in your browser to see a working example using the Vue 3 CDN build.

Prerequisites

Quick Start

Option 1: CDN (for quick prototyping)

The index.html file shows how to use Vue 3 with the CDN build. Great for demos.

Option 2: Vite + Vue (recommended for production)

  1. Create a new Vue project: 
    npm create vite@latest my-speedtest -- --template vue
cd my-speedtest
npm install
  2. Add the API script to index.html: 
    <script src="https://speedof.me/api/api.js"></script>
  3. Create the composable (src/composables/useSpeedTest.js): 
    import { ref, onMounted } from 'vue';

export function useSpeedTest({ apiKey, domain, sustainTime = 6 }) {
    const status = ref('idle');
    const result = ref(null);
    const progress = ref(null);
    const error = ref(null);

    onMounted(() => {
        window.SomApi.account = apiKey;
        window.SomApi.domainName = domain;
        window.SomApi.config.sustainTime = sustainTime;

        window.SomApi.onTestCompleted = (testResult) => {
            result.value = testResult;
            progress.value = null;
            status.value = 'completed';
        };

        window.SomApi.onProgress = (data) => {
            progress.value = data;
        };

        window.SomApi.onError = (err) => {
            error.value = err;
            status.value = 'error';
        };
    });

    function startTest() {
        status.value = 'running';
        result.value = null;
        error.value = null;
        window.SomApi.startTest();
    }

    return { status, result, progress, error, startTest };
}
  4. Use in your component (src/components/SpeedTest.vue): 
    <script setup>
import { useSpeedTest } from '../composables/useSpeedTest';

const { status, result, progress, error, startTest } = useSpeedTest({
    apiKey: 'YOUR_API_KEY',
    domain: 'your-domain.com'
});
</script>

<template>
    <div>
        <button @click="startTest" :disabled="status === 'running'">
            {{ status === 'running' ? 'Testing...' : 'Start Test' }}
        </button>

        <div v-if="result">
            <p>Download: {{ result.download }} Mbps</p>
            <p>Upload: {{ result.upload }} Mbps</p>
        </div>
    </div>
</template>

Configuration

// Required
window.SomApi.account = 'YOUR_API_KEY';
window.SomApi.domainName = 'your-domain.com';

// Optional
window.SomApi.config.sustainTime = 6;        // 1-8 seconds
window.SomApi.config.testServerEnabled = true;
window.SomApi.config.userInfoEnabled = true;
window.SomApi.config.latencyTestEnabled = true;
window.SomApi.config.uploadTestEnabled = true;

Handling Results

The onTestCompleted callback receives a result object:

{
    download: 150.5,      // Download speed in Mbps
    upload: 25.3,         // Upload speed in Mbps
    latency: 12,          // Latency in ms
    jitter: 2.5,          // Jitter in ms
    testServer: 'LAX',    // Test server location code
    ip_address: '...',    // Client IP (if userInfoEnabled)
    hostname: '...'       // Client hostname (if userInfoEnabled)
}

Progress Updates

The onProgress callback receives progress data:

{
    testType: 'download',     // 'download' or 'upload'
    currentSpeed: 145.2,      // Current speed in Mbps
    percentComplete: 75,      // 0-100
    passNumber: 3             // Current test pass
}

Error Handling

{
    code: 1001,
    message: 'Invalid API key'
}

Options API Alternative

If you prefer the Options API:

<script>
export default {
    data() {
        return {
            status: 'idle',
            result: null,
            progress: null,
            error: null
        };
    },
    mounted() {
        window.SomApi.account = 'YOUR_API_KEY';
        window.SomApi.domainName = 'your-domain.com';

        window.SomApi.onTestCompleted = (result) => {
            this.result = result;
            this.status = 'completed';
        };

        window.SomApi.onProgress = (data) => {
            this.progress = data;
        };

        window.SomApi.onError = (err) => {
            this.error = err;
            this.status = 'error';
        };
    },
    methods: {
        startTest() {
            this.status = 'running';
            window.SomApi.startTest();
        }
    }
};
</script>

Production Considerations

  1. API Key Security: Use environment variables via Vite's import.meta.env.VITE_API_KEY.
  2. Loading State: Consider using onMounted to check if window.SomApi exists.
  3. Pinia Integration: For larger apps, consider storing test results in a Pinia store.

Links

Back to Vue All Examples