So I just recently finished my project using only laravel framework. Now that I've finished working on it, I want to add vue.js into my project by making the content refresh without refreshing the layout page. And also I want to convert my blade files into vue components. And I don't know how to do it because in every section in my project, I have 4 blade files like index,edit,create,show and I don't know how to do make that in the component and it is difficult to me because I'm using laravel collective form that's why it refreshes every-time I add some entry into the database. Im also new to vuejs. Can someone help me out of this? Thanks a lot.
My folder directory is like this.
-roadmap
---index.blade.php
---show.blade.php
---edit.blade.php
---create.blade.php
Here are some of my codes.
roadmap/index.blade.php
@extends('layouts.admin')
@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- DATA TABLES -->
<script src="//code.jquery/jquery-1.12.3.js"></script>
<script src="//cdn.datatables/1.10.12/js/jquery.dataTables.min.js"></script>
<script src=".10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet"href=".10.12/css/dataTables.bootstrap.min.css">
<div><a class="btn btn-success" style="float:right" href="{{ route('roadmap.create') }}">Add Roadmap</a></div>
<table id="myTable" class="table table-hover">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Year Covered </th>
<th scope="col">Description</th>
<th scope="col">Date entered</th>
<th width="280px">Action</th>
</tr>
</thead>
<tbody>
@foreach ($roadmap as $data)
<tr>
<td>{{ $data->id }}</td>
<td>{{ $data->year}}</td>
<td>{{ $data->body}}</td>
<td>{{ $data->created_at}}</td>
<td>
<a href="/roadmap/{{$data->id}}/edit" class="btn btn-warning"><span class="glyphicon glyphicon-pencil"></span></a>
<a href="/roadmap/{{$data->id}}" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span></a>
{!! Form::open(['method' => 'DELETE', 'route'=>['roadmap.destroy', $data->id], 'style'=> 'display:inline', 'onsubmit' => 'return confirm("Are you sure you want to delete?")']) !!}
{!! Form::button('<i class="fa fa-trash"></i>',['type'=>'submit', 'class'=> 'btn btn-danger']) !!}
{!! Form::close() !!}</td>
</tr>
@endforeach
</tbody>
</table>
<script>
$(document).ready(function() {
$('#myTable').DataTable();
} );
</script>
@endsection
RoadmapController.php
<?php
namespace App\Http\Controllers;
use DB;
use Illuminate\Http\Request;
use App\Roadmap;
use Validator;
use Illuminate\Foundation\Validation\ValidatesRequests;
class RoadmapController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
//
$roadmap = DB::table('roadmaps')->get();
return view('roadmap.index', ['roadmap' => $roadmap]);
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
//
return view('roadmap.create');
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
//
request()->validate([
'year' =>['required', 'string', 'max:255', 'unique:roadmaps'],
'body' => ['required', 'string', 'max:255'],
]);
Roadmap::create($request->all());
return redirect()->route('roadmap.index')->with('success','Created successfully');
}
/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
//
$roadmap = Roadmap::find($id);
return view('roadmap.show', compact('roadmap'));
}
/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
//
$roadmap = Roadmap::find($id);
return view('roadmap.edit', compact('roadmap'));
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
//
request()->validate([
'year' => 'required',
'body' => 'required',
]);
Roadmap::find($id)->update($request->all());
return redirect()->route('roadmap.index')->with('success',' Updated successfully');
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
//
Roadmap::find($id)->delete();
return redirect()->route('roadmap.index')->with('success','News deleted successfully');
}
}
web.php
//CRUD COLLECTIVE ROADMAP
Route::resource('roadmap', 'RoadmapController');
So I just recently finished my project using only laravel framework. Now that I've finished working on it, I want to add vue.js into my project by making the content refresh without refreshing the layout page. And also I want to convert my blade files into vue components. And I don't know how to do it because in every section in my project, I have 4 blade files like index,edit,create,show and I don't know how to do make that in the component and it is difficult to me because I'm using laravel collective form that's why it refreshes every-time I add some entry into the database. Im also new to vuejs. Can someone help me out of this? Thanks a lot.
My folder directory is like this.
-roadmap
---index.blade.php
---show.blade.php
---edit.blade.php
---create.blade.php
Here are some of my codes.
roadmap/index.blade.php
@extends('layouts.admin')
@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- DATA TABLES -->
<script src="//code.jquery.com/jquery-1.12.3.js"></script>
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet"href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<div><a class="btn btn-success" style="float:right" href="{{ route('roadmap.create') }}">Add Roadmap</a></div>
<table id="myTable" class="table table-hover">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Year Covered </th>
<th scope="col">Description</th>
<th scope="col">Date entered</th>
<th width="280px">Action</th>
</tr>
</thead>
<tbody>
@foreach ($roadmap as $data)
<tr>
<td>{{ $data->id }}</td>
<td>{{ $data->year}}</td>
<td>{{ $data->body}}</td>
<td>{{ $data->created_at}}</td>
<td>
<a href="/roadmap/{{$data->id}}/edit" class="btn btn-warning"><span class="glyphicon glyphicon-pencil"></span></a>
<a href="/roadmap/{{$data->id}}" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span></a>
{!! Form::open(['method' => 'DELETE', 'route'=>['roadmap.destroy', $data->id], 'style'=> 'display:inline', 'onsubmit' => 'return confirm("Are you sure you want to delete?")']) !!}
{!! Form::button('<i class="fa fa-trash"></i>',['type'=>'submit', 'class'=> 'btn btn-danger']) !!}
{!! Form::close() !!}</td>
</tr>
@endforeach
</tbody>
</table>
<script>
$(document).ready(function() {
$('#myTable').DataTable();
} );
</script>
@endsection
RoadmapController.php
<?php
namespace App\Http\Controllers;
use DB;
use Illuminate\Http\Request;
use App\Roadmap;
use Validator;
use Illuminate\Foundation\Validation\ValidatesRequests;
class RoadmapController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
//
$roadmap = DB::table('roadmaps')->get();
return view('roadmap.index', ['roadmap' => $roadmap]);
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
//
return view('roadmap.create');
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
//
request()->validate([
'year' =>['required', 'string', 'max:255', 'unique:roadmaps'],
'body' => ['required', 'string', 'max:255'],
]);
Roadmap::create($request->all());
return redirect()->route('roadmap.index')->with('success','Created successfully');
}
/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
//
$roadmap = Roadmap::find($id);
return view('roadmap.show', compact('roadmap'));
}
/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
//
$roadmap = Roadmap::find($id);
return view('roadmap.edit', compact('roadmap'));
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
//
request()->validate([
'year' => 'required',
'body' => 'required',
]);
Roadmap::find($id)->update($request->all());
return redirect()->route('roadmap.index')->with('success',' Updated successfully');
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
//
Roadmap::find($id)->delete();
return redirect()->route('roadmap.index')->with('success','News deleted successfully');
}
}
web.php
//CRUD COLLECTIVE ROADMAP
Route::resource('roadmap', 'RoadmapController');
2 Answers
Reset to default 18there are many different ways to have vue components in our laravel application. Basic idea is to execute SPA (Single Page Application), I'll tell you how I do it.
Laravel provides basic entry point for our vuejs application. You can see in your webpack.mix.js file. For the routes I use vue-router and rest api for CRUD operation. So you need to do following setup:
npm install
npm install vue-router --save
npm run dev // To compile app.js and store into public folder
In your case I would make a single blade file which will act as entry point for Vue application. I would define in route web.php
Route::get('/{view?}', 'HomeController@landing')->where('view', '(.*)')->name('landing');
In HomeController I'll simply return the blade view
return view('landing')
Now in will make landing.blade.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>welcome.</title>
<meta name="description" content="Login Page">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
<div id="website">
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
You have to mention csrf_token() in the meta tag and a div with id so that it can render vue-components over there.
Now I'll create a router file for vuejs will create router.js in resources folder:
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
export const router = new VueRouter({
mode: 'history',
routes:
[
{
path: '/',
component: Vue.component('welcome', () => import('./components/Welcome.vue')),
name: 'welcome',
},
{
path: '/roadmap',
component: Vue.component('roadmap-index', () => import('./components/Roadmap/index.vue')),
name: 'roadmap.index',
},
],
base: '/',
});
Rest you can do for Create, Update forms. Now we will configure our app.js file present inside resource folder:
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
import VueRouter from 'vue-router';
import {router} from "./routes";
import welcome from './components/Welcome';
window.Vue = require('vue');
Vue.use(VueRouter);
const layoutOne = new Vue({
el: '#website',
router: router,
render:h=>h(welcome)
});
Then I'll create welcome component which will act as entry point for vue-router, will create a welcome.vue file:
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "welcome",
}
</script>
<style lang="scss">
</style>
Now I'll make API's for CRUD operation:
<?php
namespace App\Http\Controllers;
use DB;
use Illuminate\Http\Request;
use App\Roadmap;
use Validator;
use Illuminate\Foundation\Validation\ValidatesRequests;
class RoadmapController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
//
$roadmap = DB::table('roadmaps')->get();
return response()->json(['roadmap' => $roadmap], 200);
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
//
request()->validate([
'year' =>['required', 'string', 'max:255', 'unique:roadmaps'],
'body' => ['required', 'string', 'max:255'],
]);
Roadmap::create($request->all());
return response()->json(['message' => 'Created successfully'], 200);
}
/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
//
$roadmap = Roadmap::find($id);
return response()->json(['roadmap` => $roadmap],200);
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
//
request()->validate([
'year' => 'required',
'body' => 'required',
]);
Roadmap::find($id)->update($request->all());
return response()->json(['message' => 'Updated successfully'], 200;;
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
//
Roadmap::find($id)->delete();
return response()->json(['message' => 'Deleted'], 200;;
}
}
I would then make api in api.php
Route::resource('roadmap', 'RoadmapController');
Now only thing left out is calling these api in our component file and executing as per our requirement.
<template>
<table class="table table-hover">
<thead class="demo">
<tr>
<th>Roadmap</th> //Whatever you have headers
<th>Update</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in roadmaps">
<td>{{ item.name }}</td> // Whatever your data field is
<td @click="update(item)">Update</td>
<td @click="delete(item)"> Delete</td>
</tr>
</table>
</template>
<script>
export default {
data() {
return: {
roadmaps: [],
errors: ''
}
},
methods: {
fetchData() {
axios.get('api/roadmap).then(response => {
if(response.status === 200)
{
this.roadmaps = response.data
}
}).catch((error) => {
this.errors = error.response.data
})
},
update(item) {
this.$router.push({ name: update, params: { id: item.id}})
},
delete(item) {
axios.delete('api/roadmap/'+item.id).then(response => {
if(response.status === 200)
{
this.fetchData() // to refresh table..
}
}).catch((error) => {
this.errors = error.response.data
})
}
}
created() {
this.fetchData()
}
}
</script>
I hope you get a basic idea to execute things on your own. There are lot of tutorials which can be found:
https://laravel-news.com/using-vue-router-laravel
Hope this helps. Cheers.
PS: You have to keep compiling via npm run dev or npm run watch after you finish coding vue-component. Code may not work or might have bugs. This is only to give you direction to start through.
Don't know if its help you or not , but i am sharing my thoughts.
- add js file in laravel webpack
- in js file add your component
in component add your code for @foreach you can use v-for="data in roadmap"
<tr v-for="data in roadmap"> <td> {{ data.id }}</td> <td> {{ data.year }}</td> <td> <a :href="'/roadmap/'+ data.id +'/edit'" class="btn btn-warning"> <span class="glyphicon glyphicon-pencil"></span> </a> </td> </tr>for controller index function:
if($request->ajax()){ $roadmap = DB::table('roadmaps')->get(); return response()->json($roadmap, 200); } return view('roadmap.index');to submit form you can add methods on click buttons.
let me know if their any lack of understanding. i will update my answer
<component-name>and some little CRUD axios. Also im confused if@foreachwill work in my component since im passing the data to my views using thecompactfunction in my controller – draw134 Commented Jul 24, 2019 at 4:48