Getting Started

Typed API Quickstart

Enable the experimental typed API flag and wire your first router in minutes with strongly typed contracts.

Updated: 2026-03-04

Enable Typed API Runtime

vista.config.ts

ts
const config = {
  experimental: {
    typedApi: {
      enabled: true,
      serialization: 'json',
      bodySizeLimitBytes: 1024 * 1024,
    },
  },
};

export default config;

Create the Entry Router

app/api/typed.ts

ts
import { vstack } from 'vista/stack';
import { createRootRouter } from './routers';

const v = vstack.init();
export const router = createRootRouter(v);

Create a Procedure

app/api/procedures/hello.ts

ts
import type { VStackInstance } from 'vista/stack';

export function helloProcedure(v: VStackInstance<any, any>) {
  return v.procedure.query(() => ({
    message: 'Hello from Vista Typed API',
  }));
}

Call it from Client

client usage

ts
import { createVistaClient } from 'vista/stack/client';
import { router } from '@/app/api/typed';

type AppRouter = typeof router;

const client = createVistaClient<AppRouter>({ baseUrl: 'http://localhost:3000/api' });
const response = await client.$get('/hello');

Deep Dive