pnpm add @asyncflowstate/nuxt @asyncflowstate/vue @asyncflowstate/core<script setup>
const { data, loading, execute, button } = useNuxtFlow(async (id) => {
return await $fetch(`/api/users/${id}`);
});
</script>
<template>
<button v-bind="button({ onClick: () => execute(123) })">
{{ loading ? "Loading..." : "Fetch User" }}
</button>
</template>Update your Nuxt state instantly and trust AsyncFlowState to revert if the $fetch fails.
<script setup>
const { data, execute } = useNuxtFlow(api.likePost, {
optimisticResult: (prev) => ({
...prev,
likes: prev.likes + 1,
isLiked: true,
}),
rollbackOnError: true,
});
</script>Pre-warm your Nuxt composables before the user even clicks.
<script setup>
const { status, prewarm, execute } = useNuxtFlow(api.getDetails, {
predictive: { prefetchOnHover: true },
});
</script>
<template>
<div @mouseenter="prewarm" class="card">
<button @click="execute">
{{ status === "prewarmed" ? "Instant View" : "Load Details" }}
</button>
</div>
</template>Seamless integration with Nuxt's useAsyncData and useFetch.
<script setup>
const { data: initialData } = await useAsyncData("user", () =>
$fetch("/api/user"),
);
const flow = useNuxtFlow(api.updateUser, {
initialData: initialData.value,
});
</script>Keep all open Nuxt tabs in sync with the same async state.
<script setup>
const flow = useNuxtFlow(api.updateSettings, {
crossTab: { sync: true, channel: "nuxt-settings-mesh" },
});
</script>- Flow DNA: Self-healing composables for Nuxt 3.
- Speculative Execution: Predicted user intent for zero-latency interactions.
- Ambient Intelligence: Background monitoring for Nuxt hydration and navigation.
- Collaborative Mesh: Real-time state synchronization across Nuxt instances.
- Edge-First Logic: Optimized for Nuxt Nitro on the Edge.
- Telemetry Dashboard: Live monitoring of Nuxt async health.