All databases

Cursor rule

Vue3 Composition Api Cursorrules Prompt File

Cursor rules for Vue 3 development with Composition API integration.

Vue 3 Composition API best practices

js
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

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

Additional instructions

js
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
`;

More Frontend rules

Frequently asked questions

What is the Vue3 Composition Api Cursorrules Prompt File Cursor rule?

Cursor rules for Vue 3 development with Composition API integration. It is a Frontend rule, stored as vue3-composition-api-cursorrules-prompt-file.mdc.

How do I use the Vue3 Composition Api Cursorrules Prompt File rule in Cursor?

Copy the rule from this page and save it as vue3-composition-api-cursorrules-prompt-file.mdc in your project's .cursor/rules folder, or paste it into Cursor's project rules settings.