Product Card Component

Build a mobile product card display component using a Vue 3 UI library. The component should display product information in a card format suitable for mobile e-commerce applications.

@generates

Requirements

Create a Vue 3 component that displays a product card with the following features:

1. Product Image: Display a product thumbnail image at the top of the card
2. Product Information: Show the product title and description text
3. Price Display: Display the product price prominently
4. Action Button: Include a button or footer section for user actions (e.g., "Add to Cart")

The component should accept the following data as props:

• Product image URL
• Product title (text)
• Product description (text)
• Product price (number or string)

The card should have appropriate spacing, typography, and layout optimized for mobile viewing.

Test Cases

• Given product data with image URL, title, description, and price, the component renders all information correctly @test
• Given a product with a long description, the card displays the description within the card boundaries @test
• Given a product price of 99.99, the card displays the price correctly @test

Dependencies { .dependencies }

vant { .dependency }

Provides Vue 3 mobile UI components including product card display.