About .cursorrules prompt file
What you can build
VueOnlineStore: Develop an e-commerce platform with Vue 3, TypeScript, and Tailwind CSS. Use Vue Router for navigation and Pinia for state management, optimizing the build with Vite. Implement lazy loading for product images and form validation for checkout processes.
PortfolioBuilder: Create a personal portfolio website builder app that uses Tailwind CSS for styling and Vue 3 for dynamic content updates. Employ Vite for fast development and integrate Vue Router for page navigation, with custom components built using the composition API.
ProjectManagementApp: Build a project management tool utilizing Vue 3, TypeScript, and Pinia for state management. Incorporate tasks, timelines, and team management with responsive UI developed using Tailwind CSS. Use Vue Test Utils for testing components and ensure optimal performance with Vite.
BlogPlatform: Design a blog platform where users can create and manage articles. Use Vue 3 and the composition API for component structure, utilize Tailwind CSS for design, and leverage Vue Router for navigating between posts. Implement Pinia for user state management and form validation for comments.
RealTimeChatApp: Develop a real-time chat application with Vue 3, TypeScript, and Vue Router for managing chat rooms. Use Tailwind CSS for UI components and ensure data reactivity using the Vue Reactivity API. Optimize performance with lazy loading and Pinia for message state management.
QuizCreator: Design an interactive quiz creation application with Vue 3 and TypeScript. Use Tailwind CSS and DaisyUI for styling and components. Implement custom composables for quiz logic and validation, utilizing Pinia for state management and Vue Router for seamless navigation.
EventPlanner: Build an event planning and management tool using Vue 3, TypeScript, and Tailwind CSS. Implement Vue Router for event navigation and Pinia for attendee and schedule state management. Optimize with Vite for quick builds and use component testing with Vue Test Utils.
RecipeApp: Create a recipe application where users can search, save, and share their favorite recipes using Vue 3, TypeScript, and Tailwind CSS. Employ Pinia for managing user preferences and Vue Router for navigation between recipes. Implement lazy loading for recipe images to enhance performance.
WeatherDashboard: Construct a weather dashboard application with real-time data updates using Vue 3 and the Vue Reactivity API. Use Tailwind CSS for UI design and integrate routing with Vue Router. Optimize the build with Vite for fast loading times and test components with Vitest.
FitnessTracker: Develop a fitness tracking app that records workouts and analyzes progress, using Vue 3 with TypeScript and Tailwind CSS. Implement state management with Pinia to persist user data and optimize performance through lazy loading and reactivity for real-time updates.
Benefits
- Use
<script setup lang="ts">to leverage TypeScript advantages in Vue components with concise logic. - Optimize Vite configuration and use plugins like @vitejs/plugin-vue for efficient builds.
- Implement responsive, utility-first design with Tailwind CSS and enhance using DaisyUI pre-built components.
Synopsis
A front-end developer experienced with Vue.js can create a performant, scalable web application using Vue 3, TypeScript, and Tailwind CSS by adhering to the provided coding standards and best practices.
Overview of .cursorrules prompt
The .cursorrules file provides a comprehensive guide for developers working with Vue.js 3, TypeScript, Vite, and Tailwind CSS. It emphasizes writing concise and technically accurate code by utilizing the Composition API and script setup syntax in Vue components, and encourages declarative programming patterns. The file outlines naming conventions, advocating for PascalCase in component names, camelCase for variables and functions, and kebab-case for custom events. It promotes the use of TypeScript with interfaces and Vue's TypeScript support for defining prop and return types. Developers are advised on structuring files efficiently, using Vite for build configuration, and implementing responsive UI with Tailwind CSS and DaisyUI. The file also covers state management with Pinia, routing with Vue Router 4, and testing with Vitest. It highlights the importance of performance optimization through lazy loading and proper caching strategies, as well as error handling and validation best practices. Developers are encouraged to follow official documentation for continued adherence to best practices.
