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