pricing.tootaio.com/.github/copilot-instructions.md at main

Tootaio/pricing.tootaio.com

Files

xiaomai eb69f6c48e feat: initialize project with event order form

This commit establishes the initial structure of the Nuxt application, centered around a new event order form.

Key changes include:
- Setting up the main app layout with a header, footer, and color mode support using @nuxt/ui.
- Creating a multi-part event order form on the index page.
- Introducing a `useEventOrder` composable to manage form state and validation with Zod.
- Adding modular form components under `app/components/eventOrder`.
- Including project configuration files for pnpm, VSCode, and global CSS.

2025-10-16 15:22:29 +08:00

3.0 KiB

Raw Permalink Blame History

This repository is a small Nuxt 4 site (TypeScript + Vue 3) using the @nuxt/ui component kit.

Quick context

Framework: Nuxt 4 (see nuxt.config.ts). compatibilityDate is 2025-07-15 and @nuxt/ui is enabled.
Scripts: dev, build, generate, preview are defined in package.json. Use pnpm in this workspace (pnpm-lock present).
UI: Pages and layout live under app/ (Nuxt App Directory). Components from @nuxt/ui (prefixed with U*) are used throughout.

What an AI coding agent should know/do first

Run local dev: pnpm dev to start Nuxt dev server (http://localhost:3000). Changes in app/ hot-reload.
Preserve TypeScript usage: files use lang="ts" in SFCs and typescript is a dependency.
Styling: app/assets/css/main.css imports Tailwind and @nuxt/ui. Avoid removing these imports.

Project-specific patterns and conventions

Use Nuxt app directory layout: app/app.vue, app/layouts/default.vue, app/pages/*.vue. Add pages/components under app/.
UI primitives: Expect UApp, UHeader, UMain, UFooter, UPageHero, UContainer, UForm, UCard, UInput, USelect, etc. These are provided by @nuxt/ui — prefer those over adding new UI libraries.
Minimal global JS: logic is inside pages via <script setup lang="ts">. Prefer composition API and reactive/ref patterns as in app/pages/index.vue.
Validation: the example uses zod (imported locally in the page). If adding validation follow the zod pattern (schema + z.infer for types).

Integration and external dependencies

No backend code in this repo — it's a frontend site. If integrating APIs, add runtime config to nuxt.config.ts and use Nuxt server or composables to centralize calls.
Build & preview: pnpm build then pnpm preview to check production output.

When editing or adding files

Keep naming under app/ and follow existing patterns (SFC + TS + script setup).
Add imports for UI components only when needed; many U* components are globally available via @nuxt/ui.
Update app/assets/css/main.css only to add project-specific styles; don't remove @nuxt/ui or Tailwind imports.

Examples to reference when making changes

nuxt.config.ts — module list and devtools flag.
package.json — available scripts.
app/pages/index.vue — form structure, zod usage, reactive state, U* components.
app/layouts/default.vue — shows header/footer composition and use of slots for UHeader and UFooter.

Failure modes & quick checks

If the dev server fails, check Node version and pnpm install exit logs; nuxt prepare runs on postinstall.
Type errors appear when SFCs change TS types — run pnpm dev and inspect terminal/console errors.

If unclear or missing context

Ask the maintainer whether there are environment variables, deployment targets, or private packages to consider before adding integrations or CI.

End of instructions — ask for feedback if anything here is unclear or you'd like more granular conventions (commit messages, PR checks, etc.).

3.0 KiB Raw Permalink Blame History

3.0 KiB

Raw Permalink Blame History