vue-form-helper

Vue-Form-Helper

Heavily based upon the work by Jeffrey Way at Laracasts, and exists mainly to provide me a easy way to use what was taught in a lesson by him. If you are interested in learning more about the lesson this package is based upon you may view it in his Object-Oriented Forms lesson. I highly recommend anyone interested in Vue or Laravel subscribe to Laracasts, it's the best $9 a month you can spend.

Setup

This package uses the $http prototype for Vuejs which means that it can work with any Ajax library you desire. A basic setup using axios and Laravel would be handled doing the following:

/**
 * Vue is a modern JavaScript library for building interactive web interfaces
 * using reactive data binding and reusable components. Vue's API is clean
 * and simple, leaving you to focus on building your next great project.
 */
window.Vue = require('vue/dist/vue.js');

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common = {
    'X-CSRF-TOKEN': window.Laravel.csrfToken,
    'X-Requested-With': 'XMLHttpRequest'
};

Vue.prototype.$http = axios;

Example Usage

new Vue({
    el: '#app',

    data: {
        form: new Form({
            name: '',
            description: ''
        })
    },

    methods: {
        onSubmit() {
            this.form.post('/projects')
                .then(response => alert('Wahoo!'));
        }
    }
});