solbeg/laravel-vue-validation

Extends Bootstrapper package. It automatically converts Laravel's request rules into Vee's rules.

PACKAGE IS NOT MAINTAINED, USE AT YOUR OWN RISK, _(*1)

SolbegLaravelVueValidation

It is plugin for Laravel applications that use Vee-Validate plugin for front validation., _(*2)

It automatically converts laravel's FormRequest rules to Vee rules. It also passes errors messages to Vee validator., _(*3)

So you may write your rules once in laravel application, so the same will be used in front side too., _(*4)

Requirements

• PHP >= 5.6.4
• Laravel Framework 5.3.*
• Vue 1.x or 2.x
• Vee-Validate Vue plugin 1.x or 2.x

Installation

Install plugin using composer:, _(*5)

$ php composer.phar require solbeg/laravel-vue-validation

After you have installed this vendor, add the following lines., _(*6)

In your Laravel config file config/app.php in the providers array add the service provider for this package., _(*7)

    // ...
    Solbeg\VueValidation\ServiceProvider::class,
    // ...

And add the facade of this package to the aliases array., _(*8)

    // ...
    'F' => Solbeg\VueValidation\Facades\Form::class,
    'HTML' => Solbeg\VueValidation\Facades\Html::class,
    // ...

Publish assets for this vendor:, _(*9)

$  php artisan vendor:publish --force --provider="Solbeg\VueValidation\ServiceProvider" --tag=public

Connect JS file for this plugin in your layout. Note! This JS file must be included after Vue & Vee JS files:, _(*10)

<script src="{{ asset('vendor/solbeg/laravel-vue-validation/init-vue-validation.js') }}"></script>

Add the following JS code in your layout, so the Vue will use this plugin for validating:, _(*11)

Vue.use(SolbegLaravelVueValidation);

Usage

In your blade template:, _(*12)

{{ F::open([
    // ...
    'request' => \App\Http\Requests\YourFormRequestClass::class,
]) }}

    ...

    {!! F::controlGroup('phone',
        F::label('phone', 'Phone number'),
        F::text('phone', old('phone', $user->phone))
    ) !!}


    ...

{{ F::close([
    /**
     * Additional params for Vue object.
     * They will be passed in `new Vue({here})` constructor
     */
    'data' => [
        'prop1' => 'val1',
    ],
]) }}

{{-- OR without additional Vue options --}}
{{ F::close() }}
{{ F::close(true) }}

{{-- OR `false` if you initialize Vue object by himself --}}
{{ F::close(false) }}