Ad

How I Can Use Vuejs Component In Laravel Blade?

- 1 answer

the idea is to use vue component inside file blade but i got this error

Failed to mount component: template or render function not defined.

this my importation in app.js

Vue.component('Notification' ,require('./components/Notification.vue'));

this my component code

<template>
     <li class="nav-item dropdown">
        <a class="nav-link" data-toggle="dropdown" target="_blank" rel="nofollow noreferrer" href="#">
          <i class="fas fa-bell"></i> <span class="badge badge-light">{{unreads.length}}</span>
          <span class="badge badge-warning navbar-badge"></span>
        </a>
        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
  <notification-item> </notification-item>


        </div>
      </li>

</template>

<script>
    export default {
      props :['unreads','userid'],
        mounted() {
           Echo.private('App.User.'+ this.userid)
    .notification((notification) => {
        console.log(notification);
    });
        }
    }
</script>

and finally this my code in home.blade.php

<Notification  :userid="{{auth()->id()}}" :unreads="{{auth()->user()->unreadNotifications}}"> </Notification>

someone help me please

Ad

Answer

Compile vuejs files via npm run dev and make sure that you use the correct binding for userid and include app.js into scripts.

Ad
source: stackoverflow.com
Ad