forgeos 0.1.0-alpha.21 → 0.1.0-alpha.22

package/templates/nuxt-web/web/components/LiveNotes.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useNotes } from "../composables/useNotes";
+
+const { notes } = useNotes();
+const noteCount = computed(() => notes.data.value?.length ?? 0);
+</script>
+
+<template>
+  <section class="notes">
+    <div class="section-heading">
+      <h2>Live notes</h2>
+      <span>{{ noteCount }}</span>
+    </div>
+    <p v-if="notes.loading.value" class="muted">Loading notes...</p>
+    <p v-else-if="notes.error.value" class="error">
+      {{ notes.error.value.message }}
+    </p>
+    <p v-else-if="noteCount === 0" class="muted">No notes yet.</p>
+    <ul v-else>
+      <li v-for="note in notes.data.value" :key="note.id">
+        <strong>{{ note.title }}</strong>
+        <p v-if="note.body">{{ note.body }}</p>
+      </li>
+    </ul>
+  </section>
+</template>
+
+<style scoped>
+.notes {
+  border: 1px solid #d9ddd0;
+  border-radius: 8px;
+  background: #ffffff;
+  padding: 18px;
+}
+
+.section-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.section-heading h2 {
+  margin: 0;
+  font-size: 1.1rem;
+}
+
+.section-heading span {
+  display: inline-grid;
+  min-width: 28px;
+  height: 28px;
+  place-items: center;
+  border-radius: 999px;
+  color: #1f6f54;
+  background: #e4f2ec;
+  font-weight: 800;
+}
+
+ul {
+  display: grid;
+  gap: 10px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+li {
+  border: 1px solid #edf0e7;
+  border-radius: 6px;
+  padding: 12px;
+}
+
+li p {
+  margin: 6px 0 0;
+  color: #53605a;
+}
+
+.muted {
+  margin: 0;
+  color: #6a756f;
+}
+
+.error {
+  margin: 0;
+  color: #a02d2d;
+}
+</style>

package/templates/nuxt-web/web/components/NoteComposer.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useNotes } from "../composables/useNotes";
+
+const title = ref("");
+const body = ref("");
+const { createNote } = useNotes({
+  onCreated: () => {
+    title.value = "";
+    body.value = "";
+  },
+});
+
+async function submit() {
+  const trimmedTitle = title.value.trim();
+  if (!trimmedTitle || createNote.loading.value) {
+    return;
+  }
+
+  await createNote.run({
+    title: trimmedTitle,
+    body: body.value.trim(),
+  });
+}
+</script>
+
+<template>
+  <form class="composer" @submit.prevent="submit">
+    <label>
+      <span>Title</span>
+      <input v-model="title" placeholder="Ship the full-stack loop" />
+    </label>
+    <label>
+      <span>Body</span>
+      <textarea v-model="body" placeholder="Optional note" />
+    </label>
+    <button :disabled="createNote.loading.value || !title.trim()" type="submit">
+      {{ createNote.loading.value ? "Creating..." : "Create note" }}
+    </button>
+    <p v-if="createNote.error.value" class="error">
+      {{ createNote.error.value.message }}
+    </p>
+  </form>
+</template>
+
+<style scoped>
+.composer {
+  display: grid;
+  gap: 14px;
+  margin-bottom: 18px;
+  border: 1px solid #d9ddd0;
+  border-radius: 8px;
+  background: #ffffff;
+  padding: 18px;
+}
+
+label {
+  display: grid;
+  gap: 6px;
+  color: #39423e;
+  font-size: 0.92rem;
+  font-weight: 700;
+}
+
+input,
+textarea {
+  width: 100%;
+  border: 1px solid #cfd5c6;
+  border-radius: 6px;
+  padding: 10px 12px;
+  color: #17211d;
+  background: #fbfcf8;
+}
+
+textarea {
+  min-height: 96px;
+  resize: vertical;
+}
+
+button {
+  justify-self: start;
+  min-height: 40px;
+  border: 0;
+  border-radius: 6px;
+  padding: 0 14px;
+  color: #ffffff;
+  background: #1f6f54;
+  font-weight: 800;
+}
+
+button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.error {
+  margin: 0;
+  color: #a02d2d;
+}
+</style>

package/templates/nuxt-web/web/composables/forge.ts

@@ -0,0 +1,13 @@
+export const forgeUrl = "http://127.0.0.1:3765";
+
+export { api } from "../../src/forge/_generated/api";
+export { createForgeClient, ForgeError } from "../../src/forge/_generated/client";
+export {
+  ForgeVuePlugin,
+  provideForge,
+  useForgeAuth,
+  useForgeClient,
+  useForgeCommand,
+  useForgeLiveQuery,
+  useForgeQuery,
+} from "../../src/forge/_generated/vue";

package/templates/nuxt-web/web/composables/useNotes.ts

@@ -0,0 +1,24 @@
+import { api, useForgeCommand, useForgeLiveQuery } from "./forge";
+
+export type Note = {
+  id: string;
+  title: string;
+  body?: string;
+  status?: string;
+  createdAt?: string;
+};
+
+export function useNotes(options: { onCreated?: (note: Note) => void } = {}) {
+  const notes = useForgeLiveQuery<Note[]>(api.liveQueries.liveNotes, {});
+  const createNote = useForgeCommand<{ title: string; body?: string }, Note>(
+    api.commands.createNote,
+    {
+      onSuccess: (note) => options.onCreated?.(note),
+    },
+  );
+
+  return {
+    notes,
+    createNote,
+  };
+}

package/templates/nuxt-web/web/nuxt.config.ts

@@ -0,0 +1,11 @@
+export default defineNuxtConfig({
+  compatibilityDate: "2026-06-24",
+  runtimeConfig: {
+    public: {
+      forgeUrl: process.env.NUXT_PUBLIC_FORGE_URL ?? "http://127.0.0.1:3765",
+    },
+  },
+  typescript: {
+    strict: true,
+  },
+});

package/templates/nuxt-web/web/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "__FORGE_APP_NAME__-web",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "nuxt dev --host 127.0.0.1",
+    "build": "nuxt build",
+    "typecheck": "nuxt typecheck"
+  },
+  "dependencies": {
+    "nuxt": "^4.0.0",
+    "vue": "^3.5.38"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.3"
+  }
+}

package/templates/nuxt-web/web/plugins/forge.client.ts

@@ -0,0 +1,10 @@
+import { ForgeVuePlugin } from "../composables/forge";
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const config = useRuntimeConfig();
+
+  nuxtApp.vueApp.use(ForgeVuePlugin, {
+    url: String(config.public.forgeUrl),
+    devAuth: true,
+  });
+});

package/templates/nuxt-web/web/plugins/forge.server.ts

@@ -0,0 +1,10 @@
+import { ForgeVuePlugin } from "../composables/forge";
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const config = useRuntimeConfig();
+
+  nuxtApp.vueApp.use(ForgeVuePlugin, {
+    url: String(config.public.forgeUrl),
+    devAuth: true,
+  });
+});

package/templates/nuxt-web/web/server/api/forge-health.get.ts

@@ -0,0 +1,7 @@
+export default defineEventHandler(() => {
+  const config = useRuntimeConfig();
+
+  return {
+    forgeUrl: config.public.forgeUrl,
+  };
+});

package/templates/nuxt-web/web/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}