Adding Quasar Framework Eventbus to the Pinia stores

I am going to skip all the parts around installing the quasar framework and assume you have already done that since you are asking this very specific question.  I am also assuming you are already using the pinia store.

So assuming the above this is how I did it:

Create an eventbus.js file and add it to your boot directory.

/boot/eventbus.js

import { boot } from "quasar/wrappers";

import { EventBus } from "quasar";

import { useUserStore } from "src/stores/UserStore";


const bus = new EventBus();


bus.on("login", (user) => {

	console.log(user);

});


bus.on("TaskComplete", (userTask) => {

	const { getUser } = useUserStore();
	
	getUser();

});

// "async" is optional;
// more info on params: https://v2.quasar.dev/quasar-cli/boot-files

export default boot(async ({ app }) => {

	app.config.globalProperties.$bus = bus;

	app.provide("bus", bus);

});


export { bus };

After that add the event bus to your quasar.config.js file.

quasar.config.js

 // app boot file (/src/boot)
 // --> boot files are part of "main.js"
 // https://v2.quasar.dev/quasar-cli/boot-files
 boot: ["i18n", "axios", "eventbus"],

Now you need to add the eventbus to the pinia store. You do this by going to the /stores/index.js file.

/stores/index.js

 // IMPORT the markRaw method from Vue
 import { markRaw } from "vue";
 
 export default store(({ app }) => {
  const pinia = createPinia();
  
  pinia.use(({ store }) => {
    store.eventbus = markRaw(bus);
  });

  return pinia;
});

Now you will be able to emit an event from any pinia store.

// EXAMPLE API CALL WITH BUS EVENT
    conmpleteUserTask() {
      api
        .post("/api/user-task/" + this.currentUserTask.model_id + "/complete")
        .then((response) => {

          this.eventbus.emit("TaskComplete", response.data);
        });
    },

There you go you can now use the quasar framework event but in any pinia store.  Just add more events in the eventbus.js file or import them from another file.

Check out how ChatGPT solved this problem: Asking ChatGPT: Explain how to add Quarsar Framework event bus to pinia stores