The best Vue.js Admin Dashboards 2019. Vuetify Material Dashboard (free & pro) Sing App Dashboard (free & pro) Vue Light Bootstrap Dashboard (free & pro) Shards Dashboard (lite & pro) Vue Paper Dashboard (free & pro)
A few years ago you only had a few options choosing an admin template: these were React, Angular and plain HTML5. Surely today these templates are still big on the market.
Last year, though, the Vue.js framework has become very popular, and because of this we now have lots of good admin templates. If you’re not familiar with Vue, here’s a brief history and description of this framework.
Vue was created by Evan You who used AngularJS in many projects working for Google. His idea was to create something like Angular, but lightweight. Vue was released in February 2014.
According to Vue website, it is a progressive framework used for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be adaptable.
Vue is a more lightweight framework in compare with Angular and React. It’s easy to get into and its community size is growing very fast.
Now to the next question: how to choose an admin dashboard template? What criteria to use? This compilation is not pretending to be the best. But since we’ve got 5 years of template writing behind, we are quite aware in this industry and have derived several evaluation criteria:
For this list, we tested free and premium templates. They usually include graph/chart libraries, dashboard page, alert boxes, navigation schemes, icons, charts and so on. We will find some best suitable UI (user interface) toolkit for your project.
Let’s do it!
Sing App Vue is a responsive admin template developed with Vue JS 2.5.2 and Bootstrap 4. There is an entire programming framework inside that boosts the speed, quality, and maintenance of your web application. You can use Sing App Vue to build any type of web applications like SAAS, E-Commerce platforms, asset dashboards, tracking software.
As for the design, despite the fact that it’s quite subjective a thing — we see light colors and neutral fonts. Nothing is overloaded. The template is well suited for building enterprise applications, where you don’t need to use all newfangled trends.
The code has minimum extra dependencies and is well maintainable. It is well-tested and documented.
You can install the dashboard via Yarn. Type in two commands: Run yarn install and Run yarn start and then type two npm commands: yarn run build and yarn run lint. If you need to build the app (without running a dev server), yarn run lint: to check the source code for syntax errors and potential issues.
Templates are well documented. There is a quick start guide with an explanation on how to set up the dashboard. Also, all structure and components are explained and described.
Sing admin dashboard has more than 30 pages and many more components. The dashboard provides analytics charts, emails, chat components. Markdown editor is also included. Extra pages include the invoice, calendar, login, error. Sing Vue admin dashboard is updated one-two times a month.
Prices vary from $59 for a single license to $449 for an extended one. Basic support is free forever and responds in 24 hours. Paid extended support packages start from $99 for 6 months. The company can offer integration and customization service.
The company has been developing and selling Templates for 5 years. Alongside the development of templates, Flatlogic has vast experience in developing custom commercial applications. It includes e-commerce websites and appointment management systems. Flatlogic has sold admin templates to companies like Samsung, Cisco, Doculife, Walmart.
In conclusion, this template is a good option to start a complex commercial application. The number of built-in components will ease the task of building an application from scratch. The price is quite fair, even for the extended license.
Vuestic is a completely free and open source admin template. It is recognized as one of the most powerful Vue.js templates available on the market. Epicmax (the company that stands behind Vuestic) uses this admin template to bootstrap numerous products developed for the company’s clients.
Admin template constantly evolves thanks to real-world usage feedback. Its source code is maintained by both Epicmax and Vue.js community. It has 18 pages, 36 elements, and 18 custom fonts and icons.
The dashboard has a discreet design with dark colors. It is written with no jQuery at all. The dashboard is responsive to all types of devices.
You can install the admin through cloning the repo and installing Vue CLI by typing npm commands. Vuestic has full well-written documentation with all components described.
The dashboard is completely open-source. The company is well-known in the Vue community: you can count on good support. The project updates one-two times a month.
At the moment, the company works on Vuestic 2.0. A major release will include a completely new look, application refactor and more independent custom UI components.
CoreUI is a Vue & Bootstrap 4 based admin template. The templates are positioned as open-source, but in reality, you will not get many features in free version.
The CoreUI template’s low-key design is well suited for enterprise applications. There are dark and light layout versions. The company behind this template also made some high-quality icons and flags.
The fastest way to start using CoreUI is to download a ready-to-use admin template.
There is documentation, however, not without a small flaw — the documentation is the same for all frameworks. Also, 404 errors are found on some documentation pages. All components are documented, but the structure is a bit blurry.
The website says the template has more than 50 components, such as Editors, Tables, Widgets, Charts. The project is updated several times a month. Quite a significant advantage is that users contribute to the open-source version of the template.
The company provides free support and promises to respond for 48 hours after the request. The website has a special support form to describe your issues.
Prices range from $69 to $699 depending on the license. There is also the option of buying all the frameworks for $999 and a monthly payment of $69 per seat.
The company was founded in 2013 and has more than 6 years of experience in building admin templates. OLX, DHL, and other companies are known to use CoreUI admin templates.
It is an overall good template. The price is quite high — a significant drawback. Plus, due to a big number of components, there is a feeling they might have poor quality.
This admin is completely free and open-source. It is very popular on Github with more than 25,000 stars.
The design is quite simple and functional. But, unfortunately, graphs and charts (which are crucial for admin templates) are somehow not well developed.
The template is open-source, with different contributors. It is an advantage and disadvantage at the same time. On the one hand, it is constantly evolving, on the other, the template gets updates every day, so no one is really responsible for the quality of the code.
To install the project you need to clone the project from Github and type 2 npm commands.
The project is well documented. All components and dependencies are described. Vue element admin has all the main screens that need to be done in an admin template. It has more than 15 unique pages. Tables, Error pages, Editors and even Excels are included.
Since the project is open-source, you will receive support only from the community after a relatively long period of time.
This admin template is open-source, so it’s completely free.
If you are looking for a free solution to try Vue with a developed community, this is a good one. But be prepared for some issues with support and code quality.
Arbano is an admin Dashboard Template based on Vue.js. It has both free and pro versions. Here we will look at the Pro Version.
The design is a little bit outdated, but it can be an advantage for the conservative majority. Arbano comes in two color shades — dark and light. Both versions are quite attractive due to beautiful typography and soft color combination.
The template can be installed by cloning the repo from Github and typing two npm commands.
Documentation is almost completely missing. There is a description of the installation process only. Components and their usage are not documented.
The template has 50 Customizable UI Components. There are 20+ different chart style. Admin template includes pages like Login, Register and Error. Different Social buttons and 8+ Awesome Progress Bars are also in the template.
The project is quite new, so we couldn’t find any GitHub link. Thus nothing to say about the updates frequency.
The prices are $29 for Personal version, $59 for the Developer and $199 for the Extended license. The support is free for one year.
This company is quite young and has been developing templates for almost one year, so there are certain risks to get no updates if it suddenly dies. We also haven’t found any information about present and past clients that use the templates.
The company and the template are quite raw, so there is a risk that you may be left without support. Another risk is that the quality of the code may not correspond to the described on the website since the company has little experience in building admin templates.
MDBootstrap Vue is an admin dashboard template containing different styles, data presentations and a number of components. It is built with the newest Bootstrap 4, VueJS and Material Design and delivered under MIT license — free for personal and commercial use.
The template is fully responsive. A design similar to that one of Google’s tools gives you a clear view of your data. The style is intuitive and informative. Each piece of information is connected with the corresponding category.
The code is clean and has a well-designed structure. This version doesn’t use jQuery at all. All Bootstrap script was rewritten in plain TypeScript.
You can download this template via direct download, then simply open the folder and work with the template.
The project has good and complete documentation with every component described.
This template is built with MDBootstrap, containing 400+ material UI elements, 600+ material icons, and 74 CSS animations.
The project is updated 1–2 times a month.
The company has a knowledge base of support questions. The community is also there to help users. The free support is also included in commercial licenses.
The price for commercial use of the product is €99.
This template has good quality and an experienced team behind. The quality of support is at a good level with a lot of answers from the community. Updates happen quite often.
But Material design is not a thing everyone would like. Plus, quite a high price and a small number of components in the free version are nothing but discouraging.
Shards is a free Vue admin dashboard template pack featuring a modern design system and lots of custom templates and components. All templates are fully responsive and able to adapt and reflow their layout to any viewport size.
The design looks beautiful and professional meeting the current trends. Graphs and tables are drawn in the spirit of new fashion startups. 1500+ supported icons from both FontAwesome and Material icon packs are included.
We did not find any documentation or info on the frequency of product updates — it’s unclear how to install and use the product.
There is a form in the profile page for opening a new support ticket. The team didn’t give any info on response speed.
Shards dashboards have one free and three Pro license options that cost $39, $59 and $399.
The company is relatively new to the admin template business. We assume that they don’t have experience with big clients.
Overall, the Shards Admin template looks quite good. The site and descriptions provide confidence. But there is no info on the support and the team, so it doesn’t give an impression of a successful business. Buying a product from such a company just doesn’t feel right.
Thus, the market for Vue templates is fairly new and not really saturated with competition. There are both strong players and beginners. If you need high-quality support, professionally written code, great design and documentation, better go to the companies with a good track record on the market.
There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.
Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.
hzqing-vue-timeline . Vue's timeline plugin .A Vue component to hzqing-vue-timeline A Vue time plugin