Elixir you ran using either gulp or gulp watch, with Mix you’ll run npm run dev or npm run watch .



Vue.js + Laravel 5.4.26


Vue.js – The Progressive JavaScript Framework

Getting started with Vue.js in Laravel:

  • I have simply followed Laravel documentation for setting up Vue.js
    • Here is the link –
  • When the build is ready, add app.js from the public folder to your blade.php page’s footer
  •  Issues:
    • If you are getting an error saying the components not found, it means your script is executing before the document is ready
    • Make sure you have added app.js script at the end of the page

Adding new component (similar to ‘example’ component given with Laravel):

  • Components:
    • Components are one of the most powerful features of Vue. They help you extend basic HTML elements to encapsulate reusable code. At a high level, components are custom elements that Vue’s compiler attaches behavior to. In some cases, they may also appear as a native HTML element extended with the special is attribute.
  • Create a new component in resources/components called Greeting.vue
  • Add your bootstrap element inside template element
  • Create an instance of ‘greeting’ component in app.js
    • Add the following to app.js
      Vue.component('greeting', require('./components/Greeting.vue'));
  • execute ‘npm run dev’ to rebuild app.js
  • Add <greeting></greeting> element to your blade.php page
  • You should be able to see the Greeting.vue template appear on the page
  • camelCase vs. kebab-case

    HTML attributes are case-insensitive, so when using non-string templates, camelCased prop names need to use their kebab-case (hyphen-delimited) equivalents:

    Vue.component(‘child’, {
    // camelCase in JavaScript
    props: [‘myMessage’],
    template: ‘<span>{{ myMessage }}</span>’
    <!– kebab-case in HTML –>
    <child my-message=“hello!”></child>

    Again, if you’re using string templates, then this limitation does not apply.

Adding a Vue message to the page: (Declarative rendering)

  • add the following to the app.js page
    new Vue({
     el: '#example',
     data: {
     message: 'Hello Vue.js!'
  • add the example element to your blade.php page
    • You won’t need ‘@’ to show the message if you are not using Vue.js in Laravel
  • Ref:



v-bind Shorthand

<!– full syntax –>
<a v-bind:href=“url”></a>
<!– shorthand –>
<a :href=“url”></a>

v-on Shorthand

<!– full syntax –>
<a v-on:click=“doSomething”></a>
<!– shorthand –>
<a @click=“doSomething”></a>

Vue HTTP Requests:

  • by defaults axios is installed with npm vue installation for Laravel
  • If axios is installed use the following code for get request
    axios.get(url).then(function(resp){ //response code;});
  • If axios not installed you should use
    • vue-resource has to be installed for getting $http to work

CSRF token fix with axios:

<meta name="csrf-token" value="{{ csrf_token() }}"> 
axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');


Laravel Retrieving data from database

Setup .env & config/database.php:

  1. Config/database.php file gets the database settings from .env file
    • eg:
      • ‘host’ => env(‘DB_HOST’, ‘localhost’)
  2. To set DB settings dynamically in .env file, use the code from the following link in your controller:

Setting controller method:

  1. Call database table or view from your controller method in the following way:
    • public function index(){
       $users = DB::table('users')->get();
       return view('users/index', ['users' => $users]);

Setting routes in Routes/web.php:

  1. Route instance has options to call controller methods directly:
    • Route::get('index','UsersController@index');


Viewing the user info:

  1. In users/index.blade.php :
    •  @foreach ($users as $user)
      <p>This user id is - {{ $user->user_id}}</p>

Laravel Views

Blade Templates:

Installing bootstrap:

  • Use composer require twbs/bootstrap
  • php artisan make:provider BootstrapServiceProvider  to create a service provider
  • Add the following publishing code to the boot method
    • public function boot()
       $this->publishes([__DIR__.'/../../vendor/twbs/bootstrap/dist' => public_path('vendor/bootstrap')], 'public');
  • register bootstrap service provider in config/app.php
    • App\Providers\BootstrapServiceProvider::class in the list of service providers
  • Run php artisan vendor:publish –tag=public –force to publish bootstrap to the public folder
  • To automate this add php artisan vendor:publish –tag=public –force to post-install-cmd and post-update-cmd section of composer.json
    • "scripts": {
       "post-install-cmd": [
       "php artisan optimize"
       "php artisan vendor:publish --tag=public --force"
       "post-update-cmd": [
       "php artisan optimize"
       "php artisan vendor:publish --tag=public --force"
  • HTML Helpers
    • Run composer require “laracollective/html”
    • Add Collective\Html\HtmlServiceProvider::class  to the list of providers in config/app.php
    • Add ‘Html’ => Collective\Html\HtmlFacade::class  in the list of aliases
    • Usage:
      • Creating bootstrap file link:
        • {{ Html::style(‘vendor/bootstrap/css/bootstrap.min.css’) }}

Laravel Middleware

Middleware provides convenient mechanism for HTTP requests entering your application. For example, Laravel includes a middleware that verifies the user of your application is authenticated. If the user is not authenticated, the middleware will redirect the user to the login screen. However, if the user is authenticated, the middleware will allow the request to proceed further into the application.

Registering Middleware

Global middleware:

  • app/Http/Kernel.php
    • $routeMiddleware


Laravel Routes

  • Basic routing
    • Route::get($uri, $callback);
      • Route::get(‘myapp’, function(){ return “hello world”;});
        • navigating to ‘/public/myapp’ returns ‘hello world’
      • Route::get(‘welcome’, function(){ return view(‘welcome’);});
        • navigating to ‘/public/welcome’ displays welcome ‘view’.
  • Available route methods:
    • Route::get($uri, $callback);
    • Route::post($uri, $callback);
    • Route::put($uri, $callback);
    • Route::delete($uri, $callback);
    • Route::patch($uri, $callback);
    • Route::options($uri, $callback);
    • for a route that needs to respond to multiple http verbs:
      • Route::match([‘get’,’post’], ‘myapp’, function(){  return “get/post”;  });
  • CSRF protection
    • forms pointing to put, post, delete routes should include CSRF token are else the request will be rejected
    • Adding CSRF protection:
      • <form> {{csrf_filed()}} </form>
  • Route parameters
    • Route::get(‘app/{id}’, function($id){ return “parameter in the url is”. $id; });
    • may define as many parameters as required:
      • Route::get(‘app/posts/{post}/comment/{comment}’, function($postid, $commentid){ return “parameters in the url are”. $postid. $commentid; });
  • Optional parameters
    • you can have optional parameters in the route:
      • Route::get(‘user/{id?}’, function($id = null){ return null});
  • Regular expression constraints
    • may constrain the format of the router parameters with ‘where’ method for a route instance
      • Route::get(‘user/{name}’, function ($name){ return $name;’})->where(‘name’, ‘[A-Za-z]+’);
      • Route::get(‘user/{id}’, function ($id){ return $id;’})->where(‘id’, ‘[0-9]+’);
      • Route::get(‘user/{id}/{name}’, function ($id, $name){ return $id.$name;’})->where([‘name’=> ‘[A-Za-z]+’, ‘id’=>'[0-9]+]’);
  • Global constraints
  • Name Routes
  • Route grouping – very useful
    • Middleware
    • Namespaces
    • Sub-Domain routing
    • Route pre-fixes
      • Route::group(['prefix' => 'users/admin'], function () {
         Route::get('login', function () {
         return 'This is users admin login';
         Route::get('index', function () {
         return 'This is users admin home';
  • Route model binding
    • Route::get('api/users/{user}', function (App\User $user) {
          return $user->email;
  • Explicit binding
  • Form method spoofing
  • Accessing the current route