I'm making an admin dashboard and I need to ask for data (for example when creating or updating data) a lot. I am already using vue-sweetalert2 which made me aware of how easy it is to use this.$swal.fire().then()...

I was wondering, how would I go about making my own kind of thing like that (without using TypeScript)?

let reply = await this.$ask(fields)
alert("You entered: " + reply.yourname.answer)

Then in the component that I load in on every page, I would have a modal which takes the fields and allows for user input. When a user clicked submit or exited the modal, it needs to return a / the value(s).

I'm thinking of using it this way:

// Ask for new team name & description
let modalResult = await this.$ask({
  fields: [
    {
      title: "Team name",
      placeholder: "Give youre team a name!",
      key: "teamName",
      type: "text"
    }, {
      title: "Team description",
      placeholder: "What's your team about?",
      key: "teamDescription",
      type: "text"
    }
  ],
  modal: {
    variant: "primary",
    icon: null,
    title: "Make a new team",
    confirmButtonText: "Create team",
    cancelButtonText: "Cancel"
  }
});

console.log("Team name: " + modalResult.data.teamName);
console.log("Team description: " + modalResult.data.teamDescription);

However, I honestly have no idea how I'd go about making this possible. What I've thought of:

• Mixins: Of what I've learnt so far, I don't know how to put a template file in it. (so a .vue file, only a .js file).

Here's a screenshot of : what I'm trying to say

Thanks in advance! :-)