acro5piano/Index.vue

## api.php
Route::group(['middleware' => 'api'], function() {
    Route::get('articles',  function() {
        $articles = Article::all()->take(5);
        return $articles;
    });
});

## app.blade.php
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
    <head>
        <script>
            window.Laravel = {};
            window.Laravel.csrfToken = "{{ csrf_token() }}";
        </script>
    </head>
    <body>
        <div id="app">
            <navbar></navbar>
            <div class="container">
                <router-view></router-view>
            </div>
        </div>
    </body>
    <script src="{{ mix('js/app.js') }}"></script>
</html>

## app.js
import Vue from 'vue'
import VueRouter from 'vue-router'

require('./bootstrap')

Vue.use(VueRouter)

Vue.component('navbar', require('./components/Layouts/Navbar.vue'))

const router = new VueRouter({
    mode: 'history',
    routes: [
        { path: '/',
          component: require('./components/Articles/Index.vue')
        }
    ]
})

const app = new Vue({
    router
}).$mount('#app')

## bootstrap.js
// ...

window.axios = require('axios')

window.axios.defaults.headers.common = {
    'X-CSRF-TOKEN': window.Laravel.csrfToken,
    'X-Requested-With': 'XMLHttpRequest'
}

Vue.prototype.$http = axios

// ...

## file0.txt
.
|-- app
|   `-- Models
|       `-- Article.php
|-- package.json
|-- resources
|   |-- views
|   |   `-- app.blade.php
|   `-- assets
|       `-- js
|           |-- app.js
|           |-- bootstrap.js
|           `-- components
|               |-- Articles
|               |   `-- Index.vue
|               `-- Layouts
|                   `-- Navbar.vue
|-- routes
    |-- api.php
    `-- web.php

## Index.vue
<template>
    <div v-for="article in articles">
        <h1>
            <router-link :to="'/articles/' + article.id">{{ article.title }}</router-link>
        </h1>
        <p>
            {{ article.content }}
        </p>
    </div>
</template>

<script>
    export default {
        created() {
            this.fetchArticles()
        },
        data() {
            return {
                articles: []
            }
        },
        methods: {
            fetchArticles() {
                this.$http({
                    url: '/api/articles',
                    method: 'GET'
                }).then(res =>  {
                    this.articles =  res.data
                })
            }
        }
    }
</script>

## Navbar.vue
<template>
    <nav class="navbar navbar-default">
        <li>
            <router-link  to="/about">About</router-link>
        </li>
    </nav>
</template>

## web.php
<?php

Route::get('/{any}', function () {
    return view('app');
})->where('any', '.*');
	Route::group(['middleware' => 'api'], function() {
	Route::get('articles', function() {
	$articles = Article::all()->take(5);
	return $articles;
	});
	});
	<!DOCTYPE html>
	<html lang="{{ config('app.locale') }}">
	<head>
	<script>
	window.Laravel = {};
	window.Laravel.csrfToken = "{{ csrf_token() }}";
	</script>
	</head>
	<body>
	<div id="app">
	<navbar></navbar>
	<div class="container">
	<router-view></router-view>
	</div>
	</div>
	</body>
	<script src="{{ mix('js/app.js') }}"></script>
	</html>
	import Vue from 'vue'
	import VueRouter from 'vue-router'

	require('./bootstrap')

	Vue.use(VueRouter)

	Vue.component('navbar', require('./components/Layouts/Navbar.vue'))

	const router = new VueRouter({
	mode: 'history',
	routes: [
	{ path: '/',
	component: require('./components/Articles/Index.vue')
	}
	]
	})

	const app = new Vue({
	router
	}).$mount('#app')
	// ...

	window.axios = require('axios')

	window.axios.defaults.headers.common = {
	'X-CSRF-TOKEN': window.Laravel.csrfToken,
	'X-Requested-With': 'XMLHttpRequest'
	}

	Vue.prototype.$http = axios

	// ...
	.
	\|-- app
	\| `-- Models
	\| `-- Article.php
	\|-- package.json
	\|-- resources
	\| \|-- views
	\| \| `-- app.blade.php
	\| `-- assets
	\| `-- js
	\| \|-- app.js
	\| \|-- bootstrap.js
	\| `-- components
	\| \|-- Articles
	\| \| `-- Index.vue
	\| `-- Layouts
	\| `-- Navbar.vue
	\|-- routes
	\|-- api.php
	`-- web.php
	<template>
	<div v-for="article in articles">
	<h1>
	<router-link :to="'/articles/' + article.id">{{ article.title }}</router-link>
	</h1>
	<p>
	{{ article.content }}
	</p>
	</div>
	</template>

	<script>
	export default {
	created() {
	this.fetchArticles()
	},
	data() {
	return {
	articles: []
	}
	},
	methods: {
	fetchArticles() {
	this.$http({
	url: '/api/articles',
	method: 'GET'
	}).then(res => {
	this.articles = res.data
	})
	}
	}
	}
	</script>
	<template>
	<nav class="navbar navbar-default">
	<li>
	<router-link to="/about">About</router-link>
	</li>
	</nav>
	</template>
	<?php

	Route::get('/{any}', function () {
	return view('app');
	})->where('any', '.*');