VVibeFlui

Providers and Endpoints

Providers and endpoints define how VibeFlui loads data and executes mutations. They connect schemas to runtime data without moving backend business logic into the frontend.

Reading order

  1. Endpoint Config
  2. Provider Config
  3. Static Mode
  4. Server Mode
  5. Query State
  6. Response Contract
  7. Submit Flow
  8. Action Execution
  9. Custom Provider
  10. React Query Provider
  11. Common Mistakes

Default behavior

FluiKit loads list data automatically when all of these are true:

  • data prop is not provided.
  • response prop is not provided.
  • table.enabled is true or dashboard.enabled is true.

When data or response is provided, the host app owns loading data and FluiKit renders from those props.

Execution priority

For operations such as list, create, update, delete, and custom actions, runtime execution resolves in this order:

  1. Action or schema handler.
  2. Named provider from schema.provider.
  3. Resolved endpoint through the built-in endpoint provider.
  4. No operation.

Readonly mode blocks mutation operations. It still allows list, detail, view, and options.

Minimal endpoint example

TS
export const usersSchema = {
  resource: "users",
  endpoint: "/api/users",
  table: {
    mode: "server",
    dataPath: "data",
    totalPath: "meta.total",
    columns: ["name", "email", "status"]
  }
} as const;

Minimal provider example

TSX
import { FluiKit, FluiKitProvider } from "@vibeflui/core";

const providers = {
  admin: {
    list: async ({ query }) => {
      return fetchUsers(query);
    },
    create: async ({ values }) => {
      return createUser(values);
    }
  }
};

export function UsersPage() {
  return (
    <FluiKitProvider providers={providers}>
      <FluiKit schema={usersSchema} />
    </FluiKitProvider>
  );
}
TS
export const usersSchema = {
  resource: "users",
  provider: {
    type: "custom",
    name: "admin"
  },
  table: {
    mode: "server",
    columns: ["name", "email", "status"]
  }
} as const;