Enable displaying custom templates inside default <notifications /> tag

[cvetlicnifractional]

I want to be able to - at the same time - have a global <notifications position="..." animation-type="..." /> tag, where default notifications will be instantiated and be able to pass custom html code through the slot system in some cases, so that, for instance, users' click on the button inside a toast can trigger some action in the component which called it.

Essentially, I want to be able to include <notifications> tag in multiple components (once globally and then wherever I need a custom template) and have them render "inside the same group", so that notifications from global handler dont visually overlap with those special cases.

If I currently include it more than once, without the "group" distinction between the <notifications ... tags, the toasts get duplicated.

On the other hand, if I do put different groups those that handle special template cases:

Global toast manager component looks like so:

  <notifications position="bottom left" animation-type="velocity">
    <template slot="body" slot-scope="{ item, close }">
      <notification :item-ref="item" :close="close" />
    </template>
  </notifications>

I create a new reusable notifications component (lets call it notification-custom), use a group prop and include it like such:

 <notifications position="bottom left" animation-type="velocity" :group="group">
    <template slot="body" slot-scope="{ item, close }">
      <notification :item-ref="item" :close="close"> <!-- I use this custom template for global notifications too, but in these special cases I also send in a slot, to change the body of a toast -->
        <slot />
      </notification>
    </template>
  </notifications>

and then use it in some random component like so:

<notification-custom :group="'top'">
      <button @click="doSth">
        Accept
      </button>
    </notification-custom>

notifications from global notification handler will get rendered on top of or below the special one that I want to include to be able to make that custom template.

I know I could pass in all sorts of props and callbacks inside data parameter to the global instance, but then I would have to v-if the content inside the global template for every new case I wanted to include, which could soon make it unreadable and is in itself complicated and error prone to use.

Do you have any suggestions on how to solve this? I am using nuxt v2 with composition api.

p.s. thanks for an awesome library

[github-actions[bot]]

Stale issue message