//"serve": "vue-cli-service lint --fix --fix && vue-cli-service serve",
////
https://dummyjson.com/products?limit=100
"id":1,
"title":"iPhone 9",
"description":"An apple mobile which is nothing like apple",
"price":549,"discountPercentage":12.96,
"rating":4.69,
"stock":94,
"brand":"Apple",
"category":"smartphones",
"thumbnail":"https://i.dummyjson.com/data/products/1/thumbnail.jpg",
"images":["https://i.dummyjson.com/data/products/1/1.jpg","https://i.dummyjson.com/data/products/1/2.jpg","https://i.dummyjson.com/data/products/1/3.jpg","https://i.dummyjson.com/data/products/1/4.jpg","https://i.dummyjson.com/data/products/1/thumbnail.jpg"]
//////
As suggested in official docs you could use mitt library to dispatch events between components, let suppose that we have a sidebar and header which contains a button that close/open the sidebar and we need that button to toggle some property inside the sidebar component :
in main.js import that library and create an instance of that emitter and define as a global property:
Installation :
npm install --save mitt
main.js:
import { createApp } from 'vue'
import App from './App.vue'
import mitt from 'mitt';
const emitter = mitt();
const app = createApp(App);
app.config.globalProperties.emitter = emitter;
app.mount('#app');
in header emit the toggle-sidebar event with some payload :
In sidebar receive the event with the payload: