Laravel vue js crud example tutorial, you will learn how to implement vue js crud example application with Laravel framework.
As well as learn how to build crud APIs in laravel for Vue.Js spa crud example application in Laravel.
In this laravel vue js crud example, you will learn how to implement laravel vue js crud (create, read, update and delete) spa application with vue js router and laravel framework.
Laravel Vue JS CRUD Application (SPA) Example
Follow the following steps and implement spa crud with vue js in laravel. And as well as learn how to implement backend APIs for vue spa crud app:
- Download Laravel Apps
- Configure Database Details
- Install NPM Dependencies
- Create Migration, Model and Controller
- Define Routes In web.php
- Create Vue Js App
- Create Vue Js Components For Crud App
- Define Vue Js Routes For Crud App
- Include Vue Js Dependencies to app.js
- Run Development Server
Step 1: Download Laravel Apps
First of all, open your terminal and run the following command to download laravel fresh setup for creating laravel vue js crud example app:
composer create-project --prefer-dist laravel/laravel blog
Step 2: Configure Database Details
After successfully download laravel Application, Go to your project root directory and open .env file. Then set up database credential as follow:
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=here your database name here DB_USERNAME=here database username here DB_PASSWORD=here database password here
Step 3: Install NPM Dependencies
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.
Step 4: Create Migration, Model and Controller
Create Post model, migration, and controller. So run the following command for that:
php artisan make:model Post -mcr
Now open create_posts_table.php migration file from database>migrations and replace up() function with this:create_posts_table.php
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('title');
$table->text('description');
$table->timestamps();
});
}
Migrate the database using the following command:
php artisan migrate
Now, Open Post.php model from app folder and update this code into Post.php model:
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
protected $fillable = ['title', 'description'];
}
Next open PostController and define index, add, edit, delete methods in PostController file. So Go to app>Http>Controllers folder and open PostController.php file. Then update the following method into this:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Resources\PostCollection;
use App\Post;
class PostController extends Controller
{
// all posts
public function index()
{
$posts = Post::all()->toArray();
return array_reverse($posts);
}
// add post
public function add(Request $request)
{
$post = new Post([
'title' => $request->input('title'),
'description' => $request->input('description')
]);
$post->save();
return response()->json('The post successfully added');
}
// edit post
public function edit($id)
{
$post = Post::find($id);
return response()->json($post);
}
// update post
public function update($id, Request $request)
{
$post = Post::find($id);
$post->update($request->all());
return response()->json('The post successfully updated');
}
// delete post
public function delete($id)
{
$post = Post::find($id);
$post->delete();
return response()->json('The post successfully deleted');
}
}
Step 5: Define Routes in Web.php
Now define routes in the web.php and api.php routes file. So Go to Routes folder and Open web.php and Api.php file and update the following routes:
Routes/web.php
<?php
Route::get('{any}', function () {
return view('app');
})->where('any', '.*');
Routes/Api.php
<?php
use Illuminate\Http\Request;
Route::get('posts', 'PostController@index');
Route::group(['prefix' => 'post'], function () {
Route::post('add', 'PostController@add');
Route::get('edit/{id}', 'PostController@edit');
Route::post('update/{id}', 'PostController@update');
Route::delete('delete/{id}', 'PostController@delete');
});
Step 6: Create Vue Js App
In this step, navigate to resources/views and create one folder named layouts. Inside this folder create one blade view file named app.blade.php file.
Next, Navigate to resources/views/layouts and open app.blade.php file. Then update the following code into your app.blade.php file as follow:
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" value="{{ csrf_token() }}"/>
<title>Laravel Vue JS CRUD Example - Tutsmake</title>
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
<link href="{{ mix('css/app.css') }}" type="text/css" rel="stylesheet"/>
<style>
.bg-light {
background-color: #eae9e9 !important;
}
</style>
</head>
<body>
<div id="app">
</div>
<script src="{{ mix('js/app.js') }}" type="text/javascript"></script>
</body>
</html>
Step 7: Create Vue Js Components For Crud App
In this step, go to resources>js folder and create the following vue js component files:
- App.vue
- AllPost.vue
- AddPost.vue
- EditPost.vue
Note that, App.vue is the main Vue file. We will define router- view in the file. So all route pages will be shown in the App.vue file
Open App.vue file and update the following code into your file:
<template>
<div class="container">
<div class="text-center" style="margin: 20px 0px 20px 0px;">
<span class="text-secondary">Laravel Vue CRUD Example</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>
Next, Open AllPost.vue file and update the following code into your file:
<template>
<div>
<h3 class="text-center">All 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://localhost:8000/api/posts')
.then(response => {
this.posts = response.data;
});
},
methods: {
deletePost(id) {
this.axios
.delete(`http://localhost:8000/api/post/delete/${id}`)
.then(response => {
let i = this.posts.map(item => item.id).indexOf(id); // find index of your object
this.posts.splice(i, 1)
});
}
}
}
</script>
Next, Open AddPost.vue file and update the following code into your file:
<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://localhost:8000/api/post/add', this.post)
.then(response => (
this.$router.push({name: 'home'})
// console.log(response.data)
))
.catch(error => console.log(error))
.finally(() => this.loading = false)
}
}
}
</script>
Next, Open EditPost.vue file and update the following code into your file:
<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://localhost:8000/api/post/edit/${this.$route.params.id}`)
.then((response) => {
this.post = response.data;
// console.log(response.data);
});
},
methods: {
updatePost() {
this.axios
.post(`http://localhost:8000/api/post/update/${this.$route.params.id}`, this.post)
.then((response) => {
this.$router.push({name: 'home'});
});
}
}
}
</script>
Step 8: Define Vue Js Routes For Crud App
Now, you need to define vue routes. So go to resources>js folder, create a file named routes.js and update the following routes into your routes.js file:
import AllPosts from './components/AllPosts.vue';
import AddPost from './components/AddPost.vue';
import EditPost from './components/EditPost.vue';
export const routes = [
{
name: 'home',
path: '/',
component: AllPosts
},
{
name: 'add',
path: '/add',
component: AddPost
},
{
name: 'edit',
path: '/edit/:id',
component: EditPost
}
];
Step 9: Include Vue Js Dependencies to app.js
Now, you need to add all routes, vue axios and other dependencies etc. So Go to resources>js folder and open app.js. Then update the following code into your app.js file:
require('./bootstrap');
window.Vue = require('vue');
import App from './App.vue';
import VueRouter from 'vue-router';
import VueAxios from 'vue-axios';
import axios from 'axios';
import {routes} from './routes';
Vue.use(VueRouter);
Vue.use(VueAxios, axios);
const router = new VueRouter({
mode: 'history',
routes: routes
});
const app = new Vue({
el: '#app',
router: router,
render: h => h(App),
});
Step 10: Run Development Server
Now run following command to update app.js file:
npm run watch
Conclusion
In this laravel vue spa crud app, you have learned how to implement single web page application with vue in laravel.
Recommended Laravel Posts
- Laravel 7 Simple CRUD Example Tutorial
- Laravel 7 Ajax CRUD Example
- Laravel DataTables Ajax CRUD Tutorial Example
- Laravel Angular JS CRUD Example Tutorial
- Laravel 7 Crud with Image Upload From Scratch
- Laravel 7 Livewire Crud Example
nice article…