solbeg / laravel-vue-validation
Extends Bootstrapper package. It automatically converts Laravel's request rules into Vee's rules.
Requires
- php: >=7.1.3
- illuminate/config: ~5
- illuminate/routing: ~5
- illuminate/support: ~5
- laravel/framework: 5.8.*
- laravelcollective/html: 5.8.*
- symfony/http-foundation: *
- twbs/bootstrap: ~3
This package is not auto-updated.
Last update: 2024-11-18 14:18:30 UTC
README
PACKAGE IS NOT MAINTAINED, USE AT YOUR OWN RISK
SolbegLaravelVueValidation
It is plugin for Laravel applications that use Vee-Validate plugin for front validation.
It automatically converts laravel's FormRequest rules to Vee rules. It also passes errors messages to Vee validator.
So you may write your rules once in laravel application, so the same will be used in front side too.
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:
$ php composer.phar require solbeg/laravel-vue-validation
After you have installed this vendor, add the following lines.
In your Laravel config file config/app.php
in the providers
array
add the service provider for this package.
// ... Solbeg\VueValidation\ServiceProvider::class, // ...
And add the facade of this package to the aliases
array.
// ... 'F' => Solbeg\VueValidation\Facades\Form::class, 'HTML' => Solbeg\VueValidation\Facades\Html::class, // ...
Publish assets for this vendor:
$ 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:
<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:
Vue.use(SolbegLaravelVueValidation);
Usage
In your blade template:
{{ 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) }}