Check Username Availability with Vue.js and PHP

Live username availability checking on the registration page is the common feature on most websites.

This will notify the user whether the username is already been taken or not before submitting it.

To do this require AJAX.

Send a request to check the username on the basis of response to perform the action.

In this tutorial, I show how you can check username availability using Vue.js and PHP while inputting.

Check Username Availability with Vue.js and PHP

Read more

Insert Update and Delete records from MySQL with Vue.js

Add, edit, and delete functionality mostly requires on every dynamic based web project.

With AJAX you can improve user experience and do these operations without page reload.

For this, I am using the Axios package.

In this tutorial, I show how you can select, insert, update, and delete records from MySQL database with Vue.js and PHP.

Insert Update and Delete records from MySQL with Vue.js

Read more

Fetch records from MySQL Database with Vue.js and PHP

Data selection is one of the basic requirements when creating a dynamic website.

Mainly data is fetched from the database on page refresh but without page refresh require to send AJAX request.

I am using the Axios package to send the AJAX request.

In this tutorial, I show how you can fetch records from MySQL database using Vue.js and PHP with the Axios package.

Fetch records from MySQL Database with Vue.js and PHP

Read more

Check uncheck All Checkboxes with Vue.js

Checkboxes are used on the page to allow the user to select multiple items from the list.

If the user wants to select all items then it needs to check all checkboxes one by one.

To make the selection process easier by adding a single checkbox and use it to check uncheck all checkboxes.

In this demonstration, I am using the model to check uncheck all checkboxes in Vue.js and read the checked values.

Check uncheck All Checkboxes with Vue.js

Read more

How to Toggle CSS Classes and Styles with Vue.js

Sometimes it is required to control the flow of the CSS classes and style properties of the element based on the expression at runtime.

In Vue.js there is a v-bind directive to update the HTML attribute.

In this tutorial, I am using this on class v-bind:class and style v-bind:style.

The v-bind:class adds and removes classes from the elements without affecting the value of the class attribute.

In the demonstration, I am using the v-bind directive to dynamically toggle CSS class and style property from the element on a click.

How to Toggle CSS Classes and Styles with Vue.js

Read more