Sofia Kelly

Sofia Kelly

1558501765

Best Vue UI Component Libraries for 2019

A while ago I released part one of the complete list for best Vue.js UI component libraries and frameworks including Quasar, Vuetify, Vue Material, Keen UI, Element UI, Buefy, Bootstrap-vue, AT UI, Fish UI, Muse UI and Vux.

Thanks to many popular suggestions, here is the second part of the (unranked) list with more great Vue.js UI component libraries for building your Vue.js application with modularity though reusable components.

Tip: Use Bitto share and reuse your components between apps. It helps you discover and play with components, using them to build faster. Give it a try.

12. Iview

At nearly 14k stars iview is a UI kit for Vue.js 2.0 (here’s the Vue.js 1.0 branch) with dozens of UI components used by Alibaba, Lenovo TalkingData and other companies. The components’ design emphasizes contrast and repetition, and the library even provides its own designated CLI tool for scaffolding projects.

13. Uiv

This UI kit provides Bootstrap 3 components implemented with Vue 2. With minimal dependencies (only Vue and Bootstrap CC), lightweight components (all components together ~20kb gzipped), serverseide rendering supported and a verity of supported environments, it’s worth checking out.

14. Vuikit

One of my favorites, this library is a consistent and responsive Vue UI library, based on the UIkit framework with a beautiful minimalistic, clean design according to the YOOTheme design guidelines. Default styles are provided and you can also use custom themes while keeping components consistent.

15. Onsen UI Vue

Vue bindings for Onsen UI provide Vue 2 components and directives that wrap the core web Components and expose a Vue-like API to interact with them, emulating iOS and Android UI guidelines and designs for hybrid apps. Onsen UI Components for Vue are also designed to act reactively to received props.

16. Semantic UI Vue

Semantic UI Vue is the Vue integration for Semantic UI. Still under development, it provides an API similar to that of Semantic-UI with implementing Semantic-UI design with customizable themes (unless using the semantic-ui-css NPM module). Here is a JSFiddle example.

17. Mint UI

At over 10k stars this popular library provides a toolkit of JS and CSS components and mobile UI elements for Vue.js apps (including support for Vue 2.0). These components are lightweight with only 30kb gzip of space when importing all the components. Although widely popular, note that the project’s development has slowed down during the past months.

18. Framework 7 Vue

This project brings components-syntax, structured data and data bindings to Framework7 with Vue.js, providing almost all Framework7 elements and components with integration of Framework7 Router to render pages in a Vue completable way. The project is under active development and maintenance.

19. Cube UI

A mobile UI library for Vue.js with high unit test coverage, consistent design, extendable and flexible components. Make sure to note the styling, create-api and better-scroll the project exposes. With nearly 3k stars, the library is actively maintained and updated.

20. Vueblu

A flexible and UI components library for web application based on Vue (2.0) and Bulma. Although maintenance is temporarily suspended, this library contains dozens of components inspired by Bulma and Ant design.

21. Ant design for Vue.js

At 1.5k stars is a Vue.js component library UI implementation of the popular ANT design guidelines for enterprise-level user applications, which comes with a webpack-based debug build solution supporting ES6. NOTE that this project wasn’t maintained for the past 2 years, so use it with discretion.

22. n3 components

N3 components is Vue.js component UI kit for the web with over 40 components using ES6 and implementing a simple-looking design and customizable styling. Worth taking a look at for your next app.

Keep an eye on:

Vuestrap base components

Vuestrap Base Components extend Bootstrap 4. Built with vuestrap, plain Vue.js and webpack. NOTE this project isn’t actively maintained.

Vue WeUI

This adaptation of the We UI framework for Vue.js contains a small collection of somewhat brutally designed components . NOTE that this project wasn’t maintained for the past 2 years.

Vue-MDC

Replacing the popular Vue-mdl library (which is now under limited support), Vue-mdc provides and adaptation of material web components for Vue.js. This project is still under construction (which is halted for a few months now), but might be worth keeping an eye out for.

Building with components

While these libraries (and the ones in part 1 of the list) can be a great solution for quickly building the UI of your next Vue.js app, you can also find individual components in the official awesome-vue project.

