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')
    <market-component :is-admin="{{json_encode(Auth::user()->hasRole('admin'))}}"></market-component>
@endsection

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

In your HTML simply do this:

<div v-if="isAdmin">Show this text</div>

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

@extends('layouts.app')
@section('content')
    <market-component :role="{{json_encode(Auth::user()->roles->pluck('name')[0])}}"></market-component>
    <pagination-component></pagination-component>
@endsection

In your vue file check the admin role with:

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

In your HTML simply do this:

<div v-if="role === 'admin'">Show this text</div>

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

@extends('layouts.app')
@section('content')
    <market-component :roles="{{json_encode(Auth::user()->getRoleNames())}}"></market-component>
    <pagination-component></pagination-component>
@endsection

In your vue file check the admin role with:

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

Hope this helps!

Enjoy!