Laravel Vue CRUD.

1. Run the following command to install frontend dependencies:

npm install

Next, install vue-router and vue-axios. vue-axios will be used for calling Laravel API. Run the following command on your command prompt:

npm install vue-router vue-axios --save

After installing all dependencies run this command:

npm run watch

This npm run watch command will listen for file changes and will compile assets instantly. You can also run this command npm run dev. It won’t listen for file changes.

Create Api:

Laravel Api with postman.

2. Folder Structure

resources
 js
   components
       App.vue
       AllPosts.vue
       EditPost.vue
       AddPost.vue
app.js
   bootstrap.js
views
   welcome.blade.php

3. resources/js/app.js

Replace the contents of the app.js file with the following:

import Vue from 'vue'
import VueRouter from 'vue-router'
import VueAxios from 'vue-axios';
import axios from 'axios';
require('./bootstrap');
window.Vue = require('vue');
Vue.use(VueRouter)
Vue.use(VueAxios, axios);
import App from './components/App'
import AllPosts from './components/AllPosts.vue';
import AddPost from './components/AddPost.vue';
import EditPost from './components/EditPost.vue';
const router = new VueRouter({
  mode: 'history',
  routes: [
  {
    name: 'home',
    path: '/',
    component: AllPosts
  },
  {
    name: 'add',
    path: '/add',
    component: AddPost
  },
  {
    name: 'edit',\
    path: '/edit/:id',
    component: EditPost
  }
],
});
const app = new Vue({
  el: '#app',
  components: { App },
  router,
});

we have imported the VueRouter, Vue, and all the Vue component routes.

App.vue (resources/js/components/app.vue)

<template>
  <div class="container">
    <div class="text-center" style="margin: 20px 0px 20px 0px;">
    <span class="text-secondary">Laravel Blog Vue CRUD Tutorial</span>
  </div>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="collapse navbar-collapse">
    <div class="navbar-nav">
        <router-link to="/" class="nav-item nav-link">Home</router-link>
        <router-link to="/add" class="nav-item nav-link">Add Post</router-link>
    </div>
    </div>
</nav>
<br/>
  <router-view></router-view>
  </div>
</template>
<script>
export default {}
</script>

AllPosts.vue (resources/assets/js/components/AllPosts.vue)

<template>
<div>
    <h3 class="text-center">All Blog Posts</h3><br/>
<table class="table table-bordered">
   <thead>
      <tr>
        <th>ID</th>
        <th>Title</th>
        <th>Description</th>
        <th>Created At</th>
        <th>Updated At</th>
        <th>Actions</th>
      </tr>
   </thead>
   <tbody>
      <tr v-for="post in posts" :key="post.id">
        <td>{{ post.id }}</td>
        <td>{{ post.title }}</td>
        <td>{{ post.description }}</td>
        <td>{{ post.created_at }}</td>
        <td>{{ post.updated_at }}</td>
        <td>
           <div class="btn-group" role="group">
               <router-link :to="{name: 'edit', params: { id: post.id }}" class="btn btn-primary">Edit</router-link>
               <button class="btn btn-danger"  @click="deletePost(post.id)">Delete</button>
             </div>
        </td>
      </tr>
   </tbody>
</table>
</div>
</template>
<script>
   export default {
      data() {
          return {
             posts: []
          }
      },
   created() {
      this.axios
        .get('http://127.0.0.1:8000/api/get_blog')
        .then(response => {
          this.posts = response.data;
      });
   },
   methods: {
    deletePost(id) {
      this.axios
        .delete(`http://127.0.0.1:8000/api/delete_blog/${id}`)
        .then(response => {
            let i = this.posts.map(item => item.id).indexOf(id);
                    this.posts.splice(i, 1)
    });
}
}
}
</script>

AddPost.vue (resources/assets/js/components/AddPost.vue)

<template>
  <div>
    <h3 class="text-center">Add Post</h3>
    <div class="row">
       <div class="col-md-6">
       <form @submit.prevent="addPost">
          <div class="form-group">
             <label>Title</label>
             <input type="text" class="form-control" v-model="post.title">
          </div>
         <div class="form-group">
            <label>Description</label>
               <input type="text" class="form-control" v-model="post.description">
         </div>
     <button type="submit" class="btn btn-primary">Add Post</button>
     </form>
    </div>
   </div>
</div>
</template>
<script>
   export default {
      data() {
        return {
           post: {}
        }
      },
methods: {
      addPost() {
        this.axios
           .post('http://127.0.0.1:8000/api/store_blog', this.post)
           .then(response => (
              this.$router.push({name: 'home'})
            ))
           .catch(error => console.log(error))
           .finally(() => this.loading = false)
      }
    }
  }
</script>

EditPost.vue (resources/assets/js/components/EditPost.vue)

<template>
  <div>
    <h3 class="text-center">Edit Post</h3>
    <div class="row">
    <div class="col-md-6">
    <form @submit.prevent="updatePost">
       <div class="form-group">
          <label>Title</label>
          <input type="text" class="form-control" v-model="post.title
       </div>
       <div class="form-group">
          <label>Description</label>
          <input type="text" class="form-control" v-model="post.description">
       </div>
       <button type="submit" class="btn btn-primary">Update Post</button>
    </form>
   </div>
  </div>
</div>
</template>
<script>
export default {
    data() {
       return {
          post: {}
       }
    },
   created() {
        this.axios
.get(`http://127.0.0.1:8000/api/edit_blog/${this.$route.params.id}`).then((response) => {
    this.post = response.data;
});
},
    methods: {
       updatePost() {
       this.axios
.post(`http://127.0.0.1:8000/api/update_blog/${this.$route.params.id}`, this.post)
.then((response) => {
       this.$router.push({name: 'home'});
});
}
}
}
</script>

welcome.blade.php (resources/views/welcome.blade.php)

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<title>Laravel Vue JS CRUD Example</title>
<link href="{{ mix('css/app.css') }}" type="text/css" rel="stylesheet"/>
</head>
<body>
  <div id="app">
    <app></app>
  </div>
   <script src="{{ mix('js/app.js') }}" type="text/javascript">     </script>
</body>
</html>

5.Running the Application

npm run dev
npm run watch  //jotober change hobe compile hobe

Now run following command to update app.js file.

https://github.com/piyas33/vuejs_blog_curd.git