Hey dev friends!

Today I will teach you how to pass your Laravel vue routes to any Vue components:

First create your route in Laravel, ie:

Route::get('/videos', 'Users\VideosController@index')->name('videos.index');

Make sure you always clean your route cache when adding new routes(I know it sounds stupid but we all forget it from time to time….):

php artisan route:cache

In Laravel, create a blade file and drop your vue js component:

ie:

view.blade.php

and add your component and the route as:

@extends('layouts.app')
@section('content')
    
Watch Videos
    video-route="{{route('videos.index')}}">
@endsection

Watch this part very well, I have created a parameter called “video-route”(in red), you have to be very careful with this because it will change a little bit in your Vue component.

Let’s now work out the view component:

export default {
    props: [
        'videoRoute',
    ],
    data() {
        return {
            variable: '',
        }
    },

See the difference? I wrote video-route in the blade file, but it becomes videoRoute in the vue component. If you do not take care of this detail, it will not work.

How to use it in your app?

In Axios:

axios.post(this.videoRoute, formData)

Open a new page:

window.open(this.videoRoute, '_blank');

Please leave me a comment if this trick helped you!