I have been trying to use mitt inside my vuex module but I always get the "emitter is not defined error".

This is my main.js:

import { createApp } from "vue";
import App from "./App.vue";

import "@fortawesome/fontawesome-free/css/all.css";
import "@fortawesome/fontawesome-free/js/all.js";
import "@/assets/styles/index.scss";

import mitt from 'mitt'
const emitter = mitt()

import router from "./router";
import store from "./store";

const app = createApp(App).use(router).use(store)
app.config.globalProperties.emitter = emitter
app.mount("#app");

When I try to emit an event from a vuex module action like this:

dispatch("settingInmingChats", socketData.iningChats).then(
   () => {
       emitter.emit("chats_updated");
   }
);

I get this error:

Uncaught (in promise) ReferenceError: emitter is not defined at websocket.js:34:17

I have been trying to use mitt inside my vuex module but I always get the "emitter is not defined error".

This is my main.js:

import { createApp } from "vue";
import App from "./App.vue";

import "@fortawesome/fontawesome-free/css/all.css";
import "@fortawesome/fontawesome-free/js/all.js";
import "@/assets/styles/index.scss";

import mitt from 'mitt'
const emitter = mitt()

import router from "./router";
import store from "./store";

const app = createApp(App).use(router).use(store)
app.config.globalProperties.emitter = emitter
app.mount("#app");

When I try to emit an event from a vuex module action like this:

dispatch("settingInmingChats", socketData.iningChats).then(
   () => {
       emitter.emit("chats_updated");
   }
);

I get this error:

Uncaught (in promise) ReferenceError: emitter is not defined at websocket.js:34:17

• javascript
• vuex
• vuejs3
• eventemitter

2 Answers 2

What i have done is that :

mitt.js :

import mitt from 'mitt';

// Create a new emitter
const emitter = mitt();

// Export that emitter
export default emitter;

main.js :

// We recover the emitter
import emitter from './mitt';

// Vuex Store
import store from './store/store';

const app = createApp({});

app.use(store);

// We make the emitter available on window object 
// (optional but can be handy,
// if you have js files 'outside' of vue scope that needs that emitter)
window.emitter = emitter;

// We add a global $mitt property
app.config.globalProperties.$mitt = emitter;

so it's available inside vue with $mitt and outside vue with window.emitter if you need to

You will not have access to globally defined properties inside a vuex action though, so you will need to import it :

import emitter from '@/mitt';

const actions = {};

export default actions;

the downside to this is that it's not the same instance, it's a new one, and it can cause issues

There is multiple ways to make a property global in vue 3

One of the best solution for external libs would be to create a mitt.js file in a plugins directory with the following code

import mitt from 'mitt'

const emitter = mitt()

export default emitter

Then you can import and use it in both your .js store and .vue template files

import emitter from "../plugins/mitt";

emitter.emit('chats_updated')