Installation

pnpm add @asyncflowstate/nuxt @asyncflowstate/vue @asyncflowstate/core

Quick Start

Basic Nuxt Flow

<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>

Comprehensive Examples

1. Optimistic UI with Deep-Diff Rollback

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>

2. AI-Powered: Predictive Intent & Flow DNA

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>

3. Server-Side Rendering (SSR) Support

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>

4. Cross-Tab Sync: Real-Time Coordination

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>

New in v3.0

• 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.

License

MIT © AsyncFlowState Contributors