Convert Figma logo to code with AI

heyui logoheyui

🎉UI Toolkit for Web, Vue3.0

2,551
264
2,551
61

Top Related Projects

54,105

A Vue.js 2.0 UI Toolkit for Web

39,623

🐉 Vue Component Framework

🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜

9,547

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

  1. Basic Button Usage:
<template>
  <h-button @click="handleClick">Click me</h-button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$Message.info('Button clicked!');
    }
  }
}
</script>
  1. 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>
  1. 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

  1. Install HeyUI in your Vue.js project:

    npm install heyui
    
  2. 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);
    
  3. Now you can use HeyUI components in your Vue templates:

    <template>
      <div>
        <h-button color="primary">Hello HeyUI</h-button>
      </div>
    </template>
    

Competitor Comparisons

54,105

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.

39,623

🐉 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.

9,547

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 Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

HeyUI

npm (tag) npm bundle size npm NPM

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

HeyUI Admin Template

Browser Support

Modern browsers and Internet Explorer 11+.

LICENSE

MIT

Copyright (c) 2017-present, Lan

NPM DownloadsLast 30 Days