Laravel 5.5 and VueJS tutorial for beginner : this tutorial will show you how to create advanced CRUD operation using laravel 5.5 and VUEJS 2. at the previews lessons, we have already discuss more about CRUD Apps using laravel, just read :
Full Source Code Laravel 5.5 & VueJS 2 CRUD Operations
Install vue-router by running below command for Vue js routing
Install vue-axios by running below command for Vue js api calls
Once the dependencies of have been installed using npm install, you can compile your SASS files to plain CSS using Laravel Mix. Run npm run dev command on the terminal to process the instructions written in your webpack.mix.js file. npm run dev command will process the instruction written in webpack.mix.js file and place your compiled CSS and js in public/css and public/js directory.
More Laravel 5.5 Video Tutorial
See you next Lessons ..
- Laravel 5.5 CRUD with resource Controller
- Laravel 5.3 & Angular JS CRUD Example
- Laravel 5.3 Ajax CRUD Example
Video Tutorial Laravel 5.5 & Vue JS CRUD Example
Full Source Code Laravel 5.5 & VueJS 2 CRUD Operations
Create new Laravel Project
composer create-project --prefer-dist laravel/laravel crudresourcecontrollerCreate new Migration
php artisan make:migration create_posts_tablePost Migration
Schema::create('posts', function (Blueprint $table) {
$table->increments('id');
$table->string('title');
$table->text('body');
$table->timestamps();
});Create new Model and new Controller
php artisan make:model Post
php artisan make:controller PostController --resourcePost Model
protected $table = 'posts';
protected $fillable = ['title','body'];PostController.php
<?php
namespace AppHttpControllers;
use IlluminateHttpRequest;
use AppPost;
class PostController extends Controller
{
/**
* Display a listing of the resource.
*
* @return IlluminateHttpResponse
*/
public function home(){
return view('vueApp');
}
public function index()
{
return Post::orderBy('id','DESC')->get();
}
/**
* Show the form for creating a new resource.
*
* @return IlluminateHttpResponse
*/
public function create()
{
//
}
/**
* Store a newly created resource in storage.
*
* @param IlluminateHttpRequest $request
* @return IlluminateHttpResponse
*/
public function store(Request $request)
{
$this->validate($request, [
'title' => 'required',
'body' => 'required',
]);
$create = Post::create($request->all());
return response()->json(['status' => 'success','msg'=>'post created successfully']);
}
/**
* Display the specified resource.
*
* @param int $id
* @return IlluminateHttpResponse
*/
public function show($id)
{
return Post::find($id);
}
/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return IlluminateHttpResponse
*/
public function edit($id)
{
return Post::find($id);
}
/**
* Update the specified resource in storage.
*
* @param IlluminateHttpRequest $request
* @param int $id
* @return IlluminateHttpResponse
*/
public function update(Request $request, $id)
{
$this->validate($request, [
'title' => 'required',
'body' => 'required',
]);
$post = Post::find($id);
if($post->count()){
$post->update($request->all());
return response()->json(['statur'=>'success','msg'=>'Post updated successfully']);
} else {
return response()->json(['statur'=>'error','msg'=>'error in updating post']);
}
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return IlluminateHttpResponse
*/
public function destroy($id)
{
$post = Post::find($id);
if($post->count()){
$post->delete();
return response()->json(['statur'=>'success','msg'=>'Post deleted successfully']);
} else {
return response()->json(['statur'=>'error','msg'=>'error in deleting post']);
}
}
}Route
Route::get('/', 'PostController@home');
Route::resource('/posts','PostController');
vueApp.blade.php
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
{{-- <link href="{{ asset('css/app.css') }}" rel="stylesheet"> --}}
</head>
<body>
<div class="container">
<h3>Vue.js CRUD With Laravel 5.5 application</h3>
</div>
<section id="app"></section>
<script>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
<script src="{{ asset('js/app.js') }}"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Installing Vue dependencies Run below command to install Vue js and bootstrap Frontend dependencies
npm install
Install vue-router by running below command for Vue js routing
npm install vue-router
Install vue-axios by running below command for Vue js api calls
npm install vue-axios
Once the dependencies of have been installed using npm install, you can compile your SASS files to plain CSS using Laravel Mix. Run npm run dev command on the terminal to process the instructions written in your webpack.mix.js file. npm run dev command will process the instruction written in webpack.mix.js file and place your compiled CSS and js in public/css and public/js directory.
npm run dev
npm run watchConfiguring Vue.js App and initializing Modules.
By default VueJS installations, we have app.js already in our project, next we will create more template page in resources\assets\js\components.- Addposts.vue
- App.vue
- Deletepost.vue
- Editpost.vue
- Listpost.vue
- Viewpost.vue
app.js
require('./bootstrap');
window.Vue = require('vue');
window.VueRouter=require('vue-router').default;
window.VueAxios=require('vue-axios').default;
window.Axios=require('axios').default;
let AppLayout= require('./components/App.vue');
// show the list post template
const Listposts=Vue.component('Listposts', require('./components/Listposts.vue'));
// add post template
const Addpost =Vue.component('Addpost', require('./components/Addpost.vue'));
// edite post template
const Editpost =Vue.component('Editpost', require('./components/Editpost.vue'));
// delete post template
const Deletepost =Vue.component('Deletepost', require('./components/Deletepost.vue'));
// view single post template
const Viewpost =Vue.component('Viewpost', require('./components/Viewpost.vue'));
// registering Modules
Vue.use(VueRouter,VueAxios, axios);
const routes = [
{
name: 'Listposts',
path: '/',
component: Listposts
},
{
name: 'Addpost',
path: '/add-post',
component: Addpost
},
{
name: 'Editpost',
path: '/edit/:id',
component: Editpost
},
{
name: 'Deletepost',
path: '/post-delete',
component: Deletepost
},
{
name: 'Viewpost',
path: '/view/:id',
component: Viewpost
}
];
const router = new VueRouter({ mode: 'history', routes: routes});
new Vue(
Vue.util.extend(
{ router },
AppLayout
)
).$mount('#app');
Addpost.vue
<template id="add-post">
<div>
<h3>Add new Post</h3>
<form v-on:submit.prevent = "createPost">
<div class="form-group">
<label for="add-title">Title</label>
<input id="add-title" v-model="post.title" class="form-control" required />
</div>
<div class="form-group">
<label for="add-body">Body</label>
<textarea class="form-control" rows="10" v-model="post.body"></textarea>
</div>
<button type="submit" class="btn btn-xs btn-primary">Create Post</button>
<router-link class="btn btn-xs btn-warning" v-bind:to="'/'">Cancel</router-link>
</form>
</div>
</template>
<script>
export default {
data: function () {
return {post: {title: '', body: ''}}
},
methods: {
createPost: function() {
let uri = 'http://localhost:8000/posts/';
Axios.post(uri, this.post).then((response) => {
this.$router.push({name: 'Listposts'})
})
}
}
}
</script>
App.vue
<template>
<div class="container">
<transition name="fade">
<router-view></router-view>
</transition>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
Deletepost.vue
<template id="post-delete">
<div>
<h3>Delete post {{ post.title }}</h3>
<form v-on:submit.prevent = "deletePost">
<p>The action cannot be undone</p>
<button class="btn btn-xs btn-danger" type="submit" name="button">Delete</button>
<router-link class="btn btn-xs btn-primary" v-bind:to="'/'">Back</router-link>
</form>
</div>
</template>
<script>
export default {
data: function () {
return {post: {body: '', title: ''}}
},
created: function(){
let uri = 'http://localhost:8000/posts/'+this.$route.params.id+'/edit';
Axios.get(uri).then((response) => {
this.post = response.data;
});
},
methods: {
deletePost: function() {
let uri = 'http://localhost:8000/posts/'+this.$route.params.id;
Axios.delete(uri, this.post).then((response) => {
this.$router.push({name: 'Listposts'})
})
}
}
}
</script>
Editpost.vue
<template id="post-edit">
<div>
<h3>Add new Post</h3>
<form v-on:submit.prevent = "updatePost">
<div class="form-group">
<label for="edit-title">Title</label>
<input id="edit-title" v-model="post.title" class="form-control" required />
</div>
<div class="form-group">
<label for="edit-body">Body</label>
<textarea class="form-control" rows="10" v-model="post.body"></textarea>
</div>
<button type="submit" class="btn btn-xs btn-primary">Create Post</button>
<router-link class="btn btn-xs btn-warning" v-bind:to="'/'">Cancel</router-link>
</form>
</div>
</template>
<script>
export default{
data: function () {
return {post: {title: '', body: ''}}
},
created: function(){
let uri = 'http://localhost:8000/posts/'+this.$route.params.id+'/edit';
Axios.get(uri).then((response) => {
this.post = response.data;
});
},
methods: {
updatePost: function() {
let uri = 'http://localhost:8000/posts/'+this.$route.params.id;
Axios.patch(uri, this.post).then((response) => {
this.$router.push({name: 'Listposts'})
})
}
}
}
</script>
Listpost.vue
<template id="post-list">
<div class="row">
<div class="pull-right">
<router-link class="btn btn-xs btn-primary" v-bind:to="{path: '/add-post'}">
<span class="glyphicon glyphicon-plus"></span>
Add new Post
</router-link>
</br></br>
</div>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Post Title</th>
<th>Post Body</th>
<th>Created At</th>
<th>Updated At</th>
<th class="col-md-2">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="(post, index) in filteredPosts">
<td>{{ index + 1 }}</td>
<td>{{ post.title }}</td>
<td>{{ post.body }}</td>
<td>{{ post.created_at }}</td>
<td>{{ post.updated_at }}</td>
<td>
<router-link class="btn btn-info btn-xs" v-bind:to="{name: 'Viewpost', params: {id: post.id}}"><i class="fa fa-eye" aria-hidden="true"></i> Show</router-link>
<router-link class="btn btn-warning btn-xs" v-bind:to="{name: 'Editpost', params: {id: post.id}}"><i class="fa fa-pencil" aria-hidden="true"></i> Edit</router-link>
<router-link class="btn btn-danger btn-xs" v-bind:to="{name: 'Deletepost', params: {id: post.id}}"><i class="fa fa-trash-o" aria-hidden="true"></i> Delete</router-link>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data:function(){
return {posts: ''};
},
created: function() {
let uri = 'http://localhost:8000/posts/';
Axios.get(uri).then((response) => {
this.posts = response.data;
});
},
computed: {
filteredPosts: function(){
if(this.posts.length) {
return this.posts;
}
}
}
}
</script>
Viewpost.vue
<template id="post">
<div>
<h3>{{ post.title }}</h3>
<strong>Body : </strong>
<div>
{{ post.body }}
</div>
</br>
<span class="glyphicon glyphicon-arrow-left"></span>
<router-link v-bind:to="'/'">Back to post list</router-link>
</div>
</template>
<script>
export default {
data: function () {
return {post: {title: '', body: ''}}
},
created: function(){
let uri = 'http://localhost:8000/posts/'+this.$route.params.id;
Axios.get(uri).then((response) => {
this.post = response.data;
});
}
}
</script>
More Laravel 5.5 Video Tutorial
Video tutorial How to create CRUD Operations in Laravel 5.5
See you next Lessons ..
