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.
This commit is contained in:
41
.github/copilot-instructions.md
vendored
Normal file
41
.github/copilot-instructions.md
vendored
Normal file
@@ -0,0 +1,41 @@
|
||||
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.).
|
||||
Reference in New Issue
Block a user