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 26 · Accepted Answer · edited Jul 15 '22 at 01:20

26

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://v2.vuejs.org/v2/guide/components-props.html

Hope this helps.

edited Jul 15 '22 at 01:20

tony19

125,647
18
229
307

answered Sep 13 '18 at 11:09

Codearts

2,816
6
32
54

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
2

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 3 · 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.

score 0 · Answer 3 · answered Sep 06 '22 at 19:39

Use https://github.com/tighten/ziggy

Ziggy provides a JavaScript route() helper function that works like Laravel's, making it easy to use your Laravel named routes in JavaScript.

You can then use routes in JS just like in PHP

route('posts.index');

With parameters too

route('posts.show', [1]);

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

3 Answers3