Framework

Seed a Vue + Supabase App with MockHero

The Setup

Vue 3 (Vite) frontend on Supabase Postgres. You want a consistent local dataset without writing a line of SQL.

// scripts/seed.ts
import { createClient } from "@supabase/supabase-js";

const supabase = createClient(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_SERVICE_ROLE_KEY!
);

const data = await fetch("https://api.mockhero.dev/api/v1/generate", {
  method: "POST",
  headers: { "x-api-key": process.env.MOCKHERO_API_KEY!, "Content-Type": "application/json" },
  body: JSON.stringify({
    tables: [
      { name: "stores", count: 10, fields: [
        { name: "id", type: "uuid" },
        { name: "name", type: "company_name" }
      ]},
      { name: "products", count: 100, fields: [
        { name: "id", type: "uuid" },
        { name: "store_id", type: "ref", ref: "stores.id" },
        { name: "name", type: "product_name" },
        { name: "price", type: "price" }
      ]}
    ]
  })
}).then(r => r.json());

await supabase.from("stores").insert(data.stores);
await supabase.from("products").insert(data.products);

Run It

npx tsx scripts/seed.ts

Get Started

Free API key here.

M

MockHero Team

Guides and tutorials for generating realistic test data with the MockHero API.

Start generating test data for free

1,000 rows/month on the free tier. No credit card required.

Get Your API Key

Related Articles