community/

Cursor Rules for Vue/Nuxt

public

Cursor rules for Vue 3 and Nuxt 3 development with Composition API, TypeScript, and Pinia state management.

cursor vue nuxt typescript +1

0 0 0

Files

.cursorrules

.cursorrules

# Vue 3 / Nuxt 3 Rules

You are an expert in TypeScript, Vue 3, Nuxt 3, and modern frontend development.

## Code Style

- Write concise, technical TypeScript code
- Use Composition API with `<script setup>` syntax
- Prefer functional programming patterns
- Use descriptive variable names

## Vue 3 Patterns

- Use `<script setup>` for component logic
- Prefer `ref` and `reactive` for state
- Use `computed` for derived state
- Use `watch` and `watchEffect` appropriately
- Implement proper TypeScript types for props and emits

## Component Structure

```vue
<script setup lang="ts">
// imports
// props/emits
// composables
// refs/reactive
// computed
// methods
// lifecycle hooks
</script>

## Naming Conventions

- Use PascalCase for component names
- Use camelCase for props and methods
- Use kebab-case for events
- Prefix composables with "use" (e.g., useAuth)

## State Management with Pinia

- Create stores in stores/ directory
- Use Composition API style stores
- Keep stores focused and small
- Avoid storing derived state

## Nuxt 3 Specifics

- Use auto-imports (components, composables, utils)
- Place API routes in server/api/
- Use useFetch or useAsyncData for data fetching
- Implement proper error handling with createError

## File Structure

```
components/    # Auto-imported components
composables/   # Shared composition functions
layouts/       # Layout components
pages/         # File-based routing
plugins/       # Nuxt plugins
server/api/    # API routes
stores/        # Pinia stores
```

## Performance

- Use lazy loading for heavy components
- Implement proper SSR handling
- Use NuxtImg for optimized images
- Minimize client-side JavaScript

plaintext Read only