title: laravel vue import plugins [vue-chat-scroll]
body: <p>I'm relatively new to Vue.js and now I want to install this plugin <a href="https://github.com/theomessin/vue-chat-scroll" rel="nofollow noreferrer">vue-chat-scroll</a> with in my Laravel application, but it throws this error:  </p>
  
  <blockquote>
    <p>[Vue warn]: Failed to resolve directive: chat-scroll</p>
    
    <p>(found in [ChatLog])</p>
  </blockquote>
  
  <p>I ran <code>npm install --save vue-chat-scroll</code> successful.<br>
  My <code>package.json</code> has the enty for the plugin:</p>
  
  <pre><code>"dependencies": {    
      "laravel-echo": "^1.3.0",
      "pusher-js": "^4.1.0",
      "vue-chat-scroll": "^1.1.1"
  }
  </code></pre>
  
  <p>In <code>bootstrap.js</code> I added the 2 lines as described in the readme.</p>
  
  <pre><code>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'
  };
  </code></pre>
  
  <p>In my <code>ChatLog.vue</code> I added the <code>v-chat-scroll</code> directive. </p>
  
  <pre><code>&lt;template lang="html"&gt;
  &lt;div class="chat-log" v-chat-scroll&gt;
      &lt;chat-message v-for="message in messages" :message="message"&gt;&lt;/chat-message&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script &gt;
  export default{
      props: ['messages']
  
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>What am I missing?</p>