title: Laravel blade template changing to vue component
body: <p>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.</p>
  
  <p>My folder directory is like this. </p>
  
  <pre><code>-roadmap
  ---index.blade.php
  ---show.blade.php
  ---edit.blade.php
  ---create.blade.php
  </code></pre>
  
  <p>Here are some of my codes.</p>
  
  <p>roadmap/index.blade.php</p>
  
  <pre><code>@extends('layouts.admin')
  
  
  
  
  @section('content')
  
  &lt;meta name="csrf-token" content="{{ csrf_token() }}"&gt;
  &lt;!-- DATA TABLES --&gt;
  &lt;script src="//code.jquery.com/jquery-1.12.3.js"&gt;&lt;/script&gt;
  &lt;script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet"href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css"&gt;
  
  
  &lt;div&gt;&lt;a class="btn btn-success" style="float:right" href="{{ route('roadmap.create') }}"&gt;Add Roadmap&lt;/a&gt;&lt;/div&gt;
  
  &lt;table id="myTable" class="table table-hover"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th scope="col"&gt;ID&lt;/th&gt;
          &lt;th scope="col"&gt;Year Covered &lt;/th&gt;
          &lt;th scope="col"&gt;Description&lt;/th&gt;
          &lt;th scope="col"&gt;Date entered&lt;/th&gt;
  
  
  
          &lt;th width="280px"&gt;Action&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          @foreach ($roadmap as $data)
          &lt;tr&gt;
             &lt;td&gt;{{ $data-&gt;id }}&lt;/td&gt;
             &lt;td&gt;{{ $data-&gt;year}}&lt;/td&gt;
             &lt;td&gt;{{ $data-&gt;body}}&lt;/td&gt;
             &lt;td&gt;{{ $data-&gt;created_at}}&lt;/td&gt;
  
  
          &lt;td&gt;
  
          &lt;a href="/roadmap/{{$data-&gt;id}}/edit" class="btn btn-warning"&gt;&lt;span class="glyphicon glyphicon-pencil"&gt;&lt;/span&gt;&lt;/a&gt;
  
          &lt;a href="/roadmap/{{$data-&gt;id}}" class="btn btn-primary"&gt;&lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;&lt;/a&gt;
  
          {!! Form::open(['method' =&gt; 'DELETE', 'route'=&gt;['roadmap.destroy', $data-&gt;id], 'style'=&gt; 'display:inline', 'onsubmit' =&gt; 'return confirm("Are you sure you want to delete?")']) !!}
          {!! Form::button('&lt;i class="fa fa-trash"&gt;&lt;/i&gt;',['type'=&gt;'submit', 'class'=&gt; 'btn btn-danger']) !!}
          {!! Form::close() !!}&lt;/td&gt;
  
  
          &lt;/tr&gt;
          @endforeach
      &lt;/tbody&gt;
    &lt;/table&gt;
  
    &lt;script&gt;
      $(document).ready(function() {
        $('#myTable').DataTable();
  
    } );
     &lt;/script&gt;
  
  
  
  
  @endsection
  
  </code></pre>
  
  <p>RoadmapController.php</p>
  
  <pre><code>&lt;?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')-&gt;get();
  
          return view('roadmap.index', ['roadmap' =&gt; $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()-&gt;validate([
              'year' =&gt;['required', 'string', 'max:255', 'unique:roadmaps'],
              'body' =&gt; ['required', 'string', 'max:255'],
            ]);
  
            Roadmap::create($request-&gt;all());
            return redirect()-&gt;route('roadmap.index')-&gt;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()-&gt;validate([
              'year' =&gt; 'required',
              'body' =&gt; 'required',
            ]);
            Roadmap::find($id)-&gt;update($request-&gt;all());
            return redirect()-&gt;route('roadmap.index')-&gt;with('success',' Updated successfully');
      }
  
      /**
       * Remove the specified resource from storage.
       *
       * @param  int  $id
       * @return \Illuminate\Http\Response
       */
      public function destroy($id)
      {
          //
          Roadmap::find($id)-&gt;delete();
          return redirect()-&gt;route('roadmap.index')-&gt;with('success','News deleted successfully');
      }
  
  }
  
  </code></pre>
  
  <p>web.php</p>
  
  <pre><code>//CRUD COLLECTIVE ROADMAP
      Route::resource('roadmap', 'RoadmapController');
  </code></pre>