@perseu-vue/vuetify-messenger

0.5.0 • Public • Published

vuetify-messenger

Installing

yarn add @perseu-vue/vuetify-messenger

Or

npm install @perseu-vue/vuetify-messenger

Setup

Register vuetify-messenger globally:

import Vue from "vue";
import VMessenger from "@perseu-vue/vuetify-messenger";

Vue.use(VMessenger);

Changing default messages

import Vue from "vue";
import VMessenger from "@perseu-vue/vuetify-messenger";

Vue.use(VMessenger, {
  texts: {
    confirmTitle: "Confirmação",
    successTitle: "Pronto",
    errorTitle: "Ops",
    closeText: "Fechar",
    yesText: "Sim",
    noText: "Não"
  }
});

Use the <v-messenger></v-messenger> component in the page that you want use it

If you're ussing SPA, use it on the SPA's default page. like App.vue or default.vue (for Nuxt)

Alert usage

Sucess alert

this.$messenger.showSuccessAlert("Some message");

Success alert GIF

Error alert

this.$messenger.showErrorAlert("Some message");

Error alert GIF

Confirm usage

this.$messenger.showConfirmAlert(
  "Some message",
  () => {
    console.log("Yes clicked");
  },
  () => {
    console.log("No clicked");
  }
);

Confirm GIF

Snackbar usage

Sucess snackbar

this.$messenger.showSuccessSnackbar("Some message");

Success snackbar GIF

Error snackbar

this.$messenger.showErrorSnackbar("Some message");

Error snackbar GIF

Readme

Keywords

none

Package Sidebar

Install

npm i @perseu-vue/vuetify-messenger

Weekly Downloads

17

Version

0.5.0

License

MIT

Unpacked Size

5.18 MB

Total Files

36

Last publish

Collaborators

  • alisonoghino