Form helpers for Laravel backed Vue.js projects.

Last update: Mar 9, 2022

vue-laravel-forms

Form helpers for Laravel backed Vue.js projects.

Disclaimer: This plugin is still in a BETA state

Installation

Install package via NPM

npm install vue-laravel-forms

Setup

Install plugin within project

import Vue from 'vue'
import { FormHelpers } from 'vue-laravel-forms'

Vue.use(FormHelpers);

or

window.Vue = require('vue');
require('vue-laravel-forms');

Alternatively, you may import the various components of this plugin separately.

import { Form, FormErrors, Http } from 'vue-laravel-forms'

window.AppForm = Form;
window.AppFormErrors = FormErrors;

_.extend(App, new Http()) // Vue.http config not needed
_.extend(App, new Http(Vue.http)) // Vue.http config needed

Usage

Creating a Form

Components installed via Vue

Vue.component('user-registration-form', {
    forms: {
        userRegistrationForm: {
            name: '',
            email: '',
            password: '',
            password_confirmation: ''
        }
    }
}

Components installed separately

Vue.component('user-registration-form', {
    data() {
        return { 
            userRegistrationForm: new AppForm({
                name: '',
                email: '',
                password: '',
                password_confirmation: '',
            });
        }
    }
});

Submitting a Form

Via a POST request (Components installed via Vue)

Vue.component('user-registration-form', {

    // Create your form using one of the techniques described above.
    
    methods: {
        registerUser() {
            this.$forms.post('api/users', this.userRegistrationForm)
                .then(response => console.log(response.data))
                .catch(errors => console.log(errors));
        }
    }

Via a POST request (Components installed separately)

Vue.component('user-registration-form', {

    // Create your form using one of the techniques described above.
    
    methods: {
        registerUser() {
            App.postForm('api/users', this.userRegistrationForm)
                .then(response => console.log(response.data))
                .catch(errors => console.log(errors));
        }
    }
Available methods for submitting a form

Components installed via Vue

  • vm.$form.delete(uri, form)
  • vm.$form.post(uri, form)
  • vm.$form.put(uri, form)
  • vm.$form.submit(method, uri, form)

Components installed Separately

  • App.deleteForm(uri, form)
  • App.postForm(uri, form)
  • App.putForm(uri, form)
  • App.sendForm(method, uri, form)

Template Helpers

Check a field for errors
Vue.component('user-registration-form', {

    methods: {
        checkFieldForError(field) {
            return this.userRegistrationForm.errors.has(field);
        }
    }

});
Use the fieldClass helper method
formInstance.fieldClass(field, defaultClass, errorClass)
// Truncated for brevity
">
<div :class="userRegistrationForm.fieldClass('email', 'form-group', 'has-error')">
    // Truncated for brevity
div>

Alternatively, pass callbacks for defaultClass and errorClass.

// Truncated for brevity
">
<div :class="userRegistrationForm.fieldClass('email', getFieldClass, getFieldErrorClass)">
    // Truncated for brevity
div>
Vue.component('user-registration-form', {

    methods: {
        getFieldClass(field) {
            return `form-group ${field}`;
        },
        
        getFieldErrorClass(field) {
            return `has-error ${field}-error`;
        }
    }

});
Get the error message for a field
{{ userRegistrationForm.errors.get('email') }}

">
<p class="help-block">
    {{ userRegistrationForm.errors.get('email') }}
p>

Contributing

If you have any questions, feedback or would like to make improvements, please open an issue or pull request.

Credits

License

MIT

GitHub

https://github.com/cklmercer/vue-laravel-forms
Comments
  • 1. Assigning initial values

    How should one assign default values from $parent dataset? I have something like this: forms: { accountForm: { firstName: this.$parent.user.firstName, lastName: this.$parent.user.lastName } },

    Reviewed by Kuuseorg at 2016-11-28 03:11
  • 2. Support older browsers ?

    Hi,

    Your plugin is using Promise, but you don't include any polyfill, so this plugin gave errors in IE. You might want to either add this to the readme or add a polyfill like babel-polyfill.

    Thanks!

    Reviewed by pelletiermaxime at 2016-10-11 21:54
  • 3. what if we want to use vuex?

    every time that I submit a form, a promise will be created. that's good but what if we use vue-laravel-forms with vuex? I don't know whether there will be any issue.

    Reviewed by mehrancodes at 2016-09-12 22:51
  • 4. Access to form.busy

    Hello @cklmercer

    I recently found this new project you have created here on github through a friend of mine.

    But as i look through the source code i cannot see any way to get access to form.busy like laravel spark allows us to.

    Can you impliment that?

    Reviewed by morloderex at 2016-08-16 21:09
  • 5. move from vue http to axios

    Vue no longer supports an HTTP library and suggests installing Axios instead. I think to keep up, we should move towards Axios being the default HTTP lib.

    Reviewed by matthewtrask at 2017-08-28 03:09
Laravel-weather-app - Laravel Weather App Built With Vue.js

Laravel Weather App Installation Clone the repo locally: git clone https://githu

Jan 14, 2022
Form object to use with Vue components for sending data to a Laravel application using axios.

Form Object Important: This project still active, feel free to clone, open issues or ask for help Form Object is a simple layer on top of axios, it un

Jan 13, 2022
My collection of headless utils and Vue.js components I use across projects.

headless-utils My collection of headless utils and Vue.js components I use across projects. Installation Install this GitHub Repo globally in your pro

Feb 9, 2022
Browsilo - A simple HTML file browser. One file. Made with Vue.js. Great for simple projects.
Browsilo - A simple HTML file browser. One file. Made with Vue.js. Great for simple projects.

Browsilo - A simple HTML file browser. One file. Made with Vue.js. Great for simple projects.

May 12, 2022
A collection of ideas and projects that contain from beginner to advance 🎯🚀

IdeaHub A collection of ideas and projects that contain from beginner to advance ?? ?? Categories ✨ Desktop Application Basic Intermediate Game Basic

Jun 22, 2022
🎲 A curated list of MLOps projects, tools and resources
🎲 A curated list of MLOps projects, tools and resources

Curated list of useful MLOps projects, tools and resources. Visit at https://mlops.toys! Contribute We'd love your help! If we missed a project, pleas

Jun 26, 2022
A great way to structure and bootstrap VueJS + Vuetify + API projects
A great way to structure and bootstrap VueJS + Vuetify + API projects

crud-vuetify-structured-template boilerplate ?? A full-featured Vuejs + Vuetify + Great structure project template + API Ready ?? It's using latest Vu

May 11, 2022
An app for managing your JavaScript projects
An app for managing your JavaScript projects

Projectile An app that will help you to manage your JavaScript projects with GUI Download Download Features Install or update your project dependencie

Jun 9, 2022
An accurate and verified list of production-ready projects made with Appwrite

An accurate and verified list of production-ready projects made with Appwrite

May 6, 2022
This is a version of Sigma Vue Project running inside a Laravel app with Inertia Js as a connection instead of Vue Router

About this project This is a version of Sigma Vue Project running inside a Laravel app with Inertia Js as a connection instead of Vue Router. Sigma Vu

May 14, 2022
Vuedo is a blog platform, built with Laravel and Vue.js.
Vuedo is a blog platform, built with Laravel and Vue.js.

Vuedo What is Vuedo? Vuedo is an open source project built with Laravel and Vue.js. It is a live example of how everything works together. Interested

Jun 15, 2022
:star2: PJ Blog is an open source blog built with Laravel and Vue.js.
:star2: PJ Blog is an open source blog built with Laravel and Vue.js.

?? PJ Blog is an open source blog built with Laravel and Vue.js. https://pigjian.com Special thanks to the generous sponsorship by: PJ Blog This is a

Jun 29, 2022
Laravel 8 and Vue family tree and genealogy data processing website.

Genealogia Open Source Family Tree Software Description Browser based Genealogy software for interacting and processing data efficiently. Easily creat

Jul 1, 2022
Updated content available! We learned a lot since we originally wrote this article. We now have this updated for Laravel 8, Vue, and NuxtJS 👉 https://srvrsi.de/book

This repository is no longer active, BUT you can still get access to the latest code We will leave this repostiory in read-only because a lot of Dan's

Apr 28, 2022
The First Open-Source Laravel Vue headless CMS (PWA dashboard + CRUD + API generator & more) for more productivity !
The First Open-Source Laravel Vue headless CMS (PWA dashboard + CRUD + API generator & more) for more productivity !

The First Open-Source Laravel Vue headless PWA CMS. PWA dashboard + CRUD + API generator & more. Try live demo Badaso is a open-source Laravel Vue hea

Jun 30, 2022
Laravel vue.js sport betting site

Laravel vue.js sport betting site

Dec 12, 2021
Simple Task List app made with Laravel, Vue and Tailwindcss
Simple Task List app made with Laravel, Vue and Tailwindcss

Simple Task List Laravel + Vue + TailwindCSS Requirements Composer Node NPM Installation This project use Laravel 5.6 as Framework, to run it see the

May 20, 2022
CMS web page for the creation of small e-commerce developed with Laravel and Vue+Vuex

Delivery Service Descrizione il servizio deve permettere con facilita' la possibilita' per un utente di trovare i ristoranti/negozi/bar che fanno atti

Nov 28, 2021
Allows to connect your `Laravel` Framework translation files with `Vue`.

Laravel Vue i18n laravel-vue-i18n is a Vue3 plugin that allows to connect your Laravel Framework JSON translation files with Vue. It uses the same log

Jun 30, 2022