Browse

Vue.js 3 .cursorrules prompt files

Vue.js 3 is a progressive JavaScript framework for building user interfaces, featuring improved performance and better TypeScript integration.

Filters

All

React

Tailwind CSS

Filters

Tech

Clear

Chainlink VRF

Drizzle

Zustand

Prisma

SWR

Ruff

virtual environments

Langchain

SQLite

dask

matplotlib

tqdm

Flask

seaborn

joblib

Tauri

python-dotenv

pip

Azure

Django REST Framework

MySQL

unittest

WhiteNoise

pytest-django

Go

Kafka

Rust

GraphQL

Kubernetes

Cypress

Axios

Next.js SSR.

Angular

React Server Components (RSC)

Rell

Kotlin

Tailwind CSS.

Cairo

Biome

Composer

yarn

Nuxt 3

Wagmi

Viem

autoprefixer

@types/react

Next.Js

@types/node

postcss

react-dom

Supabase Auth

Next.js 14

Daisy UI

MongoDB

React.js

Mongoose ODM

Express.js

JSON Web Tokens

Dusk

PHPUnit

Paraglide.js

WordPress

Sass

MDX

Less

Netlify

Linux

Vercel AI SDK

Framer Motion

Firebase

Formik

poetry

node-gyp

uuid

mime-types

js-yaml

Istio

SOLID

CSS frameworks

Expo Router

React Query

Sentry

Clerk

OpenAI

SSR

RSC

fetch

React Native Testing Library

Detox

HTTPS

Flexbox

Prometheus

Memcached

ELK Stack

Grafana

dataclasses

SQLModel

async/await

API

Vue.js 3 TypeScript Vite Tailwind .cursorrules prompt file

You are an expert in Vue.js 3, TypeScript, Vite, and Tailwind CSS.

Code Style and Structure:

Write concise, technical Vue 3 and TypeScript code with accurate examples
Use composition API and script setup syntax for Vue components
Prefer functional and declarative programming patterns
Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
Structure files: single-file components (.vue), composables, helpers, types

Naming Conventions:

Use PascalCase for component names
Use camelCase for variables, functions, and methods
Use kebab-case for custom events and props

TypeScript Usage:

Use TypeScript for all code; prefer interfaces over types
Utilize Vue 3's improved TypeScript support
Define prop types and return types for functions

Vue 3 and Composition API:

Use <script setup lang="ts"> for component logic
Utilize Vue 3 Reactivity API (ref, reactive, computed, watch)
Implement proper lifecycle hooks (onMounted, onUnmounted, etc.)

Vite and Build Configuration:

Optimize Vite configuration for development and production
Use Vite plugins effectively (e.g., @vitejs/plugin-vue)

UI and Styling:

Implement responsive design with Tailwind CSS
Use DaisyUI for pre-built Tailwind components
Follow utility-first approach for custom styling

State Management:

Use Pinia for global state management
Implement composables for reusable logic

Routing:

Utilize Vue Router 4 for application routing
Implement proper navigation guards and route meta fields

Testing:

Write unit tests using Vitest
Follow Vue Test Utils best practices for component testing

Performance Optimization:

Implement lazy loading for routes and components
Use Vue 3's improved reactivity system for better performance
Optimize assets and implement proper caching strategies

Error Handling and Validation:

Implement proper error handling in async operations
Use Vue 3's improved error handling capabilities
Implement form validation using appropriate libraries or custom solutions

Follow Vue 3, Vite, and Tailwind CSS documentation for best practices and up-to-date information

stack:

Vue.js 3 TypeScript Vite Tailwind .cursorrules prompt file

CodeWithCursor

0

NEW

Vue.js 3 TypeScript Tiptap .cursorrules prompt file

Umo Editor Configuration

Umo Editor is an open-source rich-text document editor built using:

Vue.js 3 (>=v3.4)
Tiptap (>=v2.6)
TypeScript (>=v5.5)
Vite (>=v5.4)

You are an expert in all of these technologies

Coding Style & Practices

Prefer functional programming where appropriate
Use OOP for complex service abstractions, otherwise prefer functional
Ensure the code is strongly typed
Follow these Prettier rules:
```json
{
"semi": false,
"singleQuote": true,
"tabWidth": 2
}
```
Use strict typing and assume the code maintainers are experienced TypeScript and VueJS developers.
Import type predicate functions (isString, isRecord, isAsyncFunction etc.) from @tool-belt/type-predicates, it includes everything included in the node:util module and more, and is available in the browser.
Use typescript path aliases as configured: @/ which equals the workspace src/* directory, and ::testing/, which equals the workspace testing/ directory.
Note: ::testing should only be imported in test files.
Test files are written next to the code file, inside the src folder, and they follow the *.spec.ts naming scheme.
The VueMacroes and Reactivity transform libraries are configured in the vite config.

Testing Guidelines

When writing tests:

Use vitest for writing test with the @testing-library/vue and installed.
Use @faker-js/faker where appropriate in tests to generate mock data.
Use it rather than test and follow BDD test message practices.
Use describe.each and it.each if parameterized tests are appropriate for the testing scenario.
Use nested describes if testing multiple functions or classes in the same file.
Use vi.mocked() to type cast values as mocks.