How to pass Laravel Roles To Vue js?

One of the biggest problems you will encounter when using Laravel and Vue js together is to show or hide a certain area of your components based on the User role.

I will show you 2 ways I use to go around this issue.

First solution(only if you have 1 role):

What you will need to is add this code to your Blade views as:

@extends('layouts.app')
@section('content')
    hasRole('admin'))}}">
@endsection
In your vue file check the admin role with:
export default {
    props: ['isAdmin'],
    data() {
}}

In your HTML simply do this:

Show this text

Second solution(only if you have 1 role per user):

@extends('layouts.app')
@section('content')
    
    
@endsection

In your vue file check the admin role with:

export default {
   props: ['role'],
   data() {
}}

In your HTML simply do this:

Show this text

Third solution(only if you have multiple roles per user):

@extends('layouts.app')
@section('content')
    
    
@endsection

In your vue file check the admin role with:

export default {
   props: ['roles'],
   data() {
}}

Hope this helps!

Enjoy!