Vue 3 Nuxt 3 TailwindCSS .cursorrules prompt file
About .cursorrules prompt file
What you can build
Vue 3 Project Starter Kit: A web application that utilizes the best practices for Vue 3 and Nuxt 3 development. It would include a basic setup with a predefined directory structure, TailwindCSS integration, sample components, and pages that demonstrate the use of Nuxt's features like
useFetch
,useRoute
, anduseHead
. It would serve as a perfect starter kit for developers starting a new Vue 3 project.Interactive Components Library: A reusable components library built with Vue 3 and styled with TailwindCSS. It would include highly interactive and accessible components (e.g., dropdown menus, modal windows, and tabs) following best practices like ARIA attributes,
tabindex
for keyboard navigation, and event handlers prefixed with "handle".Nuxt 3 SEO Dashboard: A Nuxt 3 web application providing analytics and recommendations to improve web page SEO. The app would use
useHead
to manage meta tags and provide users with suggestions like altering titles or descriptions for SEO optimization. Data fetching would be performed withuseFetch
, with error handling via Nuxt's error system.Online Educational Platform: A full-featured educational platform built using Nuxt 3. It would feature dynamic page rendering for courses, use Nuxt modules, and incorporate server-side functionalities for handling user data. The file structure will be organized for scalability, including layouts, server endpoints, and a shared composable directory for logic reuse.
TailwindCSS Theme Switcher: A Vue 3 application demonstrating how to implement a theme switcher using TailwindCSS. Users could toggle between light and dark themes using a button, and the app would save user preferences across sessions. The application would include a Vue component employing
<script setup>
with composition API for state and effect management.Real-Time Chat Application: A simple chat application using Vue 3 and Nuxt.js that showcases real-time data handling. The app would leverage websockets for bi-directional messaging and use Nuxt's built-in error boundary components for displaying error messages. TailwindCSS classes would be used for styling chat messages and user interface components.
Dynamic Form Builder: A platform to create and manage dynamic forms using Vue 3. Users can drag and drop form elements to create new forms, which will be rendered using TailwindCSS and Vue components. The application would handle complex state management using Vue's composition API and store form data persistently across sessions.
Recipe Sharing Community Site: A social platform for sharing cooking recipes, built with Nuxt 3 and Vue 3. Users can sign up, create profiles, post recipes, and comment on others’ recipes. The app would employ Nuxt's
useFetch
for loading data, utilizedefinePageMeta
for page SEO, and make HTTP requests using the$fetch
utility.Accessibility Checker Tool: An online tool developed to analyze websites' accessibility using Nuxt 3 and Vue 3 standards. Users can input a URL to receive a detailed report on accessibility concerns like ARIA compliance. The app would demonstrate robust asynchronous operations with async/await and handle errors gracefully using Nuxt's system.
Portfolio Showcase Template: A customizable, responsive template for personal portfolios built with Vue 3 and Nuxt 3. The template would use TailwindCSS for styling, with pre-built components for showcasing projects, resume, blog posts, and contact information. It would provide options for simple SEO customization using Nuxt features like
useHead
anddefinePageMeta
.
Benefits
- Emphasizes Nuxt 3's architecture, encouraging usage of its directory structure and auto-imports for organized and efficient code management.
- Prioritizes code readability through early returns, arrow functions, and descriptive naming, aligning with DRY principles.
- Mandates TailwindCSS for styling, ensuring consistency and adherence to Nuxt 3's integration features.
Synopsis
Developers building web applications with Vue 3, Nuxt 3, and TailwindCSS will benefit from creating maintainable, readable, and efficient frontend code adherent to best practices.
Overview of .cursorrules prompt
The .cursorrules file is designed for a Senior Frontend Developer specializing in Vue 3, Nuxt 3, JavaScript, TailwindCSS, HTML, and CSS. It guides the developer to provide thoughtful, accurate answers and produce high-quality, best practice code by following a detailed step-by-step approach using pseudocode and then actual coding. The file emphasizes the importance of DRY principles, readability, and completeness in code, and sets specific guidelines for code implementation such as using the Composition API, automatic imports in Nuxt 3, Tailwind styling, and proper directory structuring. It also mandates the use of modern JavaScript features, accessibility improvements, and proper error handling in line with Nuxt 3 conventions.