I'm currently working on a website/webapp using Laravel 5.3 and Vue 2. Since SEO is crucial, I've decided to keep the frontend/crawlable part of the site in Laravel + Blade, with only minimal sections in Vue 2.0. This way, I can avoid using Ajax to load page content and allow search engine crawlers like Google to easily index the site (although Google may not wait for Ajax to fully load).
On the backend, however, I plan to go full SPA with Vue and VueRouter.
The challenge now is how best to separate these two components?
I intend to make my backend accessible via /manager
So far, here's what I've come up with:
# routes.php
### Laravel/Frontend routes go here (before SPA) ###
Route::get('/manager/{spaPlage?}', ['middleware' => 'auth', function () {
return view('manager.index');
}])->where(['spaPlage' => '.*'])->name('manager.index');
And then in Vue, I have:
const routes = [
{ path: '/', name: 'dashboard.index', component: require('./pages/manager/Dashboard.vue') },
{ path: '/categories', name: 'categories.index', component: require('./pages/manager/categories/Index.vue') },
{ path: '/category/:id', name: 'category', component: require('./pages/manager/categories/Category.vue') }
];
const router = new VueRouter({
routes,
base: '/manager'
})
const app = new Vue({
el: '#app',
router
...
This setup seems to be functional, but it doesn't quite feel right as the Vue Router still affects the frontend by appending hash/hashbang. Is there a more effective way to separate the Laravel frontend from the Vue SPA backend?