Skip to main content
rule

vue3-composition-api-cursorrules-prompt-file — Cursor rule

This rule guides Cursor on Vue 3 Composition API practices, component setup, and project layout. Use it when you want those conventions reflected in code edits.

Install into Cursor · Manually: put the files in place All methods and platforms ↓
.cursor/rules/vue3-composition-api-cursorrules-prompt-file.mdc
Open on GitHub

What vue3-composition-api-cursorrules-prompt-file does

The rule covers Vue 3 component logic with setup(), reactive state using ref and reactive, and derived values through computed(). It points to watch and watchEffect for side effects, plus lifecycle hooks such as onMounted and onUpdated. It also covers provide/inject, TypeScript, and definitions for props and emits.

A suggested src/ layout includes components/, composables/, views/, router/, store/, and assets/, alongside App.vue and main.js. The rule matches **/*, while alwaysApply is set to false, so it is not configured to apply all the time. Other guidance covers error handling, Vue 3 naming and style conventions, and using Vite, Teleport, or Suspense where appropriate.

What it helps with

  • structure Vue 3 component logic around setup()
  • choose Vue 3 APIs for reactive state and side effects
  • organize a project with a suggested src/ layout
  • define typed props and emits for components

Example prompts for the agent

  • Create a Vue 3 component with the Composition API and typed props and emits.
  • Add reactive state and a computed value to this component.
  • Organize this Vue 3 project using the suggested src/ layout.

How to install vue3-composition-api-cursorrules-prompt-file

Manually: put the files in place

.cursor/rules/vue3-composition-api-cursorrules-prompt-file.mdc

Frontmatter: description, globs, alwaysApply

Step by step, with commands for each platform: Cursor rules: .mdc files, four modes and what replaced .cursorrules

Questions about vue3-composition-api-cursorrules-prompt-file

How do I install vue3-composition-api-cursorrules-prompt-file in Cursor?

Add the rule file at .cursor/rules/vue3-composition-api-cursorrules-prompt-file.mdc.

What does vue3-composition-api-cursorrules-prompt-file do?

It gives Cursor conventions for Vue 3 Composition API code, reactive state, project layout, and component definitions.

Does the rule apply automatically to every file?

Its glob is **/*, but alwaysApply is false, so it is not configured for constant application.

Source text

vue3-composition-api-cursorrules-prompt-file.mdc · CC0-1.0
---
description: "Cursor rules for Vue 3 development with Composition API integration."
globs: **/*
alwaysApply: false
---
// Vue 3 Composition API .cursorrules

// Vue 3 Composition API best practices

const vue3CompositionApiBestPractices = [
  "Use setup() function for component logic",
  "Utilize ref and reactive for reactive state",
  "Implement computed properties with computed()",
  "Use watch and watchEffect for side effects",
  "Implement lifecycle hooks with onMounted, onUpdated, etc.",
  "Utilize provide/inject for dependency injection",
];

// Folder structure

const folderStructure = `
src/
  components/
  composables/
  views/
  router/
  store/
  assets/
  App.vue
  main.js
`;

// Additional instructions

const additionalInstructions = `
1. Use TypeScript for type safety
2. Implement proper props and emits definitions
3. Utilize Vue 3's Teleport component when needed
4. Use Suspense for async components
5. Implement proper error handling
6. Follow Vue 3 style guide and naming conventions
7. Use Vite for fast development and building
`;

© PatrickJS · CC0-1.0 · PatrickJS/awesome-cursorrules

Similar IDE rules

All IDE rules for Frontend and UI →

From the same set234

The whole set →
wordpress-php-guzzle-gutenberg-cursorrules-prompt- Configures Cursor for WordPress plugins built with Guzzle, custom REST endpoints, and Gutenberg blocks. Enforces type hinting and WordPress standards. ★ 41,024repo stars wordpress-claude-stack This Cursor rule guides WordPress theme, plugin, and block work. It suits projects that use PHP alongside WooCommerce or ACF. ★ 41,024repo stars webassembly-z80-cellular-automata-cursorrules-prom A Cursor rule that walks the agent through adding a region grid to a Z80 cellular automata simulation built on WebAssembly. ★ 41,024repo stars web-app-optimization-cursorrules-prompt-file Cursor prompt instructions for developing web apps with Svelte 5, SvelteKit, TypeScript, and runes. ★ 41,024repo stars vue A Cursor rule that tells the agent how to write Vue: Composition API, Pinia, typing and routing. Useful when the project already has .vue and .ts files. ★ 41,024repo stars vue-pinia-cursorrules-prompt-file Guides Cursor to write clean Vue 3 and TypeScript state management using Pinia setup stores, proper reactivity, SSR safeguards, and tests. ★ 41,024repo stars vue-claude-stack This rule guides code generation for Vue 3 and Nuxt 3, covering Composition API, TypeScript, and Pinia. Use it to give an agent consistent project conventions. ★ 41,024repo stars vue-3-nuxt-3-typescript-cursorrules-prompt-file A Cursor rule that tells the agent how to write Vue 3 and Nuxt 3 code: Composition API, TypeScript interfaces, Nuxt conventions. Useful when the project already runs this stack. ★ 41,024repo stars

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor