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
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 noneto 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
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
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
To Make the Vue Component available to Laravel main page, i change some codes in
welcome.blade.php file which is located in
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
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
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
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.
> 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