I am migrating my application vue 2.0 to vue 3.0 . By following the guide, i have done the changes and it is compiled successfully. But, i am getting error in snackbar component. While checking the issue, it was because new Vue() instance. I have upgraded that app Vue 3.0. I am not able to understand how to resolve that.
Here is my snackbar event js file. Where i was initialized the vue instance.
import Vue from 'vue'
const events = new Vue();
export default events
This is the snackbar's index.js for reference.
import urSnackbar from "./urSnackbar.vue";
import snacbkarEvent from "./snackbarEvents";
export default {
install(Vue){
Vue.component(urSnackbar.name, urSnackbar);
if (this.installed) {
return
}
this.installed = true;
const showSnackbar = (params) => {
if (typeof params === 'string') {
params = { title: '', text: params }
}
if (typeof params === 'object') {
snacbkarEvent.$emit('show-snackbar', params);
}
};
const addSnackbar = (params) => {
if (typeof params === 'string') {
params = { title: '', text: params }
}
if (typeof params === 'object') {
snacbkarEvent.$emit('add-snackbar', params);
}
};
Vue.prototype.$showSnackbar = showSnackbar;
Vue.prototype.$addSnackbar = addSnackbar;
}
};
This issue reflected while changing the configuration in vue.config.js to resolve the warnings for migration process.
What i changed in vue.config.js for which this issue occurred
configureWebpack: {
resolve: {
alias: { vue$: 'vue/dist/vue.esm-bundler.js' } } ..... }
Previously, It was (vue$: '@vue/compat') so i got multiple warnings. For those, i changed as above.
Can you tell me how i can resolve this issue?