pleno-vue/.junie/guidelines.md

Project Guidelines

Project Overview

This repository contains a Vue 3 single-page application built with Vite. It powers dashboard-style pages and modules such as bookings and POS flows. The UI is primarily styled with Bulma. The app leverages libraries like FullCalendar and Chart.js for scheduling and analytics.

• Tech stack: Vue 3, Vite 5, Vue Router, Vuex, Bulma, FullCalendar, Chart.js
• Notable integrations: toast notifications, QR/Barcode utilities, and PWA/devtools plugins
• Target: modern browsers and mobile WebView contexts

Local development

• Requirements: Node.js 18+ (recommended to match Vite 5), npm 9+
• Install dependencies: npm install
• Start dev server: npm run dev (default at http://localhost:5173)

Build and preview

• Production build: npm run build (output in dist/)
• Preview build locally: npm run preview

Testing

• Framework: WebdriverIO (wdio) with Vite service; Appium available for mobile testing
• Common commands:
  • npm run wdio — run test suite per wdio.conf.js
  • npm run test:mobile — run tests excluding Safari
  • npm run test:android — run Android-targeted specs
• Prerequisites for mobile tests may include Android SDK/emulator or iOS tooling and Appium drivers

Environment configuration

• Place environment variables in .env.* files (Vite loads VITE_-prefixed vars into the client)

See the sections below for code style and detailed project structure.

Code Style and Conventions

Vue Components

• Use PascalCase for component names (e.g., UserProfile.vue)
• Implement Single File Components (SFC) pattern
• Keep components focused and single-responsibility
• Use composition API for new components
• Document component props and events

JavaScript/TypeScript

• Use ES6+ features
• Maintain consistent naming conventions (camelCase for variables/methods)
• Document complex logic with clear comments
• Use TypeScript for type safety when possible

Project Structure

Root Directory Structure

• /src - Source code files
  • /assets - Static assets (images, fonts, etc.)
  • /components - Reusable Vue components
  • /views - Page components
  • /router - Vue Router configuration
  • /store - Vuex store modules
  • /services - API and external service integrations
  • /utils - Utility functions and helpers
  • /styles - Global styles and variables

Configuration Files

• vite.config.js - Vite configuration
• .env.* - Environment variables
• package.json - Project dependencies and scripts
• jsconfig.json - JavaScript/TypeScript tooling and path aliases

File Naming Conventions

• Components: PascalCase (e.g., UserProfile.vue)
• Utilities: camelCase (e.g., formatDate.js)
• Store modules: camelCase (e.g., userStore.js)
• Style files: kebab-case (e.g., main-styles.scss)
• Test files: *.spec.js or *.test.js