title: How to combine laravel and vue routes
body: <p>I am creating a simple laravel and vuejs CRUD Application. Vue Routes are not working, I am pretty new to vuejs; please see the code
  Below is the code for web.php</p>
  
  <pre><code>    Route::get('/', function () {
      return view('welcome');
      });
  
      Auth::routes();
  
      Route::get('/home', 'HomeController@index')-&gt;name('home');
      Route::get('/vue','Api\PostController@home');
      Route::resource('/api','Api\PostController');
  </code></pre>
  
  <p>Following is the code for app.js</p>
  
  <pre><code>    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');
      const Posts = Vue.component('Posts',require('./components/Posts.vue'));
      const EditPost = 
      Vue.component('EditPost',require('./components/EditPost.vue'));
      const AddPost = 
      Vue.component('AddPost',require('./components/AddPost.vue'));
      const DeletePost = 
      Vue.component('DeletePost',require('./components/AddPost.vue'));
      const ViewPosts = 
      Vue.component('ViewPosts',require('./components/ViewPosts.vue'));
      const ExampleComponent = 
     Vue.component('ViewPosts',require('./components/ExampleComponent.vue'));
  
     // Registering routes
     Vue.use(VueRouter,VueAxios,axios);
  
     const routes = [
     {
      name: 'Posts',
      path: '/posts',
      component: Posts
     },
     {
      name: 'AddPost',
      path: '/add-posts',
      component: AddPost
     },
     {
      name: 'EditPost',
      path: '/edit-post/:id',
      component: EditPost
     },
     {
      name: 'DeletePost',
      path: '/delete-post',
      component: DeletePost
     },
     {
      name: 'ViewPosts',
      path: '/view-post',
      component: ViewPosts
     },
     {
      name: 'ExampleComponent',
      path: '/example-component',
      component: ExampleComponent
     },
   ];
      const router = new VueRouter({mode: 'history', routes: routes});
      new Vue(
        Vue.util.extend(
        { router },
        AppLayout
       )).$mount('#app');
  </code></pre>
  
  <p>This is the code of my blade tamplate, when I browse <a href="http://localhost:8000/vue" rel="noreferrer">http://localhost:8000/vue</a> this view is being rendered. As you can see in the web.php code above.
  I can also see the notification in console <strong>You are running Vue in development mode. Make sure to turn on production mode when deploying for production.</strong></p>
  
  <pre><code>   &lt;!DOCTYPE html&gt;
     &lt;html lang="{{ app()-&gt;getLocale() }}"&gt;
     &lt;head&gt;
       &lt;meta charset="utf-8"&gt;
       &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
       &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;!-- CSRF Token --&gt;
      &lt;meta name="csrf-token" content="{{ csrf_token() }}"&gt;
      &lt;title&gt;{{ config('app.name', 'Laravel') }}&lt;/title&gt;
  &lt;!-- Styles --&gt;
      &lt;link href="{{ asset('css/app.css') }}" rel="stylesheet"&gt;
    &lt;/head&gt;
    &lt;body&gt;
     &lt;div class="container"&gt;
     &lt;header class="page-header"&gt;
      &lt;div class="branding"&gt;
          &lt;img src="https://vuejs.org/images/logo.png" alt="Logo" title="Home page" class="logo"/&gt;
          &lt;h1&gt;Vue.js CRUD With Laravel 5 application&lt;/h1&gt;
      &lt;/div&gt;
     &lt;/header&gt;
   &lt;/div&gt;
  &lt;section id="app"&gt;
  
  &lt;/section&gt;
  &lt;script&gt;
    window.Laravel = &lt;?php echo json_encode([
      'csrfToken' =&gt; csrf_token(),
  ]); ?&gt;
  &lt;/script&gt;
  &lt;script src="{{ asset('js/app.js') }}"&gt;&lt;/script&gt;
   &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>But when I run my application using </p>
  
  <pre><code>    php artisan serve
  </code></pre>
  
  <p>and browse to </p>
  
  <pre><code>    http://localhost:8000/posts
  </code></pre>
  
  <p>Application show a 404 error. Please help me with this problem.</p>