Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

Using toastr in Vue Component


Hi all,

I'm playing around with the Metronic demo 1 (Vue Version).

How can I trigger a Toastr when the component is mounted? I have no idea. I can't find anything in the docs for the Vue version of the template.

Regards


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (4)


A quick update. I had to do
import { ElNotification } from "element-plus";
in my view and to trigger a notification.

To trigger the notification simply:

methods: {
triggerNotification() {
ElNotification({
title: "Success",
message: "This is a success message",
type: "success",
});
},
},


Thanks for your help.



Hi,

Glad to hear it worked for you!

Please let us know if you have any additional questions on this topic or anything else.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Hi Lauris,

thanks for your reply. Is there also a demo of the usage of Element Plus Notification in demo 1? I can't find this component.

Regards
Andrew



Hi,

Thank you for reaching out to us.

By default, in our Vue theme, you can use the Element Plus Notification component https://element-plus.org/en-US/component/notification.html.

Also, as an alternative you can install and use vue-toast-notification, this component is not included in Metronic default package but we have plans on using it in the future releases.

Regards,
Lauris Stepanovs,
Keenthemes Support Team


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(