Introduce
Hi everyone, this is the first in a series of Laravel (6.x) and VueJS series I will share in the near future. In this topic, I will guide you to use VueJS (on the frontend) to handle errors returned by Laravel (on the backend) or in other words called Server Validation. 
. All of this series, I think, is the basic knowledge, but for those who are new to these two subjects and want to combine them together, it will be necessary. Let’s start with it,
Environment settings
Laravel Install
1 2 | composer create-project --prefer-dist laravel/laravel handle-error |
At the time of writing this article, I am working on Laravel 6.7. XD Create .env file and key
1 2 | cp .env.example .env && php artisan key:generate |
Remember to edit the database in the .env file. Next I have used the make:auth command of Laravel to create quick demo templates, note that Laravel 6.x onwards wants to create make:auth then you Create the way below
1 2 3 4 | composer require laravel/ui --dev php artisan migrate npm install && npm run watch |
Edit the code
Ok next, when you run the composer command above to install make: auth, laravel has already created for you the necessary components of Vue. The auth template is in those resources/views/auth . The part of demo validate in this tutorial will be the laravel’s registration page, you will notice it will be processed in Controller app/Controllers/Auth/RegisterController.php including the validate section Now I will correct it A bit of register.blade.php with app.js for Vue
app.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <span class="token function">require</span> <span class="token punctuation">(</span> <span class="token string">'./bootstrap'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> window <span class="token punctuation">.</span> Vue <span class="token operator">=</span> <span class="token function">require</span> <span class="token punctuation">(</span> <span class="token string">'vue'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> Vue <span class="token punctuation">.</span> <span class="token function">component</span> <span class="token punctuation">(</span> <span class="token string">'example-component'</span> <span class="token punctuation">,</span> <span class="token function">require</span> <span class="token punctuation">(</span> <span class="token string">'./components/ExampleComponent.vue'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token keyword">default</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">class</span> <span class="token class-name">Errors</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> errors <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">get</span> <span class="token punctuation">(</span> field <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> errors <span class="token punctuation">[</span> field <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> errors <span class="token punctuation">[</span> field <span class="token punctuation">]</span> <span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token function">record</span> <span class="token punctuation">(</span> errors <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> errors <span class="token operator">=</span> errors <span class="token punctuation">.</span> errors <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> el <span class="token punctuation">:</span> <span class="token string">'#app'</span> <span class="token punctuation">,</span> data <span class="token punctuation">:</span> <span class="token punctuation">{</span> fields <span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> errors <span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Errors</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> methods <span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token function">submit</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> axios <span class="token punctuation">.</span> <span class="token function">post</span> <span class="token punctuation">(</span> <span class="token string">'/register'</span> <span class="token punctuation">,</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> fields <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> response <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'Success'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span> error <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> error <span class="token punctuation">.</span> response <span class="token punctuation">.</span> status <span class="token operator">===</span> <span class="token number">422</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> errors <span class="token punctuation">.</span> <span class="token function">record</span> <span class="token punctuation">(</span> error <span class="token punctuation">.</span> response <span class="token punctuation">.</span> data <span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Above I have created an Errors class to facilitate the handling of complex errors later: d, you should create it into a separate file. Variable fields in data will store all fields on the form. and the errors variable is an instance of the Errors class, I used axios to call the api if it failed I would throw the returned data into this variable. On the register.blade.php file, I modified it as follows
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | @extends('layouts.app') @section('content') <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> container <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> row justify-content-center <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> col-md-8 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> card <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> card-header <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> {{ __('Register') }} <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> card-body <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> form</span> <span class="token attr-name">@submit.prevent</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> submit <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> @csrf <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> form-group row <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> label</span> <span class="token attr-name">for</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> name <span class="token punctuation">"</span></span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> col-md-4 col-form-label text-md-right <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> {{ __('Name') }} <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> label</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> col-md-6 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> input</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> text <span class="token punctuation">"</span></span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> form-control <span class="token punctuation">"</span></span> <span class="token attr-name">:class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> { <span class="token punctuation">'</span> is-invalid <span class="token punctuation">'</span> : errors.get( <span class="token punctuation">'</span> name <span class="token punctuation">'</span> ) } <span class="token punctuation">"</span></span> <span class="token attr-name">v-model</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> fields.name <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> span</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> invalid-feedback <span class="token punctuation">"</span></span> <span class="token attr-name">role</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> alert <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> strong</span> <span class="token punctuation">></span></span> @{{ errors.get('name') }} <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> strong</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> span</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> form-group row <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> label</span> <span class="token attr-name">for</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> email <span class="token punctuation">"</span></span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> col-md-4 col-form-label text-md-right <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> {{ __('E-Mail Address') }} <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> label</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> col-md-6 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> input</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> text <span class="token punctuation">"</span></span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> form-control <span class="token punctuation">"</span></span> <span class="token attr-name">:class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> { <span class="token punctuation">'</span> is-invalid <span class="token punctuation">'</span> : errors.get( <span class="token punctuation">'</span> email <span class="token punctuation">'</span> ) } <span class="token punctuation">"</span></span> <span class="token attr-name">v-model</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> fields.email <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> span</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> invalid-feedback <span class="token punctuation">"</span></span> <span class="token attr-name">role</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> alert <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> strong</span> <span class="token punctuation">></span></span> @{{ errors.get('email') }} <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> strong</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> span</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> form-group row <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> label</span> <span class="token attr-name">for</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> password <span class="token punctuation">"</span></span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> col-md-4 col-form-label text-md-right <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> {{ __('Password') }} <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> label</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> col-md-6 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> input</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> password <span class="token punctuation">"</span></span> <span class="token attr-name">v-model</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> fields.password <span class="token punctuation">"</span></span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> form-control <span class="token punctuation">"</span></span> <span class="token attr-name">:class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> { <span class="token punctuation">'</span> is-invalid <span class="token punctuation">'</span> : errors.get( <span class="token punctuation">'</span> password <span class="token punctuation">'</span> ) } <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> span</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> invalid-feedback <span class="token punctuation">"</span></span> <span class="token attr-name">role</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> alert <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> strong</span> <span class="token punctuation">></span></span> @{{ errors.get('password') }} <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> strong</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> span</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> form-group row <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> label</span> <span class="token attr-name">for</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> password-confirm <span class="token punctuation">"</span></span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> col-md-4 col-form-label text-md-right <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> {{ __('Confirm Password') }} <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> label</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> col-md-6 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> input</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> password <span class="token punctuation">"</span></span> <span class="token attr-name">v-model</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> fields.password_confirmation <span class="token punctuation">"</span></span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> form-control <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> form-group row mb-0 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> col-md-6 offset-md-4 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> button</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> submit <span class="token punctuation">"</span></span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> btn btn-primary <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> {{ __('Register') }} <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> button</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> form</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> @endsection |
Above I have a span tag whose class is invalid-feedback this card will contain an error message through the errors variable that calls the get function and passes the faulty params defined in the validate section of RegsiterController. write vuejs in .blade.php file, so I want to call VueJS variables so that I don’t get confused with Laravel’s add @ before the {{.
It is done Run now
1 2 | php artisan serve |
and access localhost: 8000 / register to enjoy the memory Here are my results:
You can refer to the source of the article here: https://github.com/hieudt/laravel-vuejs-handle-error Sincerely, see you in the following articles. Do not forget to leave 1 + up vote if you find it useful or have questions or contributions, please comment below