Vue.js Plugins Galore

2016-12-06 Vue.js JavaScript Plugin

It's been a while now since I've dived into Vue.js. I've learned a lot and come a long way. Along with a lot of updates in vue-auth I've built a few other plugins to share.

The plugins and components I've released are the most common types of elements used in web apps I've dealt with so far.

I'll be updating the vue-elements with a bunch of goodies continuously so keep checking in.

Vue Auth

This has come a long way and now fully supports Vue 2.x while remaining fully backwards compatible with Vue 1.x.

It's also recently been updated to a driver centric model for the auth, routing and http components. This makes them hot swappable and don't rely specifically on the vue-router and vue-http. This also makes it much easer to contribute other authentication methods without bloating the file size.

Vue Elements - Modal

This is one of the most common element I use in web apps. Pretty much I will always have modals. So I wanted a nice global way to deal with them in Vue.js

This means you can easily create your own modals and access them through a global plugin like $'product-delete', {some: 'data'}). After re-working modals many times I find this solution has give me a nice mix between flexibility and out of the box workability.

Vue Elements - MsgBag

The message bag is another one of those common components that I also wish I had some nice global api for. I want to have some simple way to fire off global notices and warning from anywhere in the app.

For the message bag plugin the alert can be fully and easily customized to the specific app. Then through a global plugin messages can be easily be fired off using something like $msgbag.success('Yay, it works!').

Vue Elements - Form

At the current time of this writing the vue-validator plugin is still under work for a 3.x version to work with Vue 2.x. Working with the old validator has proved to be a nuisance since it doesn't allow sub components.

To avoid this problem we can simple pass the form into the validator itself as a slot and let it do the work for us on the submit. This allows us full customization of are forms. This also preps us for the future version that will allow us to use sub components.

Vue Elements - Upload

The upload is another component that has always been required in apps sooner or later. It may start out with a simple avatar photo upload for the profile. But then we will also likely need multi file uploads for products with dropzones, progress bars and error outputs.

This simple component aims to achieve all that while providing full flexibility to design the interface including, progress bars, errors and dropzones.

Related Posts