Component Preview & Download

Browse the component market, find the components you need, and download them to your project.

Browse Component Market

Click "Component Market" in the left menu to see all available components. The component list supports the following filters:

• Recommended: Intelligently recommended based on usage and ratings
• Latest: Arranged in reverse chronological order by release time
• Popular: Sorted by download count
• All: Display all components (including those with mismatched dependencies)

Preview Components

Click the "Preview" button on the component card to open the detail page in a new tab.

The detail page contains:

• Preview Area: Displays the actual running effect of the component
  • Supports small window/full-screen view switching
  • Adjustable background color to adapt to different themes
• Documentation Area: Displays README.md content (if available)
• Version Selection: Switch to view different versions of the component
• Dependency Information: View dependencies required by the component and their versions

Download Components

Method 1: Download from Component Market

1. Find the target component in the component market
2. Click the "Download" button on the card
3. In the file picker that pops up, navigate to the project's src/components directory
4. Click "Select Folder" to confirm download

Method 2: Download from Preview Page

1. Enter the component preview page
2. Click the "Download" button in the bottom right corner
3. Select the save location

After the download is complete, the component folder will appear in the directory you specified.

Use Components

Downloaded components can be used directly in the project:

<template>
  <div>
    <MyComponent :title="'Hello'" />
  </div>
</template>

<script setup>
import MyComponent from '@/components/MyComponent/index.vue'
</script>

FAQ

Q: The component doesn't work properly after downloading?

A: Please check:

1. Whether the dependencies required by the component are installed
2. Whether the Vue version matches the component requirements
3. Whether there are global style conflicts

Q: Why can't I see some components in "Recommended"?

A: Possible reasons:

1. Local Vue version doesn't match component requirements
2. Missing dependencies required by the component
3. Component is marked as a duplicate

Switch to the "All" filter to view all components, but those with mismatched dependencies may not be previewable.

Q: How to report component issues?

A: Click the "Feedback" button on the component preview page, or contact the component author in the community.