In order to simplify the workflow around these components and avoid the overhead of using entire libraries or keeping separate repos for different components, you can also use Bit to turn components into building blocks which can be shared and synced directly between different applications.

#vue-js #javascript

What is GEEK

Buddha Community

Best Vue UI Component Libraries for 2019

Arun A

1624422389

Hi, that’s a great list. I would like you to review Syncfusion Vue UI components library. The Syncfusion Vue UI components library is the only suite that you will ever need to build an application since it contains over 65 high-performance, lightweight, modular, and responsive UI components in a single package.

Demo : https://ej2.syncfusion.com/home/vue.html

Documentation: https://ej2.syncfusion.com/vue/documentation/introduction/

Sofia Kelly

Sofia Kelly

1578061020

10 Best Vue Icon Component For Your Vue.js App

Icons are the vital element of the user interface of the product enabling successful and effective interaction with it. In this article, I will collect 10 Vue icon component to bring more interactivity, better UI design to your Vue application.

1. Animated SweetAlert Icons for Vue

A clean and simple Vue wrapper for SweetAlert’s fantastic status icons. This wrapper is intended for users who are interested in just the icons. For the standard SweetAlert modal with all of its bells and whistles, you should probably use Vue-SweetAlert 2

Animated SweetAlert Icons for Vue

Demo: https://vue-sweetalert-icons.netlify.com/

Download: https://github.com/JorgenVatle/vue-sweetalert-icons/archive/master.zip

2. vue-svg-transition

Create 2-state, SVG-powered animated icons.

vue-svg-transition

Demo: https://codesandbox.io/s/6v20q76xwr

Download: https://github.com/kai-oswald/vue-svg-transition/archive/master.zip

3. Vue-Awesome

Awesome SVG icon component for Vue.js, with built-in Font Awesome icons.

Vue-Awesome

Demo: https://justineo.github.io/vue-awesome/demo/

Download: https://github.com/Justineo/vue-awesome/archive/master.zip

4. vue-transitioning-result-icon

Transitioning Result Icon for Vue.js

A scalable result icon (SVG) that transitions the state change, that is the SVG shape change is transitioned as well as the color. Demonstration can be found here.

A transitioning (color and SVG) result icon (error or success) for Vue.

vue-transitioning-result-icon

Demo: https://transitioning-result-icon.dexmo-hq.com/

Download: https://github.com/dexmo007/vue-transitioning-result-icon/archive/master.zip

5. vue-zondicons

Easily add Zondicon icons to your vue web project.

vue-zondicons

Demo: http://www.zondicons.com/icons.html

Download: https://github.com/TerryMooreII/vue-zondicons/archive/master.zip

6. vicon

Vicon is an simple iconfont componenet for vue.

iconfont
iconfont is a Vector Icon Management & Communication Platform made by Alimama MUX.

vicon

Download: https://github.com/Lt0/vicon/archive/master.zip

7. vue-svgicon

A tool to create svg icon components. (vue 2.x)

vue-svgicon

Demo: https://mmf-fe.github.io/vue-svgicon/v3/

Download: https://github.com/MMF-FE/vue-svgicon/archive/master.zip

8. vue-material-design-icons

This library is a collection of Vue single-file components to render Material Design Icons, sourced from the MaterialDesign project. It also includes some CSS that helps make the scaling of the icons a little easier.

vue-material-design-icons

Demo: https://gitlab.com/robcresswell/vue-material-design-icons

Download: https://gitlab.com/robcresswell/vue-material-design-icons/tree/master

9. vue-ionicons

Vue Icon Set Components from Ionic Team

Design Icons, sourced from the Ionicons project.

vue-ionicons

Demo: https://mazipan.github.io/vue-ionicons/

Download: https://github.com/mazipan/vue-ionicons/archive/master.zip

10. vue-ico

Dead easy, Google Material Icons for Vue.

This package’s aim is to get icons into your Vue.js project as quick as possible, at the cost of all the bells and whistles.

vue-ico

Demo: https://material.io/resources/icons/?style=baseline

Download: https://github.com/paulcollett/vue-ico/archive/master.zip

