Can't include vue related npm package to my Laravel + Vue project - laravel

Question

I want to include beatiful flash messages to mey Laravel + Vue app, so I found a npm package on GitHub and installed this in my app (npm install)
I'm beginner in VueJs and I'm facing a problem: I just can't use the package in my vue components since it throw errors when I try to include this
What I use and what I get:
it's my app.js code
window.Vue = require('vue');
/*including the package*/
import FlashMessage from '#smartweb/vue-flash-message';
Vue.use(FlashMessage);
/*including the package*/
Vue.component('settings-form',require('./components/SettingsFormComponent.vue').default);
Vue.component('profile-nav',require('./components/ProfileNavComponent.vue').default);
const app = new Vue({
el: '#app',
});
What error I get using the code:
"TypeError: Cannot read property 'flashMessage' of undefined at app.js:1863"
I run this method (flashMessage) when I want to output a message:
Also I tried to use this code in my app.js to include the packange:
Vue.component('FlashMessage', require('#smartweb/vue-flash-message').default);
but it doesn't work too, it throws this error:
"Failed to mount component: template or render function not defined ..."
I'm trying to use my component that way (in ProfileNavComponent.vue):
<FlashMessage></FlashMessage>
Could you please tell me what the problem can be in?
thanks guys for any help)
I really appreciate this!

Answer 1

Im an author of this package. If you will have some issues with it, please leave the issue on github: https://github.com/smwbtech/vue-flash-message/issues
About your problem, I suppose that it is function context issue. Try to use arrow function as callback for .then
axios.post('/api/post/', body)
.then( res => {
this.flashMessage(/*your message*/);
this.data = '';/*other actions with your component data*/
})
.catch(e);

Answer 2

I usually use vue packages adding them from the name of the package, try:
import FlashMessage from 'vue-flash-message';
And when you want to use the component, try to use FlashMessage.show().

Answer 3

That's how I uncluded the package into my project
in app.js I added that code:
import FlashMessage from '#smartweb/vue-flash-message';
Vue.use(FlashMessage, {tag: 'flash-message', strategy: 'multiple'});
And then in any component I wanted to use flashMessages I used code like this:
this.flashMessage.success({
title: 'New Friend!',
message: data.user_created_by.full_name + ' started chatting with you!',
time: 5000,
blockClass: 'image-uploaded-flash',
});
Thanks a lot guys all who wanted to help me!!!