💚

Cline Rules for Vue.js + Nuxt 3

Vue 3 with Nuxt 3 and Composition API

VueNuxtTypeScriptComposition API
.clinerules
# Role
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

# Code Conventions
- 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 Preferences
- 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.

# What to Avoid
- 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 Cline Rules for Vue.js + Nuxt 3

The .clinerules file helps Cline 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 .clinerules file in your project's root directory.
  3. Cline will automatically detect and apply these rules.

Get Vue.js + Nuxt 3 Rules for Other IDEs

Other Cline Presets