Vue.js Simple CRUD Tutorial Example From Scratch

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


    
        MemberCreate Component
    


export default {
    
}

MemberEdit.vue

// MemberEdit.vue


    
        MemberEdit Component
    


export default {
    
}

Index.vue

Vue.js Simple CRUD Tutorial Example From Scratch

// Index.vue


    
        Index Component
    


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

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

Step #7: Include vuejs Bootstrap Navigation.

App.vue

// App.vue


  
    
      
        
          Add Member
        
        
          All Members
        
      
    
    
      
                
      
    
  




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


  
        
            
                Add Member
            
            
                
                    
                        Member Name:
                        
                    
                    
                        Member Age:
                        
                    
                    
                        
                    
                
            
        
    



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


  
        
            
                Add Member
				Vue.js Simple CRUD Tutorial Example From Scratch
            
            
                
                    
                        Member Name:
                        
                    
                    
                        Member Age:
                        
                    
                    
                        
                    
                
            
        
    



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


    
        Members - List Vue.js Simple CRUD Tutorial Example From Scratch

        
            
            
                ID
                Member Name
                Member Age
                Actions
            
            

            
                
                    {{ member._id }}
                    {{ member.name }}
                    {{ member.age }}
                    MemberEdit
                    
                
            
        
    




    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;
              });
            }
        }
    }

ID	Member Name	Member Age	Actions
{{ member._id }}	{{ member.name }}	{{ member.age }}	MemberEdit

Step #14: vuejs Form MemberEdit and Update CRUD.

MemberEdit.vue

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

// MemberEdit.vue


  
        
            
                Edit Member - Vue.js Simple CRUD Tutorial Example From Scratch
            
            
                
                    
                        Member Name:
                        
                    
                    
                        Member Age:
                        
                    
                    
                        
                    
                
            
        
    


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


    
        Members

        
            
            
                ID
                Member Name
                Member Age
                Actions
            
            

            
                
                    {{ member._id }}
                    {{ member.name }}
                    {{ member.age }}
                    MemberEdit
                    
                
            
        
    




    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);
            }
        }
    }

ID	Member Name	Member Age	Actions
{{ member._id }}	{{ member.name }}	{{ member.age }}	MemberEdit

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.

Vue.js Simple CRUD Tutorial Example From Scratch

Vue.js Simple CRUD Tutorial Example From Scratch

Vue.js CRUD application Steps

setup #1:Vue.js

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

Step #3: Make vuejs three components.

Step #4: Init vue Routing of the components.

Step #5: vuejs router view.

Step #6: npm via Install Bootstrap 4.

Step #7: Include vuejs Bootstrap Navigation.

Step #8: Add vuejs Routing simple Progress bar.

Step #9: MAke a HTML form inside component.

Add Member

Step #10: Settings NodeJS Express MongoDB backend.

Step #11: Make Express vuejs routes.

Step #12: Add the Member from Vue js.

Add Member

Step #13: Listing the Members.

Members - List Vue.js Simple CRUD Tutorial Example From Scratch

Step #14: vuejs Form MemberEdit and Update CRUD.

Edit Member - Vue.js Simple CRUD Tutorial Example From Scratch

Step #15: Vuejs Delete records.

Members

Vue.js CRUD Example Tutorial – Github

Angular 6 CRUD Operations Application Tutorials

Read :

Summary

Leave a Comment Cancel reply

Write to Rank: Leveraging E.E.A.T for Content That Builds Trust

Unraveling the Power of Anchor Text: A Comprehensive Guide

8 Reasons Why Paper Courier Bags Are Preferred Over Plastic

Boost Your WordPress Presence: The Top 5 Social Media Feed Plugins for 2024

How to Recover From Writer’s Block in 2024

Generate Random IMEI Numbers in Java | Code Example