Laravel 5.3 to 5.8 with Vue JS (Part 1)

Laravel Framework is most popular php framework to build the website and web based management system. Vue JS is growing popularity day by day for frontend development purpose. So today, i discuss about brief of how we work with Vue JS with Laravel framework.

Prerequisite needed configure the development environment

1. PHP
2. Composer

3. Node JS

Create New Project with Laravel Framework

Composer command for create project with laravel 5.3

> composer create-project --prefer-dist laravel/laravel courier "5.3.*"

Composer command for create project with laravel 5.8

> composer create-project --prefer-dist laravel/laravel courier "5.8.*"

Vue JS is a built preset Laravel Framework for forntend development. So no need to set new preset for Vue Js in Laravel Fremwork. If you want to use other framework you need to set the preset for frontend framework. You can use php artisan preset <Frontend Framework Name> or none to command line.

Package file cofiguration is different for 5.3 to 5.8, In laravel 5.3 using laravel-elixir to integrate Vue JS with laravel framework. And the other hand laravel 5.8 using laravel-mix to integrated Vue JS with laravel.

There is Three files important for start working with Vue JS with Laravel Framework

1. bootstrap.js
2. App.js
3. welcome.blade.php

For development purpose, I change auto generated coding for those files, and auto generated code are provided by Laravel Framework.

Configure the Vue JS for laravel 5.3

The Example component

Laravel 5.3 will automatically generate the Example Vue Component in project.the file will be located at resources/assets/js/components/Example.vue

To change and configure to make the laravel component available to laravel

First, I remove all comments and unnessary code from resources/assets/js/bootstrap.js which is auto generated by laravel 5.3.

then also remove unnessary code and comments from the auto generated code in app.js file located in resoruces/assets/js/app.js

To Make the Vue Component available to Laravel main page, i change some codes in welcome.blade.php file which is located in resources/assets/view/welcome.blade.php .

Before you start Laravel development server , i open the new terminal tab and then using those command below in next sections

Packaging the Front end code (Vue JS)

Run that command blow to install node packages to laravel application. it will create node_modules folder in root of the project.

> npm install

To bundled and watch the changes of VUE JS component, we need run below command during development. Open the new Tab In terminal or new window in cmd, then type that command

> npm run dev

After running that command,you can see the below output in terminal

Then run PHP Laravel server to another tab in terminal or another window in cmd

> php artisan serve --port=8989

Output shows in browser, it confirm that vue component is perfectly added to the laravel.

Configure the Vue JS for Laravel 5.8

In laravel 5.8, there is no assets subfolder in resources folder. So Laravel auto generated Vue JS code will be available at resoruces/js folder.

In laravel 5.8 the example file will be named as ExampleComponent.vue located at resources/js/components/ExampleComponent.vue . For article purpose, I have renamed it to Example.vue .

The changes of folder structure of laravel, we can find the boostrap.js file in resoruces/js/bootstrap.js . I remove the unnecessary codes and comment from bootstrap.js file and modified some of the code, which is provide below

In Laravel 5.8, VUE JS is initialized at app.js file which is auto generated by laravel and located in resoruces/js/app.js location.

I modified code in welcome.blade.php file to make Vue JS component avilable to laravel , using the laravel-mix npm package to make connection between Vue JS and laravel.

Before Run the Laravel application we need to run some command to install the node js packages and javascript packages.

> npm install

After successfully installed the node packages, run the command for packaging and watch the changes of Vue JS component and make it available to laravel

> npm run watch

After run the command, we can see the ouput in terminal like this. If every thing is okay, you will see the successfull confirmation to terminal

Then Open the new Window or Tab in terminal, then run this command

> php artisan serve --port=2020

The ouput after command in terminal to browser provide below, it will confirm that Vue Component is perfectly integrated with laravel