Building a TikTok Dashboard with Nuxt 3 and TypeScript

Introduction

Building a UI for data scraping requires state management, error handling, and type safety. In this guide, we will walk through how to architect a scalable useTikTokApi composable in Nuxt 3, based on the ZOCAILMINE SDK structure.

Concept: The Composable Pattern

Instead of scattering API calls across components, we encapsulate logic in a specific file (e.g., useTiktokApi.ts). This composable handles:

1. State status (pending/loading/success), result, and error.
2. Configuration Selecting endpoints dynamically.
3. Auth Injecting API keys automatically.

Structure Overview

Code Example: The Composable

Here is a simplified version of the reactive state pattern used in production:

import { reactive, toRefs } from 'vue';

export function useTikTokApi() {
  // 1. Centralized State
  const state = reactive({
    status: 'pending',
    result: null,
    error: '',
    form: { url: '', cursor: '0' }
  });

  // 2. The Execution Engine
  async function executeApi(endpoint: string, apiKey: string) {
    state.status = 'loading';
    state.error = '';

    try {
      if (!apiKey) throw new Error("API Key Missing");
      
      const payload = { url: state.form.url };
      const response = await $fetch(endpoint, {
        method: 'POST',
        body: payload,
        headers: { "x-api-key": apiKey }
      });

      state.status = 'success';
      state.result = response;
    } catch (err) {
      state.status = 'error';
      state.error = err.message || "API Error";
    }
  }

  // 3. Expose to Components
  return {
    ...toRefs(state),
    executeApi
  };
}