Vue.js Frameworks & Libraries to use in your next project
Vue.js frameworks
Following the growth around the Vue community, a lot of developers have created and adapted projects to fit seamlessly with Vue based projects. New frameworks which utilize Vue components and libraries which help build big-scale projects and apps are constantly appearing. Take for example Nuxt.js, not a very new project but very popular and useful, which can help creating universal Vue.js applications and untie your hands at server-side rendering.
In this post, you will find a list of frameworks & libraries most commonly used, which can prove useful when building your next project if you either looking for a Vue.js based framework or just a template to help you get started.
The list is sorted by count of stars on GitHub, (except 2), only for presentation purposes, I don't believe that just because a project has more stars is "better" than other.
Onsen UI for Vue
Onsen is a library of UI components and utilities to help you create beautiful hybrid apps very quickly and it is open-source!
Beautifully designed Vue Components that feels native
Material Design for Bootstrap Vue version
Based on the latest Bootstrap 4 and Vue.js with no jQuery. It has a library of material UI elements, material icons, CSS animations, SASS files and many more.
element-ui - A Vue.js 2.0 UI Toolkit for Web
Element is a desktop component UI library, Vue 2.0 based, for developers, designers, and product managers. It is available in 3 languages and its guide along with the variety of components make it a solid choice for projects.
Mint UI is actually developed by the same organization that created Element UI. It provides a wide range of CSS and JS components for building mobile applications.
iview-ui - A Vue.js 2.0 UI Framework for web
iView is a high-quality UI toolkit based on Vue.js. Dozens of components, friendly API, documentation and demos, make it a great addition to your toolbox. There is also an iView admin management system template as well as a visual CLI for scaffolding iView projects.
Vux - Mobile UI Components
Vux is another mobile UI components library based on Vue & WeUI. English is still a WIP.
Nuxt.js
The Versatile Vue.js Framework is a minimal framework for creating Vue.js applications with server-side rendering, code-splitting, hot-reloading, static generation and more! Essentially it can help you build Server Rendered Vue.js applications easily by managing things like asynchronous data, middleware, and routing. The best choice for SSR because it presets all the configuration needed.
Vuetify - Material Component Framework
Plenty of UI toolkits about Vue out there but Vuetify stands out with the following features
- Vue-CLI Templates - Vuetify comes with 8 pre-made vue-cli templates.
- Custom Layouts - Layouts from the Material design spec
- Semantic Material Components - Specialized components
It receives continuous updates, not the only one of course, with often bug fixes and enhancements. Also, there is a list of curated resources for Vuetify.
Vue Admin Panel Framework
A smaller framework which serves as an admin panel, powered by Vue 2.0 and Bulma 0.3.
Features:
- Responsive and Flexible Box Layout
- Variety of Charts
- Rich Components
The third-party libraries used in this project are some of the most complete solutions out there. Also, Vue Admin can be launched as a desktop application using Electron.
muse-ui - Material Component library for Vue.js 2
Muse UI follows the Material design guidelines, has a lot of UI elements in the form of components and of course different themes. Muse UI uses less file and all colors are managed by a variable, and allowing a single file component to be loaded, making highly customizable.
vue-material - Material design for Vue.js
Vue Material is simple and built according to, guess what, the Google Material Design specs. As a result, is delivers beautiful UI elements and components. With support to all modern browsers rates well in compatibility, and provides a very decent API.
Build beautiful apps with Material Design and Vue.js
quasar-framework - Quasar Framework
The Quasar is a framework I have used and can say that its features are making it a favorite choice. You can build responsive desktop/mobile websites and native mobile apps using the same code base.
It has its own CLI and the Quasar Play App. This app made me glad because, "instead of using mobile emulators for testing your Quasar Apps, you can use this app instead. Develop apps directly on your phone/tablet (hot reload supported!), without even installing your app."
Currently only on Google Play.
Build responsive websites, hybrid mobile Apps (that look native on Android and iOS) and Electron apps using same code, with VueJs 2
bootstrap-vue - Implementation of bootstrap-4 grid and components for Vue.js
Bootstrap-Vue provides an implementation of Bootstrap V4 components and grid system available for Vue.js complete with extensive and automated WAI-ARIA accessibility markup.
Quickly integrate Bootstrap 4 Components with Vue.js.
Keen UI - A lightweight Vue.js UI library
Keen UI is a collection of UI components written in Vue.js. Provide a simple API, Keen UI is not meant to be a full implementation of the Material Design spec. It doesn't include a grid system, typography styles, etc. Instead, the focus is on interactive components that require Javascript.
Buefy - Lightweight UI components
Buefy provides components for Vue.js based on Bulma. If you are already working with Bulma, Buefy will untie your hands, allowing you to keep your current Bulma theme/variables.
- Supports both Material Design Icons and FontAwesome
- Very lightweight with none internal dependencies aside from Vue & Bulma
- About 60KB min+gzip (with Bulma included)
- Semantic code output
AT UI Kit - A Lightweight and Modular Front-End UI Library
Flat UI-Kit is especially for desktop applications, following npm + webpack + babel front-end development workflow.
- Support ES2015
- CSS Style independent, make consistent user interfaces
Has support for most modern browsers and IE 9+, Electron, and NW.js. Neat design guidelines, and component demos. make this library a good choice for new developers as well as seniors.
Many of the projects above rely on your support to continue providing quality products, show your appreciation for the work of the teams!
