Laravel Vue.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

Step 2 :

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

Step 3 :

Run initial migration to create migrations & users table.

Step 4 :

Install node modules for your applications



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

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.

bootstarp.js

Here we can specify autoloading libraries

Specify CSRF Header to avoid malware attach

app.js

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

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

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 :

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.

laravel-5.3-vuejs-tutorial

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