Vue

bash

npm install @flattype/vue @flattype/models

// main.ts
app.use(createFlat({ baseURL: "/api", headers: () => ({ authorization: `Bearer ${token.value}` }) }));

vue

<script setup lang="ts">
import { useFlat, useFlatStream, useFlatSuspense } from "@flattype/vue";

const props = defineProps<{ id: number }>();

// The URL can be a ref or a getter: changing it aborts the old request and loads the new one.
const { data: user, error, loading, refetch } = useFlat(() => `/users/${props.id}`, { model: User }); // Ref<User | undefined>

// Inside <Suspense>, `await` the first response so `data` is always set.
const { data: me } = await useFlatSuspense("/me", { model: User });                                  // Ref<User>

// Big lists render while they download.
const { rows, done } = useFlatStream("/export", { model: Row, table: "rows" });
</script>

Composable	Returns	Notes
`useFlat(url, options)`	`{ data, error, loading, refetch }` refs	`url` and `enabled` can be refs or getters. Aborts on change and on unmount
`useFlatSuspense(url, options)`	`Promise<{ data, error, loading, refetch }>`	For `async setup()` in `<Suspense>`. The first error goes to `onErrorCaptured`
`useFlatStream(url, options)`	`{ rows, done, error, restart }` refs	One update per network chunk. `table` picks one table by path
`useModel(source, Model, { list })`	a computed ref	For props, Pinia stores and sockets

Vue 3.3+. A runnable app with Playwright tests in three browsers is in examples/vue-app.

Vue ​

Vue