laravel vue import plugins [vue-chat-scroll]

Question

I'm relatively new to Vue.js and now I want to install this plugin vue-chat-scroll with in my Laravel application, but it throws this error:

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

(found in [ChatLog])

I ran npm install --save vue-chat-scroll successful.
My package.json has the enty for the plugin:

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

In bootstrap.js I added the 2 lines as described in the readme.

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'
};

In my ChatLog.vue I added the v-chat-scroll directive.

<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>

What am I missing?

Did you recompile your assets after referencing the package in `bootstrap.js`? Also you might want to try `require('vue-chat-scroll')` instead of your `import` (ES5 approach in docs). — Alex, May 15 '17 at 20:51

score 1 · Accepted Answer · answered May 16 '17 at 01:59

When using a single file components you have to define the requirements inside the components themselves.

try this:

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

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

It's annoying but thankfully webpack will optimize away the dual requires, or if this the only place you need it you can remove it from bootstrap.js

laravel vue import plugins [vue-chat-scroll]

1 Answers1