How to create a Vue component with exportable functions

Question

I'm trying to understand how to create a component using exportable functions. For example: I want to create a message box that will appear on the screen when the showMessage() method imported from this component is called in other components. In the message box component I want to describe the logic and template. How to achieve this? Any documentation/articles on this, if any, would be greatly appreciated.

Answer 1

1. Mount your message component in App.vue (or other global files),

2. Control its props through functions in the store

For example

<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({{});

// 做一些响应式的事情..
const showMessage(title, _message) => {
   message.title = title;
   message.message = _message;
   message.isOpen = true;
}
...

You can then call the message anywhere using piniaStore().showMessage(...)

(This code is just a concept, if you want it to work properly, you need to develop it...)

---

But I think you can use Quasar framework - Dialog ($q.dialog is exactly what you need!) Or Ionic framework - alert, Vuetify - dialog api, etc. (each framework has these things)