X
    Categories: LaravelVue.js

laravel 5.3 vue js tutorial

laravel 5.3 vue js tutorial

Laravel 5.3 vue js. Vue js is one of the latest light weight framework. Here we can integrate vue js with laravel framework. Laravel 5.3 by default have vue library. Just we need to import from
node modules and have to use it. Lets see how it will works.

Prerequisite :

1. Php 5.6.4 and above
2. Laravel 5.3

Step 1 :

Install Laravel 5.3

Your folder structure will be

-app
-bootstrap
-config
-database
-public
-resources
-routes
-storage
-tests
-vendor
.env, ............

Step 2 :

Created Database and Connect to your application in your .env file

Step 3 :

Run initial migration to create migrations & users table.

php artisan migrate

Step 4 :

Install node modules for your applications


npm install

It will install all your required package files and store it under node_modules folder.

├── bootstrap-sass@3.3.7 
├─┬ gulp@3.9.1 
│ ├── archy@1.0.0 
│ ├─┬ chalk@1.1.3 
│ │ ├── ansi-styles@2.2.1 
│ │ ├── escape-string-regexp@1.0.5 
│ │ ├─┬ has-ansi@2.0.0 
│ │ │ └── ansi-regex@2.1.1 
│ │ ├── strip-ansi@3.0.1 
│ │ └── supports-color@2.0.0 
│ ├── deprecated@0.0.1 
│ ├─┬ gulp-util@3.0.8 
│ │ ├── array-differ@1.0.0 
│ │ ├── array-uniq@1.0.3 
│ │ ├── beeper@1.1.1 
│ │ ├── dateformat@2.0.0 
│ │ ├─┬ fancy-log@1.3.0 
│ │ │ └── time-stamp@1.0.1 
│ │ ├─┬ gulplog@1.0.0 
│ │ │ └── glogg@1.0.0 
│ │ ├─┬ has-gulplog@0.1.0 
│ │ │ └── sparkles@1.0.0 
│ │ ├── lodash._reescape@3.0.0 
│ │ ├── lodash._reevaluate@3.0.0 
│ │ ├── lodash._reinterpolate@3.0.0 
│ │ ├─┬ lodash.template@3.6.2 
│ │ │ ├── lodash._basecopy@3.0.1 
│ │ │ ├── lodash._basetostring@3.0.1 
│ │ │ ├── lodash._basevalues@3.0.0 
│ │ │ ├── lodash._isiterateecall@3.0.9 
│ │ │ ├─┬ lodash.escape@3.2.0 
│ │ │ │ └── lodash._root@3.0.1 
│ │ │ ├─┬ lodash.keys@3.1.2 
│ │ │ │ ├── lodash._getnative@3.9.1 
│ │ │ │ ├── lodash.isarguments@3.1.0 
│ │ │ │ └── lodash.isarray@3.0.4 
│ │ │ ├── lodash.restparam@3.6.1 
│ │ │ └── lodash.templatesettings@3.1.1 
│ │ ├─┬ multipipe@0.1.2 
│ │ │ └── duplexer2@0.0.2 
│ │ ├── object-assign@3.0.0 
│ │ ├── replace-ext@0.0.1 
│ │ ├─┬ through2@2.0.3 
│ │ │ ├─┬ readable-stream@2.2.2 
│ │ │ │ ├── buffer-shims@1.0.0 
│ │ │ │ ├── core-util-is@1.0.2 
│ │ │ │ ├── isarray@1.0.0 
│ │ │ │ ├── process-nextick-args@1.0.7 
│ │ │ │ └── util-deprecate@1.0.2 
│ │ │ └── xtend@4.0.1 
│ │ └─┬ vinyl@0.5.3 
│ │   └── clone-stats@0.0.1 
│ ├── interpret@1.0.1 
│ ├─┬ liftoff@2.3.0 
........................
│ └─┬ webpack-stream@3.2.0  (git://github.com/jeroennoten/webpack-stream.git#d78a3568e259f9cdbc64c60290639af6ef6d3baf)
│   ├── lodash.clone@4.5.0 
│   ├── lodash.some@4.6.0 
│   ├── through@2.3.8 
│   ├── vinyl@1.2.0 
│   └─┬ webpack@1.14.0 
│     ├── acorn@3.3.0 
│     ├── async@1.5.2 
│     ├─┬ enhanced-resolve@0.9.1 
│     │ ├── graceful-fs@4.1.11 
│     │ └── memory-fs@0.2.0 
│     ├── interpret@0.6.6 
│     ├─┬ node-libs-browser@0.7.0 
│     │ ├─┬ crypto-browserify@3.3.0 
│     │ │ ├── browserify-aes@0.4.0 
│     │ │ ├── pbkdf2-compat@2.0.1 
│     │ │ ├── ripemd160@0.2.0 
│     │ │ └── sha.js@2.2.6 
│     │ ├─┬ readable-stream@2.2.2 
│     │ │ └── isarray@1.0.0 
│     │ └─┬ timers-browserify@2.0.2 
│     │   └── setimmediate@1.0.5 
│     ├─┬ optimist@0.6.1 
│     │ ├── minimist@0.0.10 
│     │ └── wordwrap@0.0.2 
│     ├── supports-color@3.2.3 
│     ├── tapable@0.1.10 
│     ├─┬ watchpack@0.2.9 
│     │ └── async@0.9.2 
│     └── webpack-core@0.6.9 
├── lodash@4.17.4 
├── vue@2.1.10 
└── vue-resource@1.0.3

Step 5 :

Run Gulp in your terminal. It will gulp scss and js files to your directory.

Step 6 :

How to find out vue js installed?

Check you have following under resources/assets folder.

|-js
   |--Components
        |--Example.vue
   |--app.js
   |--bootstrap.js
|-sass
   |-- _variables.scss 
   |--app.scss

bootstarp.js

Here we can specify autoloading libraries

window.Vue = require('vue'); => Importing vue js to the Variable Vue 
require('vue-resource'); => Which is used to run $http functions like get, post, delete, patch, put etc.

Specify CSRF Header to avoid malware attach

Vue.http.interceptors.push((request, next) => {
    request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);

    next();
});

app.js

First we need to include bootstrap file then we need to write our code as per the request

require('./bootstrap');

Vue.component('sample', require('./components/Example.vue'));

//sample is a tag name where we want to load Example.vue file. for eg. <sample></sample> in your twig file

const app = new Vue({
    el: '#app'
});

el => Element => It will work only under which tag has id called app.
Eg: <div id=”app“> </div> Outside of it it will not work.

Example.vue

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">{{  template_title }}</div>

                    <div class="panel-body">
                        {{  template_message }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                template_title : 'Welcome to Laravel Vue',
                template_message : 'Hello!. Lets start to learn something new'
            };
        }
    }
</script>

Step 7:

Call it in your twig file.

Step 7.1 : Call app.js in your twig file. Eg : <script src=”{{ url(‘/’) }}/js/app.js”></script>
Step 7.2 : Write a tag to display your vue component

Eg :

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
           <div id="app">
                            <sample></sample>
            </div>
        </div>
    </div>
</div>
@endsection

At the place of <sample></sample> we will load our vue js data.

Thats all now run your app in your browser and you can see vue component data has loaded in your twig file.

Thanks for reading. If you like this article please don’t forget to share and comment.
Hope it will help someone!.

 

Marimuthu: