.github/copilot-instructions.md
Copilot instructions for Vue
GitHub Copilot reads `.github/copilot-instructions.md` and applies it across the repository. It is the place for build commands, review rules, and stack conventions Copilot should not invent. This copy is written for a Vue project. This repository is a Vue 3 app. New components use the Composition API and `<script setup>`. Single-file components stay the unit of UI.
The example uses a balanced, readable style, pragmatic tests, and comments only where the intent is not obvious. Open the generator to make the agent stricter, switch to test-first, quiet the comments, or pick a different file.
The example assumes Vue 3 with the Composition API. It does not assume Nuxt, Pinia, or Vue Router unless those are already installed. Do not mix in the Options API for new code.
Example file
Balanced strictness, readable style, pragmatic tests. Download name: copilot-instructions.md
# GitHub Copilot instructions
These instructions apply to the whole Vue repository. Copilot reads them from `.github/copilot-instructions.md`.
Prefer the commands and layout below over guesses.
## Stack
This repository is a Vue 3 app. New components use the Composition API and `<script setup>`. Single-file components stay the unit of UI.
## Layout
- Feature UI lives next to the route or view that uses it.
- Reusable components live in `components/`. Composables live in `composables/`.
- Keep SFCs focused. Move non-UI logic into a composable or a plain function.
## Commands
- Dev server: `npm run dev`
- Production build: `npm run build`
- Lint: `npm run lint`
- Tests: `npm test`
Use the script the repo already defines when it differs from the command above.
## Conventions
- Use `<script setup>` and the Composition API for new components.
- Type props and emits. Do not read a parent through a DOM query.
- Use `computed` for derived values. Do not mirror props into local state without a reason.
- Add Pinia or Vue Router only when the project already uses them.
- Template refs are for DOM access, not for stashing business data.
- Match the existing CSS approach, whether that is scoped CSS, Tailwind, or another system.
## Testing
Add or update tests when behavior changes.
Use the repo's runner. Mount the component and assert on rendered text and emitted events.
## Style
- Optimize for the next reader over the shortest diff.
- Comment only when the why is non-obvious.
- Name things the way neighboring files already do.
- Do not reformat code you did not change.
## Errors
- Fail at the boundary. Do not swallow errors.
- Fail in the composable or the submit handler with a message the component can render. Do not swallow rejected promises.
## Scope
- Do the requested task. Do not refactor unrelated code.
- Match the rigor already in the repo. Fix what you touch.
- Ask one clarifying question only when the task cannot be finished without it. Otherwise state the assumption and continue.
## Avoid
- Do not mix Options API and Composition API in the same new component.
- Do not mutate props.
- Do not lose reactivity by destructuring a reactive object without `toRefs`.
- Do not reach for `watch` when a computed value is enough.
## Done when
- The requested behavior works.
- `npm run build` still succeeds, and you ran the repo's lint or test script when one exists.
- The diff stays inside the task.
- You list anything you could not run.
## Review checklist
- The change matches the commands and layout in this file.
- No new dependency was added without a reason already present in the repo.
- Do not use v-html on untrusted strings.
- Keep tokens out of the bundle. Read them on the server.
- Validate form payloads before they reach an API.
Add it to the project
01
Copy a starting file
Copy the example Copilot instructions on this page, or open the generator if you want different testing, strictness, or comment rules.
02
Save it at .github/copilot-instructions.md
Save it as `.github/copilot-instructions.md` in the Vue repo. Create the `.github` folder if it is missing. Commit the file so Copilot sees it for every collaborator.
03
Start a fresh agent session
Rules files are read when a session starts. A chat that is already open may still be using the old instructions.
04
Give it one small task
Ask for one change a Vue agent often gets wrong, such as a component that types its props and emits instead of reaching into a parent. If it ignores the file, confirm the path and start a new session.
Questions about this file
Where do I put Copilot instructions in a Vue repo?
Save it as `.github/copilot-instructions.md` in the Vue repo. Create the `.github` folder if it is missing. Commit the file so Copilot sees it for every collaborator.
Which tools read this Copilot instructions?
GitHub Copilot in VS Code, Visual Studio, and Copilot cloud agents read this file. Other agents will not load it automatically, so keep an AGENTS.md too if more than one tool edits the repo.
What does the Vue example assume?
The example assumes Vue 3 with the Composition API. It does not assume Nuxt, Pinia, or Vue Router unless those are already installed. Do not mix in the Options API for new code.
Does VibeSpell upload my repository?
No. Recipe pages are static, and the generator builds the file in your browser from the options you pick. Your source code never leaves the machine.
Other files for Vue
Copilot instructions for other stacks
- Copilot instructions for Next.js
- Copilot instructions for React
- Copilot instructions for SvelteKit
- Copilot instructions for Node.js
- Copilot instructions for FastAPI
- Copilot instructions for Django
- Copilot instructions for Go
- Copilot instructions for Rust
- Copilot instructions for Unity
- Copilot instructions for Godot
- Copilot instructions for Laravel
- Copilot instructions for Rails
- Copilot instructions for Flutter
- Copilot instructions for Swift
- Copilot instructions for Kotlin
- Copilot instructions for Unreal
- Copilot instructions for Next.js + Supabase
- Copilot instructions for T3
- Copilot instructions for Astro
- Copilot instructions for Remix
- Copilot instructions for Nuxt
- Copilot instructions for Electron
- Copilot instructions for Tauri
- Copilot instructions for Expo
- Copilot instructions for Spring Boot
- Copilot instructions for .NET
- Copilot instructions for Phaser
- Copilot instructions for Bevy
- Copilot instructions for Roblox
- Copilot instructions for Python ML
- Copilot instructions for LangChain