vue-laravel-api-forms

A simple, Inertia-like form API using axios for Vue 3 and Laravel applications.

Features

• Inertia-like API: Similar API to Inertia.js forms with post(), put(), patch(), delete() methods
• Automatic Laravel validation error handling: Automatically populates form.errors from Laravel 422 responses
• Reactive data: Uses Vue 3's reactive system for form data and errors
• Processing state: Built-in loading states with form.processing
• Success states: Tracks successful submissions with form.wasSuccessful and form.recentlySuccessful

Installation

npm install vue-laravel-api-forms

Usage

Basic Example

import { useFormApi } from 'vue-laravel-api-forms';

export default {
  data() {
    return {
      form: useFormApi({
        name: '',
        email: '',
        password: ''
      })
    }
  },
  methods: {
    async submit() {
      await this.form.post('/api/users', {
        onSuccess: (data) => {
          console.log('User created:', data);
        }
      });
    }
  }
}

Template Usage

<template>
  <form @submit.prevent="submit">
    <input v-model="form.data.name" :class="{ 'error': form.errors.name }" />
    <span v-if="form.errors.name">{{ form.errors.name }}</span>
    
    <input v-model="form.data.email" :class="{ 'error': form.errors.email }" />
    <span v-if="form.errors.email">{{ form.errors.email }}</span>
    
    <button type="submit" :disabled="form.processing">
      {{ form.processing ? 'Submitting...' : 'Submit' }}
    </button>
  </form>
</template>

API Reference

Methods

• post(url, options) - POST request
• put(url, options) - PUT request
• patch(url, options) - PATCH request
• delete(url, options) - DELETE request
• get(url, options) - GET request
• reset(...fields) - Reset form data to original values
• clearErrors(...fields) - Clear validation errors
• setError(field, message) - Set a validation error
• hasErrors() - Check if form has any errors
• invalid(field) - Check if a specific field has an error
• validate(field) - Compatibility method (no-op)

Properties

• data - Reactive form data
• errors - Reactive validation errors object
• processing - Boolean indicating if request is in progress
• wasSuccessful - Boolean indicating if last request was successful
• recentlySuccessful - Boolean indicating recent success (clears after 2s)

Laravel Integration

FormApi automatically:

• Sets CSRF tokens from meta tags
• Handles Laravel validation errors (422 responses)
• Sets appropriate headers for Laravel APIs