Bootstrap vue laravel form

A form component built with bootstrap-vue that works with Laravel validation.

Version: 1.0.0 Updated: 08/23/2019

By: incraigulous License: MIT

Downloads Last 30 Days: 48

Install

npm i bootstrap-vue-laravel-form
yarn add bootstrap-vue-laravel-form

CDNs

bundle.run: https://bundle.run/bootstrap-vue-laravel-form

jsDelivr: https://cdn.jsdelivr.net/npm/bootstrap-vue-laravel-form

unpkg: https://unpkg.com/bootstrap-vue-laravel-form

Vue Laravel Form

A form component built with bootstrap that works with Laravel validation.

Example use

    import VForm from 'bootstrap-vue-laravel-form'

    export default {
        components: {VForm},
        data()
        {
            return {
                input: {
                    name: null,
                    message: null
                }
            }
        },
        methods: {
            handleSubmitted()
            {
                alert('woot!')
            }
        }
    }
    <v-form
        :model="input"
        action="/submit/url"
        method="PUT"
        @submitted="handleSubmitted">
        <template scope="{ error, errorState }">
             <b-form-input 
                v-model="name"
                :state="errorState('name')"
                :error="error('name')"
            />
            <b-form-textarea 
                v-model="message"
                :state="errorState('message')"
                :error="error('message')"
            />
        </template>
    </v-form>

Props

Name Default Required Description
method POST The form submit method.
action required The URL to submit the form to
model {} The payload model. Will be used as the payload for submission.
success-message Success! The message to show the user on submission.
success-label Submit The submit button label
validate A custom validation function.

Events

Name Provides
invalid errors
error message
submitted response

Validation scopes

Name Description
error The error message for a field key
errorState 'invalid' if there is an error, null if there is no error
submitted response
Categories: Vue js
Tags: