Fetch Data Using Vue.js From MySQL Database In PHP

Getting Started on How to Fetch Data using Vue.js from MySQL Database in PHP

This tutorial will show you How to Fetch Data using Vue.js from MySQL Database in PHP. In this tutorial, I’ve used Bootstrap CDN, so you need an internet connection for it to work.

Creating a Database

1. Open phpMyAdmin.

2. Click databases, create a database and name it as crud.

3. After creating a database, click the SQL and paste the below codes. See image below for detailed instruction.

CREATE TABLE `members` (
  `firstname` VARCHAR(30) NOT NULL,
  `lastname` VARCHAR(30) NOT NULL,
PRIMARY KEY(`memid`)

database 6 45

Inserting Data into a Database

Next, We’re going to insert sample data into our database. These are the data that we are going to fetch in this tutorial.

1. Click database crud that we have created earlier.

2. Click SQL and paste the ff codes:

INSERT INTO `members` (`memid`, `firstname`, `lastname`) VALUES
(1, 'neovic', 'devierte'),
(2, 'gemalyn', 'cepe');


This is we’re we show the data that we are fetching in the form of table.

<!DOCTYPE html>
    <title>Vue.js CRUD Series using PHP/MySQLi</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container">
    <h1 class="page-header text-center">Vue.js CRUD OPERATION with PHP/MySQLi</h1>
    <div id="members">
        <div class="col-md-8 col-md-offset-2">
            <div class="row">
                <div class="col-md-12">
                    <h2>Member List
                    <button class="btn btn-primary pull-right"><span class="glyphicon glyphicon-plus"></span> Member</button>
            <table class="table table-bordered table-striped">
                    <tr v-for="member in members">
                        <td>{{ member.firstname }}</td>
                        <td>{{ member.lastname }}</td>
                            <button class="btn btn-success"><span class="glyphicon glyphicon-edit"></span> Edit</button> <button class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> Delete</button>
<script src="vue.js"></script>
<script src="axios.js"></script>
<script src="app.js"></script>


This is our PHP API code that contains data from our database.

$conn = new mysqli("localhost", "root", "", "crud");
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
$out = array('error' => false);
$crud = 'read';
    $crud = $_GET['crud'];
if($crud = 'read'){
    $sql = "select * from members";
    $query = $conn->query($sql);
    $members = array();
    while($row = $query->fetch_array()){
        array_push($members, $row);
    $out['members'] = $members;
header("Content-type: application/json");
echo json_encode($out);


Lastly, this is our Vue.js code that fetches data from our API.

var app = new Vue({
    el: '#members',
        members: []
    mounted: function(){
        getAllMembers: function(){
                    app.members = response.data.members;

That ends this tutorial. Stay for the continuation of this vue.js crud operation. Happy Coding!


How to Fetch Data using Vue.js from MySQL Database in PHP

How to Fetch Data using Vue.js from MySQL Database in PHP

Related Tutorials: Update and Delete Data using VueJs in PHP, Insert Data into MySQL Database using Vuejs in PHP, User Registration using VueJs in PHP MySQL

Download Here

Sharing is caring!

Facebook Comments

Leave a Reply