Category: Vue.js

Auto-populating records based on the selection make easier to control the flow of inputs and the user is restricted on the selection.

Data is updated on dependent dropdown according to parent dropdown selection.

To send AJAX request in Vue.js I am using Axios package.

In this tutorial, I create 3 dependent dropdowns for the country, state, city and send AJAX request to load records whenever dropdown value changes with Vue.js and PHP.

Dynamic dependent dropdown with Vue.js and PHP


The live character counter is very useful when need to validate the user from entering more input or display warning message.

Character count visible on the screen while inputting character in the input box.

This notifies the user that how many characters are left or the total number of characters is been entered.

In the tutorial, I show how you can count total and remaining characters using Vue.js.

Live Remaining and Character counter with Vue.js


Copying the selected text from the webpage or input HTML element is easy with the keyboard shortcut CTRL+C and context menu.

To make it little easier for the user you can add a button.

For copy text to clipboard in Vue.js you can use vue-clipboard2 package.

In this tutorial, I show how you can copy text from HTML element on button click to the clipboard.

Copy text to Clipboard using vue-clipboard2 - Vue.js


Live username availability checking on the registration page is the common feature in most of the website.

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

To do this require AJAX.

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

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

Check Username Availability with Vue.js and PHP

AJAX DataBase PHP 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 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

AJAX DataBase PHP Vue.js

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

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

I am using Axios package to send AJAX request.

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

Fetch records from MySQL Database with Vue.js and PHP

AJAX DataBase PHP 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 for 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


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 element 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

How To Vue.js