laravelのVUEのインポートプラグイン[VUE-チャット-スクロール]

Question

私はVue.jsに比較的新しいですし、今私はLaravelアプリケーションにして、このプラグインvue-chat-scrollをインストールしたいが、それは、このエラーがスローされます。

[Vue warn]: Failed to resolve directive: chat-scroll

(found in [ChatLog])

私はnpm install --save vue-chat-scrollを成功させました。
マイpackage.jsonは、プラグインのentyを有する：readmeファイルに記載されているように、私は2行を追加しbootstrap.jsで

"dependencies": {  
    "laravel-echo": "^1.3.0", 
    "pusher-js": "^4.1.0", 
    "vue-chat-scroll": "^1.1.1" 
} 

。私ChatLog.vueで

window.Vue = require('vue'); 

import VueChatScroll from 'vue-chat-scroll' 
Vue.use(VueChatScroll); 


window.axios = require('axios'); 

window.axios.defaults.headers.common = { 
    'X-CSRF-TOKEN': window.Laravel.csrfToken, 
    'X-Requested-With': 'XMLHttpRequest' 
}; 

私はv-chat-scrollディレクティブを追加しました。

<template lang="html"> 
<div class="chat-log" v-chat-scroll> 
    <chat-message v-for="message in messages" :message="message"></chat-message> 
</div> 
</template> 

<script > 
export default{ 
    props: ['messages'] 

} 
</script> 

私は何が欠けていますか？

Answer 1

単一のファイルコンポーネントを使用する場合は、コンポーネント自体の内部で要件を定義する必要があります。

これを試してみてください。

<script > 
import Vue from 'vue' 
import VueChatScroll from 'vue-chat-scroll' 
Vue.use(VueChatScroll) 

export default{ 
    props: ['messages'] 
} 
</script> 

それは迷惑なんだけどありがたいことWebPACKのデュアルが必要と離れて最適化する、またはこのあなたがそれを必要とする唯一の場所場合はbootstrap.js