16 Great Vue JS Examples and Templates
Tags: vue, angular, uiweekly, webdev
Published: 2019-11-22 09:54:26

###**What is Vue JS?**
[Vue] (https://vuejs.org/) is a **progressive framework** for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects (https://vuejs.org/v2/guide/).

###**Why Vue JS?**
Vue outperforms [Angular] (https://angular.io/) and [React] (https://reactjs.org/) on pretty much all benchmarks, and it’s much simpler to pick up. It’s a “progressive” framework. At the lowest-level, you can simply link to it in your front-end like jQuery, and start using lots of cool features that solve most simple javascript/jQuery needs. Then, if you want to build that into a big single-page app, you have built-in support for component-style development and React-style rendering if you, PLUS officially maintained supporting frameworks (Vuex and Vue Router). Vue has “single-file component” files which allow you to build your HTML template, your JS code and your component-specific CSS in a single file that Vue and Webpack will process appropriately– this is actually very cool (https://forum.freecodecamp.com/t/vue-js-resources/48285/4).

###**Examples:**

![Vue JS Picture Input] (https://blog.creative-tim.com/wp-content/uploads/2017/05/ezgif.com-resize.gif)
####**Vue JS Picture Input**



[![BootstrapVue Argon Dashboard PRO](https://creativetimblog.com/blog/wp-content/uploads/2020/03/BootstrapVue-Argon-Dashboard-PRO.jpg)](https://www.creative-tim.com/product/bootstrap-vue-argon-dashboard-pro?ref=devto)
####**[BootstrapVue Argon Dashboard PRO by Creative Tim](https://www.creative-tim.com/product/bootstrap-vue-argon-dashboard-pro?ref=devto)** 

![Vue Light Bootstrap Dashboard by Creative Tim] (https://blog.creative-tim.com/wp-content/uploads/2017/05/opt_lbd_vue_thumbnail.jpg)
####**[Vue Light Bootstrap Dashboard] (https://www.creative-tim.com/product/vuetify-material-dashboard?ref=devto) by [Creative Tim] (https://www.creative-tim.com/?ref=devto)**

![Vuetify Material Dashboard by Creative Tim ] (https://blog.creative-tim.com/wp-content/uploads/2019/03/opt_md_vuetify_thumbnail.jpg)
####**[Vuetify Material Dashboard] (https://www.creative-tim.com/product/vuetify-material-dashboard?ref=devto) by [Creative Tim] (https://www.creative-tim.com/?ref=devto)**

![Onsen UI for Vue 2] (https://blog.creative-tim.com/blog/wp-content/uploads/2017/05/Captur%C4%83-de-ecran-din-2017.05.23-la-16.08.16-1024x592.png)
####**[Onsen UI for Vue 2](https://onsen.io/vue/)**

![Vuetify.js] (https://blog.creative-tim.com/blog/wp-content/uploads/2017/05/Captur%C4%83-de-ecran-din-2017.05.23-la-16.09.56-1024x591.png)
####**[Vuetify.js](https://vuetifyjs.com/en/)**

![Framework7] (https://blog.creative-tim.com/blog/wp-content/uploads/2017/05/Captur%C4%83-de-ecran-din-2017.05.23-la-16.11.28-1024x543.png)
####**[Framework7](https://framework7.io/)**

![VueJS Expo] (https://blog.creative-tim.com/blog/wp-content/uploads/2017/05/VueJS-1024x369.png)
####**[VueJS Expo] (http://vuejsexpo.com/?ref=devto) is a beautiful showcase of websites, applications, and experiments using the Vue.js framework**

![Quasar Framework] (https://creativetimblog.com/blog/wp-content/uploads/2017/05/Captur%C4%83-de-ecran-din-2017.05.23-la-16.12.29-1024x534.png)
####**[Quasar Framework](https://quasar.dev/)**

![Mint UI] (https://creativetimblog.com/blog/wp-content/uploads/2017/05/Captur%C4%83-de-ecran-din-2017.05.23-la-16.13.32-1024x589.png)
####**[Mint UI](http://mint-ui.github.io/#!/en)**

![Buefy] (https://creativetimblog.com/blog/wp-content/uploads/2017/05/Captur%C4%83-de-ecran-din-2017.05.23-la-16.15.27-1024x570.png)
####**[Buefy](https://buefy.org/)**

![Element] (https://creativetimblog.com/blog/wp-content/uploads/2017/05/Captur%C4%83-de-ecran-din-2017.05.23-la-16.16.43-1024x508.png)
####**[Element](https://element.eleme.io/1.4/#/en-US)**

![Vue JS Starter Template] (https://creativetimblog.com/blog/wp-content/uploads/2017/05/Captur%C4%83-de-ecran-din-2017.05.23-la-16.26.06-1024x510.png)
####**[Vue JS Starter Template](https://github.com/villeristi/vue.js-starter-template)**

![Vuelidate] (https://creativetimblog.com/blog/wp-content/uploads/2017/05/Captur%C4%83-de-ecran-din-2017.05.23-la-16.27.11-1024x511.png)
####**[Vuelidate](https://monterail.github.io/vuelidate/)**

![Vue.js 2.0 UI elements for mobile] (https://creativetimblog.com/blog/wp-content/uploads/2017/05/Captur%C4%83-de-ecran-din-2017.05.23-la-16.28.13-1024x508.png)
####**[Vue.js 2.0 UI elements for mobile](https://newdadafe.github.io/impression_vue/#/button)**

![Keen UI] (https://creativetimblog.com/blog/wp-content/uploads/2017/05/Captur%C4%83-de-ecran-din-2017.05.23-la-16.30.01-1024x508.png)
####**[Keen UI](https://josephuspaye.github.io/Keen-UI/#/ui-alert)**

![Bootstrap Vue] (https://creativetimblog.com/blog/wp-content/uploads/2017/05/Captur%C4%83-de-ecran-din-2017.05.23-la-16.30.55-1024x484.png)
####**[Bootstrap Vue](https://bootstrap-vue.github.io/)**

![Vue Argon Dashboard] (https://creativetimblog.com/blog/wp-content/uploads/2019/03/vue_thumb.jpg)
####**[Vue Argon Dashboard] (https://www.creative-tim.com/product/vue-argon-dashboard?ref=devto)**