chore: import upstream snapshot with attribution

2026-07-13 12:23:40 +08:00
commit 3a28426bf4
1399 changed files with 257375 additions and 0 deletions
@@ -0,0 +1,170 @@
+---
+title: Nuxt
+description: Learn how to create an InsForge project and build a Nuxt app using AI
+---
+
+import Installation from '/snippets/sdk-installation.mdx';
+
+Learn how to create an InsForge project and build a Nuxt app using AI tools like Cursor.
+
+## 1. Create an InsForge project
+
+Create a new InsForge project at [insforge.dev](https://insforge.dev).
+
+## 2. Connect InsForge
+
+Two pieces:
+
+- **CLI link** — see the [Quickstart](/quickstart) to run `npx @insforge/cli link --project-id <your-project-id>` so the agent can read your project ID and keys.
+- **MCP setup** — see [MCP Setup](/mcp-setup) for the per-editor config (Cursor, Claude Code, Windsurf, Codex, VS Code).
+
+With both wired up the agent can read schemas, run queries, and deploy code from your editor.
+
+## 3. Build your app with one prompt
+
+In Cursor or your AI assistant, use this prompt:
+
+```
+Create a new Nuxt app with TypeScript.
+Add Tailwind CSS 3.4 for styling.
+Install the InsForge SDK and set up the client configuration.
+
+In my InsForge database, create a sports table with id and name columns.
+Add sample data: basketball, soccer, and tennis. Make it publicly readable.
+
+Create a page that fetches and displays all sports from the database.
+```
+
+Your AI will generate the complete application including database setup and UI. No need to write code manually - the AI creates everything for you.
+
+## 4. What the AI generates
+
+Your AI assistant will automatically create files like these. You don't need to touch them manually.
+
+**Runtime config** at `nuxt.config.ts`:
+
+```typescript nuxt.config.ts
+export default defineNuxtConfig({
+  runtimeConfig: {
+    public: {
+      insforgeBaseUrl: process.env.NUXT_PUBLIC_INSFORGE_BASE_URL,
+      insforgeAnonKey: process.env.NUXT_PUBLIC_INSFORGE_ANON_KEY
+    }
+  }
+})
+```
+
+**Server API route** at `server/api/sports.get.ts`:
+
+```typescript server/api/sports.get.ts
+import { createClient } from '@insforge/sdk';
+
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig()
+
+  const client = createClient({
+    baseUrl: config.public.insforgeBaseUrl,
+    anonKey: config.public.insforgeAnonKey
+  })
+
+  const { data, error } = await client.database
+    .from('sports')
+    .select('*')
+
+  if (error) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: error.message || 'Failed to fetch sports'
+    })
+  }
+
+  return data
+})
+```
+
+**Sports page** at `pages/sports.vue`:
+
+```vue pages/sports.vue
+<script setup lang="ts">
+interface Sport {
+  id: string;
+  name: string;
+}
+
+const { data: sports, pending, error } = await useFetch<Sport[]>('/api/sports')
+</script>
+
+<template>
+  <div class="min-h-screen p-8">
+    <!-- Loading state -->
+    <div v-if="pending" class="flex items-center justify-center min-h-screen">
+      <p class="text-gray-600">Loading...</p>
+    </div>
+
+    <!-- Error state -->
+    <div v-else-if="error" class="flex items-center justify-center min-h-screen">
+      <div class="text-red-600">
+        <h1 class="text-2xl font-bold mb-2">Error</h1>
+        <p>{{ error.message }}</p>
+      </div>
+    </div>
+
+    <!-- Success state -->
+    <div v-else class="max-w-4xl mx-auto">
+      <h1 class="text-4xl font-bold mb-8">Sports</h1>
+
+      <div v-if="sports && sports.length > 0" class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        <div
+          v-for="sport in sports"
+          :key="sport.id"
+          class="p-6 bg-white rounded-lg shadow-md border border-gray-200 hover:shadow-lg transition-shadow"
+        >
+          <h2 class="text-xl font-semibold text-gray-800 capitalize">
+            {{ sport.name }}
+          </h2>
+          <p class="text-sm text-gray-500 mt-2">ID: {{ sport.id }}</p>
+        </div>
+      </div>
+
+      <p v-else class="text-gray-600">No sports found.</p>
+    </div>
+  </div>
+</template>
+```
+
+## 5. Start the app
+
+Run the development server, go to [http://localhost:3000/sports](http://localhost:3000/sports) in a browser and you should see the list of sports.
+
+```bash
+npm run dev
+```
+
+## Next: Extend your app with more prompts
+
+Try these prompts to add more features to your app:
+
+```
+Add a form to create new sports and save them to the database.
+Include validation and error handling.
+```
+
+```
+Add user authentication with sign up and login pages.
+Only allow authenticated users to add new sports.
+```
+
+```
+Add a favorites feature where users can mark their favorite sports.
+Store favorites in a user_favorites table with user_id and sport_id.
+```
+
+```
+Add images to each sport using InsForge Storage.
+Allow users to upload sport images and display them in the grid.
+```
+
+```
+Add an AI chat feature that can answer questions about sports.
+Use InsForge AI with streaming responses.
+```