vform

A simple way to handle Laravel back-end validation in Vue. Inspired from Laravel Spark.

Installation

npm i axios @unisharp/vform

Usage

See the included examples.

Bootstrap 4 Markup:

<template>
<div id="app">
  <form @submit.prevent="login" @keydown="form.onKeydown($event)">
    <div class="form-group">
      <label>Usernamelabel>
      <input v-model="form.username" type="text" name="username"
        class="form-control" :class="{ 'is-invalid': form.errors.has('username') }">
      <has-error :form="form" field="username">has-error>
    div>

    <div class="form-group">
      <label>Passwordlabel>
      <input v-model="form.password" type="password" name="password"
        class="form-control" :class="{ 'is-invalid': form.errors.has('password') }">
      <has-error :form="form" field="password">has-error>
    div>

    <button :disabled="form.busy" type="submit" class="btn btn-primary">Log Inbutton>
  form>
div>  
template>

<script>
import Vue from 'vue'
import { Form, HasError, AlertError } from 'vform'

Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)

new Vue({
  el: '#app',
  
  data () {
    return {
      // Create a new form instance
      form: new Form({
        username: '',
        password: '',
        remember: false
      })
    }
  },

  methods: {
    login () {
      // Submit the form via a POST request
      this.form.post('/login')
        .then(({ data }) => { console.log(data) })
    }
  }
})
script>