Vue.js Simple CRUD Tutorial Example From Scratch

VueJs Leave a comment

Today, We want to share with you Vue.js Simple CRUD Tutorial Example From Scratch.In this post we will show you Vuejs crud Tutorial With Example, hear for Vue.js CRUD Example Tutorial From Scratch we will give you demo and example for implement.In this post, we will learn about Basic CRUD Operations Using Vue.js Example with an example.

Vue.js Simple CRUD Tutorial Example From Scratch

There are the Following The simple About Vue.js Simple CRUD Tutorial Example From Scratch Full Information With Example and source code.

As I will cover this Post with live Working example to develop Laravel 5.6 + Vue.js: Simple CRUD Project, so the some major files and Directory structures for this example is following below.

Vue.js CRUD application Steps

  • Vue.js CRUD Example Tutorial
  • setup Vue.js
  • setup Axios, Vue Router, and vue-axios.
  • Make vuejs components.
  • vue js Routing of the components.
  • vue js the router view.
  • setup Bootstrap 4.
  • Includeing Bootstrap Navigation.
  • Includeing Routing Progress bar.
  • Make a form inside MemberCreate.vue component.
  • Configure NodeJS Express MongoDB backend.
  • Make Express routes.
  • Insert the Member from.
  • Listening the Members.
  • CRUD simple vuejs MemberEdit and Update.
  • CRUD simple vuejs Delete.
  • Download Github Code

setup #1:Vue.js

simple setup Vue.js using Vue CLI.

This is where I will make a simple HTML form and Then Create a new vuejs project using the following some command. source code for our web application. To make the forms simply all souce code copy and write it into your any text membereditor Like Notepad++, then save file it as setup Vue.js using Vue CLI..

// create a new project
vue membercreate vuecrud

setup #2: Axios, Vue Router, and vue-axios.

npm install vue-router axios vue-axios --save

Step #3: Make vuejs three components.

  • MemberCreate.vue
  • MemberEdit.vue
  • Index.vue

MemberCreate.vue

// MemberCreate.vue


    <div>
        MemberCreate Component
    </div>


export default {
    
}

MemberEdit.vue

// MemberEdit.vue


    <div>
        MemberEdit Component
    </div>


export default {
    
}

Index.vue

Vue.js Simple CRUD Tutorial Example From Scratch

// Index.vue


    <div>
        Index Component
    </div>


export default {
    
}

Step #4: Init vue Routing of the components.

src >> main.js

// main.js

import Vue from 'vue'
import VueRouter from 'vue-router';
import VueAxios from 'vue-axios';
import axios from 'axios';

import App from './App.vue';

Vue.use(VueRouter);
Vue.use(VueAxios, axios);

Vue.config.productionTip = false

const router = new VueRouter({ mode: 'history' });

new Vue({
  render: h => h(App),
  router
}).$mount('#memberapp')

main.js

// main.js

import Vue from 'vue'
import VueRouter from 'vue-router';
import VueAxios from 'vue-axios';
import axios from 'axios';

import App from './App.vue';
import MemberCreate from './components/MemberCreate.vue';
import MemberEdit from './components/MemberEdit.vue';
import Index from './components/Index.vue';

Vue.use(VueRouter);
Vue.use(VueAxios, axios);

Vue.config.productionTip = false;

const routes = [
  {
    name: 'MemberCreate',
    path: '/membercreate',
    component: MemberCreate
  },
  {
    name: 'MemberEdit',
    path: '/memberedit',
    component: MemberEdit
  },
  {
    name: 'Index',
    path: '/index',
    component: Index
  },
];

const router = new VueRouter({ mode: 'history', routes: routes });

new Vue({
  render: h => h(App),
  router
}).$mount('#memberapp')

Step #5: vuejs router view.

src >> App.vue 

// App.vue


  
      
  




export default {
}



    .fade-enter-active, .fade-leave-active {
      transition: opacity .5s
    }
    .fade-enter, .fade-leave-active {
      opacity: 0
    }

