Cursor Rules Template: Vue 3 Composition API + Vuetify

Overview

This Cursor rules configuration provides a concrete, copyable Cursor AI (.cursorrules) configuration for a Vue 3 application using the Composition API with Vuetify. It defines how Cursor AI should operate, what patterns to follow, and constraints for code generation within a Vue 3 + Vuetify project.

Direct answer: This template configures Cursor AI rules for the Vue 3 + Vuetify stack, covering code style, architecture, auth patterns, and a testing workflow to keep front-end development consistent.

When to Use These Cursor Rules

• Starting a Vue 3 project that uses the Composition API and Vuetify.
• Standardizing code style, architecture, and file structure for a team.
• Guiding Cursor AI to generate Vue components, routes, stores, and API clients with consistent patterns.
• Enforcing authentication patterns (JWT in HttpOnly cookies) and secure data flow in the frontend.
• Setting up tests (unit, integration) and linting workflows for the Vue stack.

Copyable .cursorrules Configuration

// Cursor Rules Template for Vue 3 + Vuetify
# Framework Role & Context
role: 'Frontend Engineer using Vue 3 Composition API with Vuetify'
context: 'Build a responsive SPA with Vuetify components, Vue Router, and a typed API client'

# Code Style and Style Guides
style: 'Airbnb Vue style guide v7, Prettier 3, ESLint'
fileExtensions: ['.ts', '.vue', '.js']
tsConfig: 'strict'

# Architecture & Directory Rules
projectRoot: 'src/'
componentsDir: 'src/components'
viewsDir: 'src/views'
storeDir: 'src/store'
routerDir: 'src/router'
assetsDir: 'src/assets'

# Authentication & Security Rules
auth: 'JWT in httpOnly cookies; use Vuex/Pinia for auth state; protect routes via router guards'
permissions: 'role-based access; avoid storing tokens in localStorage'

# Database and ORM patterns
database: 'Frontend should call backend APIs; avoid direct DB access from frontend'
apiClient: 'centralized axios/fetch wrapper with baseURL, interceptors, and error handling'

# Testing & Linting Workflows
testing: 'Vitest unit tests; Vue Test Utils for components; Cypress for E2E'
lint: 'eslint + prettier; husky pre-commit; commitlint'

# Prohibited Actions and Anti-patterns for the AI
doNot: [
  'Do not generate direct DOM manipulation without Vue bindings',
  'Do not bypass Vue reactivity with hidden state flags',
  'Do not access server secrets from the frontend',
  'Do not mutate props in child components'
]

Recommended Project Structure

src/
├── main.ts
├── App.vue
├── router/
│   └── index.ts
├── views/
│   └── Home.vue
├── components/
│   └── shared/
│       └── AppHeader.vue
├── composables/
│   └── useAuth.ts
├── store/
│   └── index.ts
├── plugins/
│   └── vuetify.ts
├── services/
│   └── api.ts
└── assets/
    └── logo.png

Core Engineering Principles

• Type-safe Vue 3 components using Composition API with setup() and <script setup>.
• Vuetify 3 as the UI layer with accessible components and proper props usage.
• Single source of truth for API types and responses; central API client wrapper.
• Strict linting and formatting to enforce consistency across the team.
• Clear separation of concerns: components, views, composables, and services.
• Cursor AI operates within safe patterns: deterministic code generation, no eval, no direct DOM hacks.

Code Construction Rules

• Use defineComponent or script setup with lang=\"ts\" in Vue SFCs.
• Prefer composition utilities like ref, computed, watch inside setup().
• All API calls go through a centralized client in src/services/api.ts with proper error handling.
• Components should not mutate props; use local state derived via computed or ref.
• Vuetify 3 components must include proper accessibility attributes and slots usage.
• Routing should be defined in src/router with per-route guards for protected pages.

Security and Production Rules

• Handle authentication with HttpOnly cookies; do not expose tokens in localStorage.
• Use environment variables for API endpoints; avoid embedding secrets in the client.
• Implement strict Content Security Policy and avoid dangerous DOM APIs.
• Validate and sanitize data on the server; the frontend should perform minimal trust assumptions.
• Configure secure headers and cookie attributes in the backend; ensure secure flag in production.

Testing Checklist

• Unit tests for components and composables using Vitest.
• Component tests with Vue Test Utils. Mock API client to verify logic.
• Integration tests for router guards and auth flows.
• End-to-end tests with Cypress for critical user journeys.
• Lint and type checks run in CI; fail on lint or type errors.

Common Mistakes to Avoid

• Exposing API keys or secrets in frontend code.
• Using direct DOM manipulation or setInterval in components without Vue bindings.
• Ignoring TypeScript types and relying on dynamic values.
• Not following the Cursor rules and allowing unsafe patterns in generation.
• Overusing global event bus instead of structured state or composition API patterns.

FAQ

What is a Cursor rules template for Vue 3 + Vuetify?

This Cursor rules template defines a repeatable, rule-based configuration that guides Cursor AI to generate Vue 3 components using the Composition API and Vuetify UI elements. It specifies architecture, coding standards, auth practices, and testing workflows so generated code adheres to a consistent, secure front-end pattern.

Which sections are included in the .cursorrules block?

The block includes Framework Role & Context, Code Style & Style Guides, Architecture & Directory Rules, Authentication & Security Rules, Database/API patterns, Testing & Linting Workflows, and Prohibited Actions. Each section codifies expectations to steer Cursor AI toward safe, maintainable Vue 3 + Vuetify implementations.

How do I apply this template to my project?

Copy the provided .cursorrules block into a new file named .cursorrules at the project root. Then ensure the project is Vue 3 with Composition API and Vuetify configured. Run Cursor AI tooling to ingest the rules and begin guided code generation with these constraints.

What should I avoid when using Cursor AI with Vue 3 Vuetify?

Avoid generating code that bypasses Vue reactivity, directly manipulates the DOM, or embeds secrets client-side. Do not rely on unsafe eval patterns, and do not bypass the centralized API client for API calls. Ensure strict typing and authentication handling is preserved in all generated assets.

Is authentication and API access covered?

Yes. The template enforces the use of HttpOnly cookies for auth, a centralized API client, and route guards to protect protected views. It discourages localStorage-based tokens and emphasizes secure API endpoints with server-validated responses.