5 months ago

How can I controller my web routes from vuejs except a specific prefixed route?

Posted 5 months ago by Melodia

I created a few resources and the controller looks like this:

    Route::resource('projects', 'ProjectController');
    Route::resource('tasks', 'TaskController');

So, those are the end point that I want to access on the vue.js side.

If I hit the url: site.example/compnay/tasks, I see the response.

Next, I added the following to my web routes under the intention of having my routes rather managed on the vue side:

Route::get('/{any}', '[email protected]')->where('any', '.*');

But, after adding that, if I hit site.example/compnay/tasks I no longer see the desired response I had seen previously, but the App Component content, which looks like this:

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an example component.

    export default {
        mounted() {
            console.log('App component mounted.')

And this is how my app.js looks like this:


import Vue from 'vue'
import App from './App.vue'

Vue.component('app-component', require('./components/MainComponent.vue').default);

new Vue({
    render: h => h(App)

How can I controller the routes via vue.js, but still be able to see the response from all the routes under the company prefix? So if I hit site.example/company/tasks, I am able to see the json response.

Please sign in or create an account to participate in this conversation.