Full-stack Nuxt that feels like cheating

<script setup lang="ts">
import { api } from "~/convex/_generated/api";

// Real-time subscription with SSR support
const { data: tasks, status } = useConvexQuery(api.tasks.list, {
status: "active",
});

// Data updates automatically when any client makes changes
</script>

<template>
<div v-if="status === 'pending'">Loading...</div>
<ul v-else-if="status === 'success'">
  <li v-for="task in tasks" :key="task._id">
    {{ task.text }}
  </li>
</ul>
</template>

<script setup lang="ts">
import { api } from "~/convex/_generated/api";

const { mutate, pending } = useConvexMutation(api.tasks.create, {
// Instant UI feedback with optimistic updates
optimisticUpdate: (localStore, args) => {
  updateQuery({
    query: api.tasks.list,
    args: {},
    localQueryStore: localStore,
    updater: (current) =>
      current
        ? [{ _id: "temp", text: args.text, completed: false }, ...current]
        : [],
  });
},
});

await mutate({ text: "Ship my app" });
</script>

<script setup lang="ts">
const { isAuthenticated, user } = useConvexAuth();
const authClient = useAuthClient();

async function handleLogin(email: string, password: string) {
const { error } = await authClient.signIn.email({ email, password });
if (!error) navigateTo("/dashboard");
}

async function handleOAuth() {
await authClient.signIn.social({ provider: "github" });
}
</script>

<template>
<div v-if="isAuthenticated">
  Welcome, {{ user?.name }}!
  <button @click="authClient.signOut()">Sign Out</button>
</div>
<div v-else>
  <button @click="handleOAuth">Sign in with GitHub</button>
</div>
</template>

<script setup lang="ts">
const { can, role } = usePermissions();
const { data: post } = useConvexQuery(api.posts.get, { id: props.id });
</script>

<template>
<article v-if="post">
  <h1>{{ post.title }}</h1>
  <p>{{ post.content }}</p>

  <!-- Show actions based on role and ownership -->
  <button v-if="can('post.update', post)">Edit</button>
  <button v-if="can('post.delete', post)">Delete</button>
  <button v-if="can('post.publish')">Publish</button>
</article>
</template>