Retrieve Data From MySQL Database using Vue.js PHP

Today, We want to share with you Retrieve Data From MySQL Database using Vue.js PHP.In this post we will show you How to Read Data From Database Using Vue and Axios, hear for Vue.js Fetch Data from MySQL Database using PHP we will give you demo and example for implement.In this post, we will learn about PHP with Vue.js & MySQL: REST API CRUD Tutorial with an example.

Retrieve Data From MySQL Database using Vue.js PHP

There are the Following The simple About Retrieve Data From MySQL Database using Vue.js PHP Full Information With Example and source code.

As I will cover this Post with live Working example to develop PHP with Vue.js & MySQL, so the how to use vue js in php for this example is following below.

Also Read This πŸ‘‰   Axios Post Request in vue.js

1. Database MySQL Table structure

CREATE TABLE `products` (
  `productname` varchar(100) NOT NULL,
  `name` varchar(100) NOT NULL,
  `email` varchar(100) NOT NULL



$host = "localhost"; 
$product = "root"; 
$password = ""; 
$dbname = "pakainfo"; 

$con = mysqli_connect($host, $product, $password,$dbname);
if (!$con) {
  die("Connection failed: " . mysqli_connect_error());

Step 1: Include vuejs library

At first we need to include vuejs Latest library file.

axios.min.js with vue.js
<script src="vue.js"></script>
<script src=""></script>

Step 2: JavaScript/vuejs Source Code:

This file All the Data contains the following JavaScript/vuejs Source codes.

var app = new Vue({
  el: '#myapp',
  data: {
    products: "",
    productid: 0
  methods: {
    allRecords: function(){

      .then(function (product_results) {
         app.products =;
      .catch(function (error) {
    recordByID: function(){
      if(this.productid > 0){
        axios.get('ajaxproductfile.php', {
           params: {
             productid: this.productid
        .then(function (product_results) {
           app.products =;
        .catch(function (error) {

Step 3: HTML Source Code:

This file contains the following HTML Markup Source codes.

Also Read This πŸ‘‰   Update database using ajax php - How to edit or update Data using PHP Ajax?

<div id='myapp'>
  <!-- Select All product records -->
  <input type='button' @click='allRecords()' value='Select All products'>

  <!-- Select product record by ID -->
  <input type='text' v-model='productid' placeholder="Enter Userid between 1 - 24">
  <input type='button' @click='recordByID()' value='Select product by ID'>

  <!-- List product records -->
  <table border='1' width='80%' style='border-collapse: collapse;'>
      <th>Product name</th>

    <tr v-for='product in products'>
      <td>{{ product.productname }}</td>
      <td>{{ }}</td>
      <td>{{ }}</td>

Step 4: PHP Source Code

Following PHP Source codes are used for Fetching Data from a Third-party API with Vue.js and Axios.

//db Connection
include "config.php";

$condition = "1";
   $condition = " id=".$_GET['userid'];
$productData = mysqli_query($con,"select * from users WHERE ".$condition);

$product_results = array();

while($row = mysqli_fetch_assoc($productData)){

   $product_results[] = $row;

echo json_encode($product_results);

Angular 6 CRUD Operations Application Tutorials

Read :

Also Read This πŸ‘‰   Vue.js Binding Fundamentals Using V-Bind Directive


You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Retrieve Data From MySQL Database using Vue.js PHP.
I would like to have feedback on my blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.