Top Related Projects
A Vue.js 2.0 UI Toolkit for Web
🐉 Vue Component Framework
🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜
Lightweight UI components for Vue.js based on Bulma
BootstrapVue provides one of the most comprehensive implementations of Bootstrap v4 for Vue.js. With extensive and automated WAI-ARIA accessibility markup.
Next Generation Vue UI Component Library
Quick Overview
HeyUI is a Vue.js 2.0 UI toolkit for web applications. It provides a set of high-quality components and demos for building rich, interactive user interfaces with a consistent design language. HeyUI aims to improve development efficiency and create a smooth user experience.
Pros
- Comprehensive set of UI components for rapid development
- Customizable themes and styles to match brand requirements
- Detailed documentation and examples for easy implementation
- Active development and community support
Cons
- Limited compatibility with Vue 3.x
- Smaller community compared to some other popular UI frameworks
- Some components may lack advanced features found in more specialized libraries
- Documentation primarily in Chinese, which may be challenging for non-Chinese speakers
Code Examples
- Basic Button Usage:
<template>
<h-button @click="handleClick">Click me</h-button>
</template>
<script>
export default {
methods: {
handleClick() {
this.$Message.info('Button clicked!');
}
}
}
</script>
- Form Input with Validation:
<template>
<Form ref="form" :rules="validationRules" :model="formData">
<FormItem label="Name" prop="name">
<input type="text" v-model="formData.name" />
</FormItem>
<FormItem>
<h-button @click="submitForm">Submit</h-button>
</FormItem>
</Form>
</template>
<script>
export default {
data() {
return {
formData: { name: '' },
validationRules: {
name: { required: true, message: 'Name is required' }
}
}
},
methods: {
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
// Form submission logic
}
});
}
}
}
</script>
- Data Table Example:
<template>
<Table :datas="tableData" :columns="columns"></Table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: 'John Doe', age: 30 },
{ id: 2, name: 'Jane Smith', age: 25 }
],
columns: [
{ title: 'ID', key: 'id' },
{ title: 'Name', key: 'name' },
{ title: 'Age', key: 'age' }
]
}
}
}
</script>
Getting Started
-
Install HeyUI in your Vue.js project:
npm install heyui
-
Import and use HeyUI in your main.js file:
import Vue from 'vue'; import HeyUI from 'heyui'; import 'heyui/themes/index.css'; Vue.use(HeyUI);
-
Now you can use HeyUI components in your Vue templates:
<template> <div> <h-button color="primary">Hello HeyUI</h-button> </div> </template>
Competitor Comparisons
A Vue.js 2.0 UI Toolkit for Web
Pros of Element
- Larger community and more widespread adoption, leading to better support and resources
- More comprehensive component library with a wider range of UI elements
- Better documentation and examples, making it easier for developers to get started
Cons of Element
- Larger bundle size, which may impact performance for smaller applications
- Steeper learning curve due to the extensive component library and options
- Less flexibility for customization compared to HeyUI's lightweight approach
Code Comparison
HeyUI example:
<template>
<h-button color="primary" @click="handleClick">Click me</h-button>
</template>
<script>
export default {
methods: {
handleClick() {
this.$Message.info('Button clicked');
}
}
}
</script>
Element example:
<template>
<el-button type="primary" @click="handleClick">Click me</el-button>
</template>
<script>
export default {
methods: {
handleClick() {
this.$message.info('Button clicked');
}
}
}
</script>
Both libraries offer similar syntax for basic components, but Element provides more customization options and a wider range of pre-built components. HeyUI's approach is more lightweight and may be easier to integrate into smaller projects or those with specific design requirements.
🐉 Vue Component Framework
Pros of Vuetify
- Larger community and more extensive documentation
- Wider range of pre-built components and features
- Better support for Material Design guidelines
Cons of Vuetify
- Steeper learning curve due to its extensive feature set
- Larger bundle size, which may impact performance
- More opinionated styling, potentially limiting customization
Code Comparison
Vuetify component usage:
<template>
<v-app>
<v-btn color="primary">Click me</v-btn>
</v-app>
</template>
HeyUI component usage:
<template>
<Button color="primary">Click me</Button>
</template>
Summary
Vuetify is a more comprehensive UI framework with a larger ecosystem and better support for Material Design. It offers a wider range of components and features but comes with a steeper learning curve and larger bundle size. HeyUI, on the other hand, is lighter and potentially easier to learn, but has a smaller community and fewer pre-built components.
The code comparison shows that both frameworks have similar component usage syntax, with Vuetify requiring a wrapping v-app
component for proper functionality. HeyUI's approach is more straightforward, which may be preferable for simpler projects or developers who prioritize ease of use.
🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜
Pros of ant-design-vue
- Larger community and more frequent updates
- Comprehensive documentation and examples
- Extensive component library with advanced features
Cons of ant-design-vue
- Steeper learning curve due to complexity
- Larger bundle size, potentially impacting performance
- Opinionated design system may require more customization
Code Comparison
HeyUI:
<template>
<Button color="primary" @click="handleClick">Click me</Button>
</template>
<script>
export default {
methods: {
handleClick() {
this.$Message.info('Button clicked');
}
}
}
</script>
ant-design-vue:
<template>
<a-button type="primary" @click="handleClick">Click me</a-button>
</template>
<script>
import { message } from 'ant-design-vue';
export default {
methods: {
handleClick() {
message.info('Button clicked');
}
}
}
</script>
Summary
Both HeyUI and ant-design-vue are Vue.js UI component libraries, but they differ in scope and approach. ant-design-vue offers a more comprehensive set of components and features, backed by a larger community. However, this comes at the cost of increased complexity and a larger bundle size. HeyUI, while smaller in scale, provides a simpler API and potentially faster integration for smaller projects. The choice between the two depends on project requirements, team expertise, and performance considerations.
Lightweight UI components for Vue.js based on Bulma
Pros of Buefy
- Larger community and more frequent updates
- Built on top of Bulma CSS framework, providing a familiar and lightweight base
- Extensive documentation with live examples and playground
Cons of Buefy
- Limited customization options compared to HeyUI
- Fewer components available out-of-the-box
- Steeper learning curve for those unfamiliar with Bulma
Code Comparison
HeyUI component usage:
<template>
<h-button color="primary" @click="handleClick">Click me</h-button>
</template>
Buefy component usage:
<template>
<b-button type="is-primary" @click="handleClick">Click me</b-button>
</template>
Both libraries offer similar component usage patterns, with slight differences in naming conventions and attribute names. HeyUI uses h-
prefix for components, while Buefy uses b-
prefix. The main difference lies in the underlying structure and styling approach, with HeyUI providing more customization options and Buefy leveraging Bulma's CSS classes.
Overall, Buefy is better suited for projects already using Bulma or requiring a lightweight solution, while HeyUI offers more flexibility and a wider range of components for complex applications.
BootstrapVue provides one of the most comprehensive implementations of Bootstrap v4 for Vue.js. With extensive and automated WAI-ARIA accessibility markup.
Pros of Bootstrap Vue
- Larger community and ecosystem, with more resources and third-party components
- Built on top of Bootstrap, providing a familiar and widely-used design system
- Extensive documentation and examples for easy implementation
Cons of Bootstrap Vue
- Heavier bundle size due to inclusion of full Bootstrap framework
- Less flexibility in customizing the overall design without overriding Bootstrap styles
- Steeper learning curve for developers unfamiliar with Bootstrap
Code Comparison
Bootstrap Vue component example:
<template>
<b-button variant="primary" @click="handleClick">
Click me
</b-button>
</template>
<script>
export default {
methods: {
handleClick() {
// Handle click event
}
}
}
</script>
HeyUI component example:
<template>
<h-button color="primary" @click="handleClick">
Click me
</h-button>
</template>
<script>
export default {
methods: {
handleClick() {
// Handle click event
}
}
}
</script>
Both libraries offer similar component-based approaches, with slight differences in naming conventions and attribute usage. Bootstrap Vue follows Bootstrap's naming conventions, while HeyUI uses its own custom component names and attributes.
Next Generation Vue UI Component Library
Pros of PrimeVue
- More comprehensive component library with 90+ UI components
- Better documentation and examples
- Stronger community support and regular updates
Cons of PrimeVue
- Larger bundle size due to extensive component library
- Steeper learning curve for beginners
Code Comparison
PrimeVue:
<template>
<Button label="Submit" icon="pi pi-check" />
</template>
<script>
import Button from 'primevue/button';
export default {
components: { Button }
}
</script>
HeyUI:
<template>
<Button color="primary" icon="h-icon-complete">Submit</Button>
</template>
<script>
import { Button } from 'heyui';
export default {
components: { Button }
}
</script>
Both libraries offer similar component usage, but PrimeVue tends to use more props for configuration, while HeyUI often relies on slots for content. PrimeVue's extensive component library and robust documentation make it a strong choice for large-scale projects, while HeyUI's simplicity and lighter weight may be preferable for smaller applications or those prioritizing performance.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
HeyUI
An UI components library.
Components
Documentation
visit heyui.top.
Install
npm install heyui@next --save
Start
Basic
<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/heyui@next"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/heyui@next/themes/index.css"></link>
Advanced
import { createApp } from 'vue';
import heyui from 'heyui';
require('heyui/themes/index.less');
app.use(heyui);
app.mount('#app');
Development
npm install
# build
npm run build
Admin Template
Browser Support
Modern browsers and Internet Explorer 11+.
LICENSE
Copyright (c) 2017-present, Lan
Top Related Projects
A Vue.js 2.0 UI Toolkit for Web
🐉 Vue Component Framework
🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜
Lightweight UI components for Vue.js based on Bulma
BootstrapVue provides one of the most comprehensive implementations of Bootstrap v4 for Vue.js. With extensive and automated WAI-ARIA accessibility markup.
Next Generation Vue UI Component Library
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot