title: How to pass Role and permission from Laravel to vue.js
body: <p>I'm having some troubles, passing roles and permission fo authenticated users to vue components.
  My goal is restrict some elements, create, edit, delete buttons eg.</p>
  
  <p>I've followed this tutorial: <a href="https://mmccaff.github.io/2018/11/03/laravel-permissions-in-vue-components/?fbclid=IwAR1Oja6yESRJS65huRXPa9SwO2oQdP3W8TwhE_pReUtaK_8rnVAOzixzwXM" rel="nofollow noreferrer">https://mmccaff.github.io/2018/11/03/laravel-permissions-in-vue-components/?fbclid=IwAR1Oja6yESRJS65huRXPa9SwO2oQdP3W8TwhE_pReUtaK_8rnVAOzixzwXM</a>
  But I have not success.</p>
  
  <p>Here is part of my code:</p>
  
  <p>RolesAndPermissionsSeeder</p>
  
  <pre><code> // create permissions
          //Categorias
          Permission::create(['name' =&gt; 'create category']);
          Permission::create(['name' =&gt; 'update category']);
          Permission::create(['name' =&gt; 'list categories']);
          Permission::create(['name' =&gt; 'desactivate category']);
          Permission::create(['name' =&gt; 'activate category']);
          Permission::create(['name' =&gt; 'delete category']);
          //Tareas
          Permission::create(['name' =&gt; 'create task']);
          Permission::create(['name' =&gt; 'update task']);
          Permission::create(['name' =&gt; 'list tasks']);
          Permission::create(['name' =&gt; 'desactivate task']);
          Permission::create(['name' =&gt; 'activate task']);
          Permission::create(['name' =&gt; 'delete task']);
      //Tareas de planificador
              $role = Role::create(['name' =&gt; 'planificador']);
                  $role-&gt;givePermissionTo(['list tasks']);
                  $role-&gt;givePermissionTo(['list categories']);
              // or may be done by chaining
              //TAreas de Aministrador
              $role = Role::create(['name' =&gt; 'admin']);
                  //Categorias
                  $role-&gt;givePermissionTo(['create category']);
                  $role-&gt;givePermissionTo(['list categories']);
                  $role-&gt;givePermissionTo(['update category']);
                  $role-&gt;givePermissionTo(['desactivate category']);
                  $role-&gt;givePermissionTo(['activate category']);
  </code></pre>
  
  <p>I can limit to users, only menus, but when they access to list e.g. categories list, inside of they have the option of creating and the can even if their role doesn't have this option.
  this is my admin panel.</p>
  
  <p><a href="https://i.stack.imgur.com/KkvjG.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KkvjG.jpg" alt="admin panel"></a></p>
  
  <p>In my user model, I have the function to get permissions
  <strong>app/User.php:</strong></p>
  
  <pre><code>public function getAllPermissionsAttribute() {
      $permissions = [];
      foreach (Permission::all() as $permission) {
          if (Auth::user()-&gt;can($permission-&gt;name)) {
              $permissions[] = $permission-&gt;name;
          }
      }
      return $permissions;
  }
  </code></pre>
  
  <p>In my principal.blade.php, I've put javascript array
  ......</p>
  
  <pre><code> &lt;/footer&gt;
  
      &lt;!-- Bootstrap and necessary plugins --&gt;
      &lt;script src="js/app.js"&gt;&lt;/script&gt;
      &lt;script src="js/plantilla.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          window.Laravel = {!! json_encode([
          'csrfToken' =&gt; csrf_token(),
          'user' =&gt; Auth::user()
      ]) !!};
      &lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>My mixin Permissions.vue</p>
  
  <pre><code>&lt;script&gt;
      export default {
          methods: {
              $can(permissionName) {
                  return Permissions.indexOf(permissionName) !== -1;
              },
          },
      };
  &lt;/script&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/xgrNo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xgrNo.png" alt="enter image description here"></a></p>
  
  <p>Imported in app.js (then compiled)</p>
  
  <pre><code>import Permissions from './mixins/Permissions';
  Vue.mixin(Permissions);
  </code></pre>
  
  <p>Finally, the can restriction in my component Categoria.vue</p>
  
  <pre><code> &lt;div class="card"&gt;
  
              &lt;div class="card-header"&gt;
                  &lt;i class="fa fa-align-justify"&gt;&lt;/i&gt; Categorías
                  &lt;div v-if="$can('create category')"&gt;
                      &lt;button type="button" @click="abrirModal('categoria', 'registrar')" class="btn btn-secondary"&gt;
                          &lt;i class="icon-plus"&gt;&lt;/i&gt;&amp;nbsp;Nuevo
                      &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>This is the error
  <a href="https://i.stack.imgur.com/lUahe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lUahe.png" alt="enter image description here"></a></p>
  
  <p>Sorry for extending the question, but I am trying to be more detailed. </p>