How to create Vue component with exportable function?

Question

I am trying to understand how to create components with exportable functions. For example: i want to create message box, that will appear on screen when in some other component i call method showMessage() imported from this component. In message box component i want to describe logic and template. How to reach this? Very appreciate any docs/articles about this, if any.

Answer 1

1. mount your message component in App.vue (or in other global file),

2. control its props with function in store

like

<MyMessage :value="isOpen" :title="title" :message="message" />

...
<script setup>
...
const isOpen = reactive(piniaStore().message.isOpen);
const title = computed (() => piniaStore().message.title);
...
</script>

// store
const message = reactive({{});

// do reactive things..
const showMessage(title, _message) => {
   message.title = title;
   message.message = _message;
   message.isOpen = true;
}
...

then you can call the message with piniaStore().showMessage(...) wherever you want

(this code is a concept, you have to develop if you want to run properly..)

---

but i think you can use Quasar framework - Dialog ($q.dialog is exactly what you need!) or Ionic framework - alert, Vuetify - dialog api etc (every framework has these things)