aserrador
38c1d8c17c
INDUSTRY STANDARD IMPLEMENTATION: - Change placeholder images from 300x200 (3:2) to 600x600 (1:1 square) - Set max-height to 300px with aspect-ratio 1:1 for consistent display - Follow e-commerce best practices (Amazon, Shopify, Mercado Libre) TEMPLATE CHANGES: - catalog.vue: Update placeholder URL to 600x600 square images - Card.vue: Add aspect-ratio="1" for perfect square display - Card.vue: Increase max-height from 140px to 300px - Restore padding: pa-2 → pa-3 (8px → 12px) - Restore title size: text-subtitle-2 → text-subtitle-1 - Restore margins: mb-1 → mb-2 - Restore chip size: x-small → small - Restore footer padding: pa-2 → pa-2 pb-3 CSS CHANGES: - Remove fixed height from .product-image-container (use 100% for flexibility) - Product name: 0.85rem → 0.95rem, min-height 2rem → 2.5rem - Price label: 0.6rem → 0.65rem - Price value: 0.9rem → 1.1rem - Price chip: height 22px → 26px, font 0.75rem → 0.9rem - Quantity input: 55px → 65px, font 0.85rem → 0.95rem - Section gaps: 2px → 4px, row gaps: 1px → 2px RESPONSIVE STRATEGY (optimized for 300px max): - Mobile XS (<375px): Natural scaling, compact layout - Mobile (375-559px): Natural scaling, readable text - Tablet (560-959px): Enhanced padding and fonts - Desktop (≥960px): Full 300px display with optimal spacing - Desktop L/XL: Maintain 300px with enhanced typography RESULT: - Square images (1:1) matching industry standard - 600x600 source allows retina displays and zoom - 300px display on desktop (sweet spot for catalogs) - Responsive scaling maintains aspect ratio - Professional e-commerce appearance
Vuetify (Default)
This is the official scaffolding tool for Vuetify, designed to give you a head start in building your new Vuetify application. It sets up a base template with all the necessary configurations and standard directory structure, enabling you to begin development without the hassle of setting up the project from scratch.
❗️ Important Links
- 📄 Docs
- 🚨 Issues
- 🏬 Store
- 🎮 Playground
- 💬 Discord
💿 Install
Set up your project using your preferred package manager. Use the corresponding command to install the dependencies:
| Package Manager | Command |
|---|---|
| yarn | yarn install |
| npm | npm install |
| pnpm | pnpm install |
| bun | bun install |
After completing the installation, your environment is ready for Vuetify development.
✨ Features
- 🖼️ Optimized Front-End Stack: Leverage the latest Vue 3 and Vuetify 3 for a modern, reactive UI development experience. Vue 3 | Vuetify 3
- 🗃️ State Management: Integrated with Pinia, the intuitive, modular state management solution for Vue.
- 🚦 Routing and Layouts: Utilizes Vue Router for SPA navigation and vite-plugin-vue-layouts for organizing Vue file layouts. Vue Router | vite-plugin-vue-layouts
- ⚡ Next-Gen Tooling: Powered by Vite, experience fast cold starts and instant HMR (Hot Module Replacement). Vite
- 🧩 Automated Component Importing: Streamline your workflow with unplugin-vue-components, automatically importing components as you use them. unplugin-vue-components
These features are curated to provide a seamless development experience from setup to deployment, ensuring that your Vuetify application is both powerful and maintainable.
💡 Usage
This section covers how to start the development server and build your project for production.
Starting the Development Server
To start the development server with hot-reload, run the following command. The server will be accessible at http://localhost:3000:
yarn dev
(Repeat for npm, pnpm, and bun with respective commands.)
Add NODE_OPTIONS='--no-warnings' to suppress the JSON import warnings that happen as part of the Vuetify import mapping. If you are on Node v21.3.0 or higher, you can change this to NODE_OPTIONS='--disable-warning=5401'. If you don't mind the warning, you can remove this from your package.json dev script.
Building for Production
To build your project for production, use:
yarn build
(Repeat for npm, pnpm, and bun with respective commands.)
Once the build process is completed, your application will be ready for deployment in a production environment.
💪 Support Vuetify Development
This project is built with Vuetify, a UI Library with a comprehensive collection of Vue components. Vuetify is an MIT licensed Open Source project that has been made possible due to the generous contributions by our sponsors and backers. If you are interested in supporting this project, please consider:
- Requesting Enterprise Support
- Sponsoring John on Github
- Sponsoring Kael on Github
- Supporting the team on Open Collective
- Becoming a sponsor on Patreon
- Becoming a subscriber on Tidelift
- Making a one-time donation with Paypal
📑 License
Copyright (c) 2016-present Vuetify, LLC