I hope you like them!

#vue #vue-icon #icon-component #vue-js #vue-app

Henry Short

Henry Short

1578472348

7 Best Vue Highlight Component for Your Vue App

Vue highlight is often used to highlight text and syntax. Here are the 7 Vue highlight components I’ve collected.

1. vue-snippets

Vue3 Snippets, This extension adds Vue3 Code Snippets into Visual Studio Code.

vue-snippets

Download


2. vim-vue-plugin

Vim syntax and indent plugin for vue files

vim-vue-plugin

Download


3. vue-highlighter

Vue directive for highlight multiple istances of a word.

vue-highlighter

Download


4. vue-code-highlight

Beautiful code syntax highlighting as Vue.js component.

vue-code-highlight

Download


5. Vue Prism Editor

A dead simple code editor with syntax highlighting and line numbers. 7kb/gz

Features

  • Code Editing ^^
  • Syntax highlighting
  • Undo / Redo
  • Copy / Paste
  • The spaces/tabs of the previous line is preserved when a new line is added
  • Works on mobile (thanks to contenteditable)
  • Resize to parent width and height
  • Support for line numbers
  • Support for autosizing the editor
  • Autostyling the linenumbers(optional)

Vue Prism Editor

Demo

Download


6. vue-highlight-words

A simple port from react-highlight-words

Vue component to highlight words within a larger body of text.

vue-highlight-words

Demo

Download


7. vue-highlight-text

Vue component for highlight multiple istances of a word.

vue-highlight-text

Demo

Download


Thank for read!

#vue-highlight #vue #vue-highlight-component #highlight-vue

Luna  Mosciski

Luna Mosciski

1600583123

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework.

Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

This framework was created by Evan You and still it is maintained by his private team members. Vue is of course an open-source framework which is based on MVVM concept (Model-view view-Model) and used extensively in building sublime user-interfaces and also considered a prime choice for developing single-page heavy applications.

Released in February 2014, Vue JS has gained 64,828 stars on Github, making it very popular in recent times.

Evan used Angular JS on many operations while working for Google and integrated many features in Vue to cover the flaws of Angular.

“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight." - Evan You

#vuejs #vue #vue-with-laravel #vue-top-story #vue-3 #build-vue-frontend #vue-in-laravel #vue.js

Avav Smith

Avav Smith

1578125521

20 Best Vue Menu Component for Your App

Menus appear upon interaction with a button, action, or other control. They usually display a list of choices, with one choice per line, but can also show a rich content.

Here are the 20 Vue menu components I have collected very well.

1. vue-simple-drawer

A tiny Drawer component with bounced animation for Vue.

vue-simple-drawer

View Demo

Download Source

2. Vue Stripe Menu

Create a dropdown like on Stripe.

Vue Stripe Menu

View Demo

Download Demo

3. Vue Slider

A slide menu for vuejs.

Vue Slider

View Demo

Download Source

4. vue-dynamic-dropdown

A Highly Customizable, easy-to-use elegant dropdown component.

Feedback would be much appreciated, questions, suggestions, issues are more than welcome.

vue-dynamic-dropdown

View Demo

Download Source

5. vue-scrollactive

Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

This Vue 2 component makes it simple to highlight a menu item with an ‘active’ class as you scroll.

  • Highlights items with a class as you scroll
  • Scrolls to item’s section on click
  • Customizable easing for scrolling on click
  • Emits events on class changes

vue-scrollactive

View Demo

Download Source

6. vue-sidebar-menu

A Vue.js Sidebar Menu Component.

vue-sidebar-menu

View Demo

Download Source

7. vue-burger-menu

An off-canvas sidebar Vue component with a collection of effects and styles using CSS transitions and SVG path animations.

vue-burger-menu

View Demo

Download Source

8. vue-tree-nav

Navigation tree menu component with nice integration with vue-router.

vue-tree-nav

View Demo

Download Source

9. vue-tree

tree and multi-select component based on Vue.js 2.0 .

vue-tree

View Demo

Download Source

10. v-selectmenu

A simple, easier and highly customized menu solution.

v-selectmenu

