Easily Handle Laravel-Vue Forms and Validation with Vform

vform is a tiny library for Vue 2 & Vue 3 to assist with forms and validation when utilizing Laravel as a back-end. It renders a form instance to wrap your data conveniently and send it to your Laravel application via an HTTP request using Axios.

Installation

npm install axios vform

Basic Usage

After the installation, you can utilize this package.

<template>
<form @submit.prevent="login" @keydown="form.onKeydown($event)">
  <input v-model="form.username" type="text" name="username" placeholder="Username">
  <div v-if="form.errors.has('username')" v-html="form.errors.get('username')" />

  <input v-model="form.password" type="password" name="password" placeholder="Password">
  <div v-if="form.errors.has('password')" v-html="form.errors.get('password')" />

  <button type="submit" :disabled="form.busy">
    Log In
  </button>
</form>
</template>

<script>
import Form from 'vform'

export default {
  data: () => ({
    form: new Form({
      username: '',
      password: ''
    })
  }),

  methods: {
    async login () {
      const response = await this.form.post('/api/login')
      // ...
    }
  }
}
</script>

Laravel Controller:

<?php

class LoginController extends Controller
{
    public function login(Request $request)
    {
        $this->validate($request, [
            'username' => 'required',
            'password' => 'required',
        ]);

        // ...
    }
}

Components

vform includes a few components for Bootstrap and Tailwind to display the validation errors your Laravel application.

import {
  Button,
  HasError,
  AlertError,
  AlertErrors,
  AlertSuccess
} from 'vform/src/components/bootstrap5'
// 'vform/src/components/bootstrap4'
// 'vform/src/components/tailwind'

Vue.component(Button.name, Button)
Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)
Vue.component(AlertErrors.name, AlertErrors)
Vue.component(AlertSuccess.name, AlertSuccess)

HasError

Display the validation error for a field.

<HasError :form="form" field="username" />

AlertError

Show a danger alert if there are any validation errors.

<AlertError :form="form" message="There were some problems with your input." />
<!-- or -->
<AlertError :form="form">There were some problems with your input.</AlertError>

AlertErrors

Show a danger alert with the list of validation errors for each field.

<AlertErrors :form="form" message="There were some problems with your input." />
<!-- or -->
<AlertErrors :form="form">There were some problems with your input.</AlertErrors>

AlertSuccess

Show a success alert on a successful request.

<AlertSuccess :form="form" message="Your changes have been saved!" />
<!-- or -->
<AlertSuccess :form="form">Your changes have been saved!</AlertSuccess>

Button

A submit button with a spinner.

<Button :form="form">Submit</Button>

Examples

File Upload

<template>
<form @submit.prevent="submit" @keydown="form.onKeydown($event)">
  <input v-model="form.name" type="text" name="name">
  <HasError :form="form" field="name" />

  <input type="file" name="file" @change="handleFile">
  <HasError :form="form" field="file" />

  <div v-if="form.progress">Progress: {{ form.progress.percentage }}%</div>

  <button type="submit">Submit</button>
</form>
</template>

<script>
import Form from 'vform'
import { HasError } from 'vform/src/components/bootstrap5'

export default {
  components: { HasError },

  data: () => ({
    form: Form.make({
      name: '',
      file: null
    })
  }),

  methods: {
    handleFile (event) {
      // We'll grab just the first file...
      // You can also do some client side validation here.
      const file = event.target.files[0]

      // Set the file object onto the form...
      this.form.file = file
    },

    async submit () {
      const response = await this.form.post('/upload', {
        // onUploadProgress: e => console.log(e) }
      })

      // ...
    }
  }
}
</script>

For more details, You can visit its documentation and source code on Github.