What is the best way to use Laravel route in Vue JS component

Question

I have a vue js component which makes an axios request to a laravel route. But in the vue files I don't have access to the route() function and have to use static url's for now. Here's some code: web.php:

// API
Route::group(['prefix' => 'api'], function() {
    // GET
    Route::get('/brands', 'BrandsController@getBrands')->name('api-get-brands');
    Route::get('/{brand_id}/models', 'BrandsController@getModels')->name('api-get-models');
    Route::get('/fuel-types', 'BrandsController@getFuelTypes')->name('api-get-fuel-types');
    Route::get('/gearboxes', 'BrandsController@getGearboxes')->name('api-get-gearboxes');
});

Vue component:

methods: {
            getBrands: function() {
                let app = this
                axios.get('/api/brands')
                    .then(function(response) {
                        app.brands = response.data
                    })
                    .catch(function(error) {
                        console.log(error)
                    })
            },
            ...

}

It works now but I wonder if that's the best way or is there some better way to do it

I've had a decent bit of success using [this package](https://github.com/aaronlord/laroute) and assigning into a `window` variable. — Ohgodwhy, Oct 25 '17 at 19:59
@Ohgodwhy that package looks good. I guess you need to run `php artisan laroute:generate` every time you change routes? — ljubadr, Oct 25 '17 at 20:42
@Ohgodwhy thanks! I guess some kind of watcher can be set to run the command :) I guess something like this could be useful [In Linux, how do I run a shell script when a file or directory changes](https://stackoverflow.com/questions/4060212/in-linux-how-do-i-run-a-shell-script-when-a-file-or-directory-changes) — ljubadr, Oct 25 '17 at 21:25
@ljubadr I've been down that road, too. I would suggest [using this package](https://github.com/jasonlewis/resource-watcher) to watch your `routes` directory for changes. In the callback of the listener you can run `Artisan::call('laroute:generate')` to have the route file regenerated. You can then have `npm run watch` or `npm run hot` running, which will auto-recompile your JS including the new routes, as long as you're doing something like `require('routes.js`)` somewhere in your javascript. — Ohgodwhy, Oct 25 '17 at 23:27
@Ohgodwhy - wow, this is awesome, thanks a lot! I'll put it to a good use :) Cheers! — ljubadr, Oct 25 '17 at 23:33

score 18 · Accepted Answer · answered Sep 13 '18 at 11:09

18

You can pass the route as props to the component inside the blade file.

Inside the view:

<component home-route="{{ route('home') }}"></component>

Inside the vue component:

<script> 
    export default {
        props: ['homeRoute'],
    }
</script>

Then you can access the route inside the component like so:

this.homeRoute

You can learn more about props here: https://vuejs.org/v2/guide/components-props.html

Hope this helps.

answered Sep 13 '18 at 11:09

Codearts

2,306
4
24
49

10

But if i want to use route that requires a parameter ? – Nur Uddin Feb 08 '19 at 17:32
2

@john – Samuel Aiala Ferreira Jan 07 '20 at 11:37
2

@SamuelAialaFerreira what if parameters should be passed from the vue app? – Yerke Aug 24 '20 at 14:25
@Yerke don't know what you mean unfortunately :( – Samuel Aiala Ferreira Aug 26 '20 at 18:07
1

They mean 'What if the $parameters variable needs to come from the Vue app and is not known when the page first loads?' – floodlitworld Feb 07 '21 at 12:00

score 0 · Answer 2 · answered Mar 31 '21 at 19:15

The only way how to use routes with parameters that I found out is like this:

The route:

Route::get('route/{param1}/{param2}', [Controller::class, 'actionName'])->name('routeName');

The blade:

<component :route="'{{ route('routeName', ["", ""]) }}'"></component>

where the number of empty strings in the array is equal to the number of required parameters for the route.

The component:

<script>
export default {
    props: {
        route: String
    },
    data() {
        return {
            param1: "",
            param2: ""
        }
    },
    computed: {
        fullRoute() {
            return this.route + '/' + this.param1 + '/' + this.param2;
        }
    }
}
</script>

I am using Laravel 8 and Vue 3.

What is the best way to use Laravel route in Vue JS component

2 Answers2