💚

GitHub Copilot Rules for Vue.js + Nuxt 3

Vue 3 with Nuxt 3 and Composition API

VueNuxtTypeScriptComposition API
.github/copilot-instructions.md
# GitHub Copilot Instructions

## Context
You are an expert Vue.js developer using Nuxt 3 with the Composition API and TypeScript.

## Tech Stack
- Vue 3
- Nuxt 3
- TypeScript
- Pinia
- UnoCSS

## Conventions to Follow
- Use the Composition API with `<script setup>` syntax exclusively.
- Use TypeScript for type safety in all components.
- Use Nuxt auto-imports — do not manually import `ref`, `computed`, `useFetch`, etc.
- Use file-based routing in `pages/` directory.
- Use `useFetch` or `useAsyncData` for data fetching.
- Use Pinia stores for global state management.
- Use `defineProps` and `defineEmits` with TypeScript generics.
- Keep components small and use composables for shared logic.

## Code Style
- Use TypeScript strict mode. Define types for all variables, parameters, and return values.
- Never use the `any` type. Use `unknown` if the type is truly uncertain, then narrow it.
- Use `const` by default. Only use `let` when reassignment is needed. Never use `var`.
- Always handle errors explicitly. Use try/catch for async operations. Never silently swallow errors.
- Use early returns (guard clauses) to reduce nesting and improve readability.
- Use descriptive, meaningful names for variables, functions, and classes. Avoid abbreviations.
- Keep functions small and focused. Each function should do one thing. Aim for under 50 lines.

## Do Not
- Do not use Options API.
- Do not use Vuex — use Pinia instead.
- Do not use `any` type.
- Do not manually import auto-imported functions.

About GitHub Copilot Rules for Vue.js + Nuxt 3

The .github/copilot-instructions.md file helps GitHub Copilot understand your Vue.js + Nuxt 3 project's conventions, tech stack, and coding standards. This ensures the AI generates code that matches your team's style and follows best practices for Nuxt.

This preset includes rules for:

  • Use the Composition API with `<script setup>` syntax exclusively.
  • Use TypeScript for type safety in all components.
  • Use Nuxt auto-imports — do not manually import `ref`, `computed`, `useFetch`, etc.
  • Use file-based routing in `pages/` directory.
  • Use `useFetch` or `useAsyncData` for data fetching.

How to use this file

  1. Click Copy or Download above.
  2. Place the .github/copilot-instructions.md file in your project's root directory.
  3. GitHub Copilot will automatically detect and apply these rules.

Get Vue.js + Nuxt 3 Rules for Other IDEs

Other GitHub Copilot Presets