Как я могу использовать vuejs компонент в laravel лезвие?

Question

Идея состоит в том, чтобы использовать vue компонент внутри блейда файла, но я получил эту ошибку

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

это мой импорт в приложение. js

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

это мой компонент код

<template>
     <li class="nav-item dropdown">
        <a class="nav-link" data-toggle="dropdown" 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>

и, наконец, мой код в home.blade. php

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

кто-нибудь, помогите мне, пожалуйста

Answer 1

Скомпилируйте vuejs файлы с помощью npm run dev и убедитесь, что вы используете правильную привязку для userid и включите приложение. js в сценарии.