link3014 link3015 link3016 link3017 link3018 link3019 link3020 link3021 link3022 link3023 link3024 link3025 link3026 link3027 link3028 link3029 link3030 link3031 link3032 link3033 link3034 link3035 link3036 link3037 link3038 link3039 link3040 link3041 link3042 link3043 link3044 link3045 link3046 link3047 link3048 link3049 link3050 link3051 link3052 link3053 link3054 link3055 link3056 link3057 link3058 link3059 link3060 link3061 link3062 link3063 link3064 link3065 link3066 link3067 link3068 link3069 link3070 link3071 link3072 link3073 link3074 link3075 link3076 link3077 link3078 link3079 link3080 link3081 link3082 link3083 link3084 link3085 link3086 link3087 link3088 link3089 link3090 link3091 link3092 link3093 link3094 link3095 link3096 link3097 link3098 link3099 link3100 link3101 link3102 link3103 link3104 link3105 link3106 link3107 link3108 link3109 link3110 link3111 link3112 link3113 link3114 link3115 link3116 link3117 link3118 link3119 link3120 link3121 link3122 link3123 link3124 link3125 link3126 link3127 link3128 link3129 link3130 link3131 link3132 link3133 link3134 link3135 link3136 link3137 link3138 link3139 link3140 link3141 link3142 link3143 link3144 link3145 link3146 link3147 link3148 link3149 link3150

[Vue.js] Can't include vue related npm package to my Laravel + Vue project

to include beatiful flash messages to mey Laravel + vue.js 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.js 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.js = 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 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!

Solution :

I usually use vue.js 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().