Step #6: npm via Install Bootstrap 4.

install Bootstrap 4

npm install bootstrap --save

// main.js

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

App.vue

Also Read This 👉   Simple VueJS date picker Component

Simple add the CSS classes on this files for Vue.js Simple CRUD Tutorial Example From Scratch.

  
      <div class="container">
                
      </div>

Step #7: Include vuejs Bootstrap Navigation.

App.vue

// App.vue


  <div id="memberapp" class="container">
    <nav class="navbar navbar-expand-sm bg-light">
      <ul class="navbar-nav">
        <li class="nav-member">
          Add Member
        </li>
        <li class="nav-member">
          All Members
        </li>
      </ul>
    </nav>
    
      <div class="gap">
                
      </div>
    
  </div>




export default {
}



    .fade-enter-active, .fade-leave-active {
      transition: opacity .5s
    }
    .fade-enter, .fade-leave-active {
      opacity: 0
    }
    .gap {
      margin-top: 50px;
    }

Step #8: Add vuejs Routing simple Progress bar.

install nprogress

npm install nprogress --save

Add vuejs nprogress custome CSS inside a main.js file.

// main.js

import '../node_modules/nprogress/nprogress.css';

main.js

// main.js

import Vue from 'vue'
import VueRouter from 'vue-router';
import VueAxios from 'vue-axios';
import axios from 'axios';
import NProgress from 'nprogress';

import App from './App.vue';
import MemberCreate from './components/MemberCreate.vue';
import MemberEdit from './components/MemberEdit.vue';
import Index from './components/Index.vue';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import '../node_modules/nprogress/nprogress.css';

Vue.use(VueRouter);
Vue.use(VueAxios, axios);

Vue.config.productionTip = false;

const routes = [
  {
    name: 'MemberCreate',
    path: '/membercreate',
    component: MemberCreate
  },
  {
    name: 'MemberEdit',
    path: '/memberedit',
    component: MemberEdit
  },
  {
    name: 'Index',
    path: '/index',
    component: Index
  },
];

const router = new VueRouter({ mode: 'history', routes: routes });

router.beforeResolve((to, from, next) => {
  if (to.name) {
      NProgress.start()
  }
  next()
});

router.afterEach(() => {
  NProgress.done()
});

new Vue({
  render: h => h(App),
  router
}).$mount('#memberapp')

Step #9: MAke a HTML form inside component.

MemberCreate.vue

// MemberCreate.vue


  <div class="container">
        <div class="card">
            <div class="card-header">
                <h3>Add Member</h3>
            </div>
            <div class="card-body">
                <form>
                    <div class="form-group">
                        <label>Member Name:</label>
                        
                    </div>
                    <div class="form-group">
                        <label>Member Age:</label>
                        
                    </div>
                    <div class="form-group">
                        
                    </div>
                </form>
            </div>
        </div>
    </div>



export default {
  components: {
      name: 'AddMember'
  }
}

Step #10: Settings NodeJS Express MongoDB backend.

install express.js framework

npm install --save express body-parser cors mongoose

install nodemon

npm install nodemon --save-dev

server.js

// server.js

const express = require('express'),
    path = require('path'),
    bodyParser = require('body-parser'),
    cors = require('cors'),
    mongoose = require('mongoose');

    const memberapp = express();
    var port = process.env.PORT || 4000;

    var server = memberapp.listen(function(){
        console.log('Listening on port ' + port);
    });

DB.js

// DB.js

module.exports = {
    DB: 'mongodb://localhost:27017/vuecrud'
};

server.js

// server.js

const express = require('express'),
    path = require('path'),
    bodyParser = require('body-parser'),
    cors = require('cors'),
    mongoose = require('mongoose'),
    config = require('./config/DB');

    mongoose.Promise = global.Promise;
    mongoose.connect(config.DB).then(
        () => {console.log('Database is connected') },
        err => { console.log('Can not connect to the database'+ err)}
    );

    const memberapp = express();
    memberapp.use(express.static('public'));
    memberapp.use(bodyParser.json());
    memberapp.use(cors());
    const port = process.env.PORT || 4000;

    const server = memberapp.listen(port, function(){
        console.log('Listening on port ' + port);
    });