View Demo

Download Source

11. vue-simple-context-menu

Simple context-menu component built for Vue. Works well with both left and right clicks. Nothing too fancy, just works and is simple to use.

vue-simple-context-menu

View demo

Download Source

12. vue-context

A simple yet flexible context menu for Vue. It is styled for the standard ul tag, but any menu template can be used. The only dependency this package has is Vue, so the majority of styling is up to you, and any package styles for the menu can easily be overridden.

The menu disappears when you expect by using the onblur event and it also disappears when clicked on.

vue-context

View Demo

Download Source

13. sl-vue-tree

Customizable draggable tree component for Vue.js

sl-vue-tree

View Demo

Download Source

14. VueJS Tree

A highly customizable and blazing fast VueJs tree viewer.

VueJS Tree

View Demo

Download Source

15. vue-easycm

A simple and easy to use Context Menu.

vue-easycm

View Demo

Download Source

16. tree-component

A reactjs, angular and vuejs tree component.

features

  • vuejs component
  • reactjs component
  • angular component
  • open and close
  • select and deselect
  • disabled
  • loading
  • highlighted
  • checkbox
  • custom icon or no icon
  • drag and drop
  • no dots
  • large and small
  • default and dark theme
  • contextmenu(vuejs and reactjs only)
  • node id

tree-component

View Demo

Download Source
custom node(vuejs and reactjs only)

17. vue-3d-menu

Vuejs 3d menu component.

The effect refers to the menu in the upper right corner of the 2013 miaov official website.

vue-3d-menu

View Demo

Download Source

18. vue-jstree

A tree plugin for vue2.

vue-jstree

View Demo

Download Source

19. vue-menu

Recent web applications are mainly for mobile environments. Therefore UIs premised on mouse operation such as window, context-menu, nested-menu and so on are no longer mainstream.

However the context-menu and nested-menu are still effective way to have operations on deeply structured data. This package is an implementation of {nested,context}-menu for PC environments as a Vue Component.

vue-menu

View Demo

Download Source

20. Vue simple menu

Vue component for fast create simple menu block

I will be glad to correct the inaccuracy of the my English

Simple menu component with a set of basic functionality, which is enought in 80% of cases

Vue simple menu

View Demo

Download Source

I hope you like them!

#vue-js #vue-menu #vue-menu-component #best-vue-menu

Jack Downson

Jack Downson

1578105604

8 Best Vue Tab Component for Your Application

The Vue Tab component is a simple user interface (tabs UI) for organizing related content and occupying a compact space. The tabs are aligned horizontally, and each tab is associated with its header. One of the tabs must always be selected and visible. The Tabs component has a rich set of features such as animation, orientation, templating, header styles, a close button for each tab, a scrollbar or pop-up when there are many tabs, JSON support, and more.

In this article, I have selected 8 tab component that I think are the best to bring to you.

1. vue-slide-tab

mobile tab component use vue2.

vue-slide-tab

View Demo

Download Source

2. vue-k-tabs

A simple tabs components.

vue-k-tabs

View Demo

Download Source

3. Vue-tabs

Simplified, customizable bootstrap based tabs Vue-tabs is a tab component which simplifies the usage of tabs and their customization

Vue-tabs

View Demo

Download Source

4. Vue Tinytabs

Vuejs wrapper for Tinytabs which is a super tiny javascript plugin for rendering tabs (< 2KB).

Vue Tinytabs

View Demo

Download Source

5. A slim tab component for Vue.js

A slim tab component for Vue.js (1.3 kB minified).

tabs

View Demo

Download Source

6. Vue-tabs-with-active-line

Simple Vue 2 component, that allows you to make tabs with moving bottom line.

Vue-tabs-with-active-line

View Demo

Download Source

7. A Vue component to easily render tabs

The package contains a Vue component to easily display some tabs.

A Vue component to easily render tabs

View Demo

Download Source

8. Ly-tab

A better mobile touch-swappable reusable component for Vue 2.0.

Ly-tab

View Demo

This is image title

Download Source

I hope you like them!

#vue-js #vue-tab #vue-tab-component #best-vue-tab