Introducing Vue Model

• Github: https://github.com/aarondfrancis/vue-model
• NPM: https://www.npmjs.com/package/vue-model

The Origin

If you haven't yet heard of Vue.js, get ready, because I predict that you're going to start seeing it everywhere pretty soon. Vue is a javascript framework that has really been embraced by the Laravel PHP community and it's the first javascript framework I've used that hasn't made me want to completely tear my hair out. It's truly a delight to use. Vue makes it very easy to add some smart javascript interactivity to your app without having to go fully into the SPA madness.

I've used Vue extensively on several client projects and on my accounting tutoring site acct229.com. On the accounting site I'm primarily using it on the video and forthcoming practice problem pages to let students mark them as complete or submit questions for me to answer. On client projects, I'm using Vue to ajax-ify most of the CRUD actions on models. On every project, I found myself performing a lot of RESTful action and wishing that Vue had a real model setup. For example, instead of doing

<a href="#" @click.prevent="complete(video.id)">Mark as Complete</a>

and having to have a dedicated complete action on my Vue instance, I wanted to be able to do this:

<a href="#" @click.prevent="video.complete()">Mark as Complete</a>

Since the complete action is really just a POST to the video/{id}/complete url, we've got ourselves a nice RESTful resource and shouldn't really have to be creating dedicated methods to perform these actions.

And when you're building a CRUD app (and we're all building CRUD apps), you really just want to be able to call model.save() on the frontend, have the model POST the data, show a loading indicator to the user, and then apply any result from the server (or show the errors) without any extra work on your part. Performing RESTful actions doesn't make your app special, you shouldn't have to worry about the plumbing.

What It Does

Vue-model is a Javascript plugin for Vue.js framework that gives you the ability to transform your plain data into rich models with built-in and customizable HTTP actions.

Vue-model manages several things for you automatically:

• Performing HTTP Actions
• Toggling busy indicators
• Updating the model with data returned from the server
• Catching server validation errors
• Editing and cancelling edits

Here are a few quick examples of what you can do with vue-model:

Edit a Model

<div v-if='!customer.$.editing'>
    @{{ customer.name }}
    <br>
    <a href='#' @click.prevent='customer.$.edit()'>Edit</a>
</div>
 
<div v-if="customer.$.editing">
    <input type='text' v-model='customer.name' :disabled='customer.$.inProgress'>
    <br>
    <a href='#' @click.prevent='customer.$.update()'>Save</a> or
    <a href='#' @click.prevent='customer.$.cancel()'>Cancel</a>
</div>

Models have an editing mode where your users make changes to the model data while keeping an old copy of the data in case they want to cancel their edit.

Update a Model

<input type='text' v-model='customer.name' :disabled='customer.$.inProgress'>
 
<button @click.prevent='customer.$.update()' :disabled='customer.$.updateInProgress'>
    <template v-if='customer.$.updateInProgress'>
        <i class='fa fa-spinner fa-spin'></i>
        Updating...
    </template>
    <template v-if='!customer.$.updateInProgress'>
        Update Customer
    </template>
</button>

Because vue-model gives you a range of "busy" indicators, you can very easily disable your buttons whenever an action is in progress.

Delete a Model

<div v-for='customer in customers'>
    @{{ customer.name }} (<a href='#' @click.prevent='customer.$.destroy()'>Delete</a>)
</div>

Learn More

You can find the full set of docs at https://github.com/aarondfrancis/vue-model or the npm package at https://www.npmjs.com/package/vue-model.

This is the first time I've done an npm package so there may be some things about it that need to be fixed, like the way the modules are exported. That's where you come in: please submit pull requests for anything that looks out of place. I'm certainly not a javascript expert like many of you are, so please lend a hand where you see fit.

Why did I open source something I'm not an expert in? Because maybe some of my problems are also some of your problems.

Because maybe some of my problems are also some of your problems.

— Jeremy Bowers (@jeremybowers) October 5, 2015