Step #11: Make Express vuejs routes.

Member.js

// Member.js

var mongoose = require('mongoose');
var Schema = mongoose.Schema;

// Define collection and schema for Members
var Member = new Schema({
  name: {
    type: String
  },
  age: {
    type: Number
  }
},{
    collection: 'members'
});

module.exports = mongoose.model('Member', Member);

memberRoutes.js

// memberRoutes.js

var express = require('express');
var memberapp = express();
var memberRoutes = express.Router();

// Require Member model in our routes module
var Member = require('../models/Member');

// Defined store route
memberRoutes.route('/add').post(function (req, res) {
  var member = new Member(req.body);
      member.save()
    .then(member => {
    res.status(200).json({'member': 'Member added successfully'});
    })
    .catch(err => {
    res.status(400).send("unable to save to database");
    });
});

// Defined get data(index or listing) route
memberRoutes.route('/').get(function (req, res) {
  Member.find(function (err, members){
    if(err){
      console.log(err);
    }
    else {
      res.json(members);
    }
  });
});

// Defined memberedit route
memberRoutes.route('/memberedit/:id').get(function (req, res) {
  var id = req.params.id;
  Member.findById(id, function (err, member){
      res.json(member);
  });
});

//  Defined update route
memberRoutes.route('/update/:id').post(function (req, res) {
  Member.findById(req.params.id, function(err, member) {
    if (!member)
      return next(new Error('Could not load Document'));
    else {
      member.name = req.body.name;
      member.age = req.body.age;

      member.save().then(member => {
          res.json('Update complete');
      })
      .catch(err => {
            res.status(400).send("sorry, unable to update the database");
      });
    }
  });
});

memberRoutes.route('/delete/:id').get(function (req, res) {
  Member.findByIdAndRemove({_id: req.params.id}, function(err, member){
        if(err) res.json(err);
        else res.json('Successfully removed');
    });
});

module.exports = memberRoutes;

server.js

// server.js

const express = require('express'),
    path = require('path'),
    bodyParser = require('body-parser'),
    cors = require('cors'),
    mongoose = require('mongoose'),
    config = require('./config/DB');

    const memberRoutes = require('./expressRoutes/memberRoutes');

    mongoose.Promise = global.Promise;
    mongoose.connect(config.DB).then(
        () => {console.log('Good Luck, Your Database is connected') },
        err => { console.log('Can not connect to the database'+ err)}
    );

    const memberapp = express();
    memberapp.use(express.static('public'));
    memberapp.use(bodyParser.json());
    memberapp.use(cors());

    memberapp.use('/members', memberRoutes);
    
    const port = process.env.PORT || 4000;

    const server = memberapp.listen(port, function(){
        console.log('Listening on port ' + port);
    });

Step #12: Add the Member from Vue js.

MemberCreate.vue

// MemberCreate.vue


  <div class="container">
        <div class="card">
            <div class="card-header">
                <h3>Add Member</h3>
				<p>Vue.js Simple CRUD Tutorial Example From Scratch</p>
            </div>
            <div class="card-body">
                <form>
                    <div class="form-group">
                        <label>Member Name:</label>
                        
                    </div>
                    <div class="form-group">
                        <label>Member Age:</label>
                        
                    </div>
                    <div class="form-group">
                        
                    </div>
                </form>
            </div>
        </div>
    </div>



export default {
  components: {
      name: 'AddMember'
  },
  data() {
      return {
          member: {}
      }
  },
  methods: {
      addMember() {
           let uri = 'http://localhost:4000/members/add';
            this.axios.post(uri, this.member).then((response) => {
                console.log(response.data)
            });
        }
    }
}

Step #13: Listing the Members.

Index.vue

