Is it possible for certain routes to use vue router while other routes use laravel router?

1
votes

What I have is an existing laravel application with blades , laravel routes and a few vue components. So I don't want to replace the existing routes with vue router. What I want is to add additional routes without disturbing the existing laravel routes.

For an example I have a category which already is using the following category

Route::get('category/index' , 'CategoryController@index')->name('category.index');

Then I would like to add a new route using vue router without disturbing the category route

For an example:

import Dashboard from "../views/Dashboard.vue";

const routes = [
  {
    path: "/",
    name: "Dashboard",
    component: Dashboard,
    meta: {
      requiresAuth: true
    }
  }
]

Is this possible?

Update: This is what I did (If anyone can point out what am I doing wrong, it would be greatly appreciated)

1.0 Install Vue Router using npm

2.0 App.js (Use Vue Router)

import VueRouter from 'vue-router';
Vue.use(VueRouter);

const routes = [
    { path: '/dashboard', component:  require('./components/Dashboard')},
];

const router = new VueRouter({
    routes, // short for `routes: routes` 
    mode: 'history',
});

3.0 Web.php

Route::get('/{vue_capture?}', function () {
    return view('testing.main');
 })->where('vue_capture', '^(?!storage).*$');

4.0 main.blade.php(in testing folder)

@extends('layouts.app')
@section('content')
<div class="container" id="app">
    <router-view></router-view>
</div>
@endsection

5.0 It doesn't work

Thank you.

2
phplaravelvue.jsvue-routerlaravel-routing

2 Answers

0
votes

Yes I believe this should be possible.

You will need to add a Laravel route that captures all the vue routes and shows a view which includes the vue routes.

Route::get('/vue/{vue_capture?}', function () {
   return view('vue.index');
})->where('vue_capture', '[\/\w\.-]*');

You should be able to include both this route and the original Laravel ones. One option would be to prefix the view routes as shown above with /vue, alternatively if you put the routes in the correct order you should be able to avoid the prefix, if you so wish.

The php artisan route:list command will help you, by allowing you to see what the current routes are.

0
votes

Yes you can and simple.

All you need is to put the existing route at the top over the route that handles for vue app.

it should look like this.

web.php

// existing route
Route::get('category/index' , 'CategoryController@index')->name('category.index');

// handle vue app
Route::get('{path}', 'VueController')->where('path', '(.*)');

VueController

public function __invoke()
{
   reuturn view('index');
}

for working example you can read this section to work with vue-router vue-router