Introduction to vue.js in Laravel

Hello everyone! Welcome to justlaravel.com. Here I am going to discuss on vue.js and how to use Vue js in your laravel applications. ‘Vue – The Progressive JavaScript Framework’ is used for  building user interfaces. As with laravel 5.3 onwards, it suggests us to use Vue as a default javascript framework. So here I will show you how to get started with Vue.

Here I made a simple application, where we can insert some data to database and show that data in the front end, I have made such applications before, some of them are ajax CRUD operations, bootgrid plugin, datatables plugin and some others, in all these applications I used the laravel way to call the controllers return data to view from them or in ajax case, I used some ajax calls. In this app I will tell you how to do the same things the VUE way.

Finished App Video:

Setup Vue

Laravel uses npm to install all the related dependencies like vue, bootstrap, etc. Run the following command,

Make sure you have the latest node and npm versions as some packages like laravel-mix require highest versions of node and npm.

So after installing all the necessary packages, you can see a directory named ‘node-modules’ in your applications root directory.

You can see a file named app.js in  /resources/assets/js/ directory of your app. I am going to write all the vue in this file itself.

Overview of the application:

Here it has one text field to enter some text and a button to add that to the database. In the same page it shows all the entries in database with an option to delete any item. All the front end operations here like showing the items, and updating the page when new item is added, deleting an item is all managed by vue.js

Intro to vue.js – justlaravel.com

Input Form:

Here the app has one input field and one button.

ADD

	{ this.items = response.data; }); }     axios.get(‘/vueitems’).then(response => {     this.items = response.data; Here the data which we got from controller is been set to the items array as you can see this.items = response.data; does it for us. Now in the view file resources/views/welcome.blade.php I used a vue loop to display this data.
@{{ item.id }}	@{{ item.name }}

@{{ item.name }}

createItem

A new item is created when we click on the add button, which is discussed above. As you see the @click.prevent="createItem()" calls the createitem method.

First I will get the input and check if it is empty and show some error if it is empty else add that item to database and also update the view.

Here I set some errors and success messages in the view and handle its visibility in the js.

for empty value,

Please enter some value!

Please enter some value!

 

for success message,

Deleted Successfully!

Deleted Successfully!

 

Here I used vue bind feature which allows me to add or remove a class. I need it here because I only want to show those messages when an error in user input or an item is deleted. i don’t want them to be displayed all the time. So I just write them and initially set their visibility to hidden. Later I will remove its class when needed. In such cases v-bind feature comes handy.

createItem: function(){ var input = this.newItem; if(input[‘name’] == ”){ this.hasError = false; this.hasDeleted = true; } else{ this.hasError = true; axios.post(‘/vueitems’,input) .then(response => { this.newItem = {‘name’:”}; this.getVueItems(); }); this.hasDeleted = true; } }

var input = this.newItem;             axios.post(‘/vueitems’,input)           this.newItem = {‘name’:”};

So initially check for empty value and if the value is empty, I will show the message, to show the error message, I need to remove the class : hidden on that message. So I set that hasError flag to false and at this point I need to hide all other messages as well so will also hide success message for delete too.

If a valid input is given I will store them in the database and update the view. For back end saving operation I use normal laravel way of saving.

Route::post ( ‘/vueitems’, ‘MainController@storeItem’ );

Route::post ( ‘/vueitems’, ‘MainController@storeItem’ );

The storeItem method,

public function storeItem(Request $request) { $data = new Data (); $data->name = $request->name; $data->save (); return $data; }

public function storeItem(Request $request) {     $data->name = $request->name;

The above snippet just gets the value from the form and saves it in the database. In the above vue method at the end I call getVueItems which will update the view with the latest change.

deleteItem

While displaying all the items, I also kept a button to delete the item, when clicked it calls deleteItem(item) vue method.

the vue method,

deleteItem: function(item){ axios.post(‘/vueitems/’+item.id).then((response) => { this.getVueItems(); this.hasError = true, this.hasDeleted = false });

deleteItem: function(item){     axios.post(‘/vueitems/’+item.id).then((response) => {

The controller method for delete,

public function deleteItem(Request $request) { $data = Data::find ( $request->id )->delete (); }

public function deleteItem(Request $request) {     $data = Data::find ( $request->id )->delete ();

The above function deletes the item with respect to the id sent from the Vue call. Again in the Vue method, I set the delete message to visible by turning off the flag hasDeleted

That’s it guys, we have done with our first Vue application in laravel.