// Index.vue


    <div>
        <h1>Members - List Vue.js Simple CRUD Tutorial Example From Scratch</h1>

        <table class="table table-hover">
            <thead>
            <tr>
                <td>ID</td>
                <td>Member Name</td>
                <td>Member Age</td>
                <td>Actions</td>
            </tr>
            </thead>

            <tbody>
                <tr>
                    <td>{{ member._id }}</td>
                    <td>{{ member.name }}</td>
                    <td>{{ member.age }}</td>
                    <td>MemberEdit</td>
                    <td><button class="btn btn-danger">Delete</button></td>
                </tr>
            </tbody>
        </table>
    </div>




    export default {
        data(){
            return{
                members: []
            }
        },

        membercreated: function()
        {
            this.fetchMembers();
        },

        methods: {
            fetchMembers()
            {
              let uri = 'http://localhost:4000/members';
              this.axios.get(uri).then((response) => {
                  this.members = response.data;
              });
            }
        }
    }

Step #14: vuejs Form MemberEdit and Update CRUD.

MemberEdit.vue

Also Read This 👉   Simple Vue 2.0 Hello World Example

simple the following source code inside a operationsof the MemberEdit records MemberEdit.vue file.

// MemberEdit.vue


  <div class="container">
        <div class="card">
            <div class="card-header">
                <h3>Edit Member - Vue.js Simple CRUD Tutorial Example From Scratch</h3>
            </div>
            <div class="card-body">
                <form>
                    <div class="form-group">
                        <label>Member Name:</label>
                        
                    </div>
                    <div class="form-group">
                        <label>Member Age:</label>
                        
                    </div>
                    <div class="form-group">
                        
                    </div>
                </form>
            </div>
        </div>
    </div>


export default{
        data(){
            return{
                member:{}
            }
        },

        membercreated: function(){
            this.getMember();
        },

        methods: {
            getMember()
            {
              let uri = 'http://localhost:4000/members/memberedit/' + this.$route.params.id;
                this.axios.get(uri).then((response) => {
                    this.member = response.data;
                });
            },

            updateMember()
            {
              let uri = 'http://localhost:4000/members/update/' + this.$route.params.id;
                this.axios.post(uri, this.member).then((response) => {
                  this.$router.push({name: 'Index'});
                });
            }
        }
    }

Step #15: Vuejs Delete records.

Index.vue

// Index.vue


    <div>
        <h1>Members</h1>

        <table class="table table-hover">
            <thead>
            <tr>
                <td>ID</td>
                <td>Member Name</td>
                <td>Member Age</td>
                <td>Actions</td>
            </tr>
            </thead>

            <tbody>
                <tr>
                    <td>{{ member._id }}</td>
                    <td>{{ member.name }}</td>
                    <td>{{ member.age }}</td>
                    <td>MemberEdit</td>
                    <td><button class="btn btn-danger">Delete</button></td>
                </tr>
            </tbody>
        </table>
    </div>




    export default {
        data(){
            return{
                members: []
            }
        },

        membercreated: function()
        {
            this.fetchMembers();
        },

        methods: {
            fetchMembers()
            {
              let uri = 'http://localhost:4000/members';
              this.axios.get(uri).then((response) => {
                  this.members = response.data;
              });
            },
            deleteMember(id)
            {
              let uri = 'http://localhost:4000/members/delete/'+id;
              this.members.splice(id, 1);
              this.axios.get(uri);
            }
        }
    }

Lastly, I have All source code completed Vue.js Simple CRUD Tutorial Example From Scratch I have Included this all the source code in the my Github.Good Luck. Thanks!!

Vue.js CRUD Example Tutorial – Github
Angular 6 CRUD Operations Application Tutorials

Read :

Summary

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

I hope you get an idea about Vue.js Simple CRUD Tutorial Example From Scratch.
I would like to have feedback on my Pakainfo.com 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.

Related posts:

  1. Laravel 5.7 CRUD Tutorial With Example from scratch
  2. Laravel 5.8 CRUD Example Tutorial For Beginners From Scratch
  3. Laravel Vue JS CRUD Example Tutorial From Scratch