vue-alerts v0.2.0

Installing Vue-Alerts

Vue-Alert is published on npm. You can add it to your project via:

yarn

yarn add vue-alerts

npm

npm install vue-alerts

Using Vue-Alerts

To use Vue-Alerts, you'll need to import the plugin.

In main.js, or the JavaScript where initialised Vue, add:

import Vue from 'vue' // Should have already been imported in the file.
import vueAlerts from "vue-alerts"

Then, register the plugin with Vue:

Vue.use(vueAlerts, options)

Once that's done, specify a root Vue Model for the alerts. Please note that you may only register one root VM per application so we would recommend that to be the root VM of your app, i.e. in App.vue:

<div id="app">

  <!-- BEGIN INSERT -->
  <alert></alert>
  <!-- END INSERT -->

  <router-view></router-view>
  
</div>

You're all set! Now you can refer to the module through:

this.$alert

in any VM.

Presenting an alert with async present()

Parameters

Additional Parameters

Those configurations can be passed into the function via #3. They're essentially named keyword arguments.

You typically don't need to worry about those additionally configurations.

Resolution

present() will never reject. It resolves after the alert is presented, as it moves to the front of the presentation queue.

When it resolves, it will yield an integer alert identifier. With the identifier, you can:

• Access the alert info

this.$alert.alerts[identifier]

It's read-only

• Dismiss the alert.

Documented below. Check out dismiss()

Example

this.$alert.present("Vue-Alerts Message", "Helloworld!", [
  {
    title: "OK",
    type: "cancel",
  }
], {
  preventKeyboard: false
})

For more examples, check out the demo

Defining the Actions

The actions parameter is an array of objects that defines the type of action and its handler.

General Structure

actions = [
  { action },
  { action },
  ...
]

The Action Object

For each action object, you can define the following properties:

Handling Action Calls

When a user clicks on an action, the handler will be called with the following parameters:

The handler can be either async or sync. In either case, the handler should return a boolean value indicating whether the alert should be automatically dismissed.

Example

async function handler(){
  let response = await SomeAPIRequest()
  if(response.status === true) {
    console.log("Success")
    // return true is not neccessary here. It dismissess by default.
  } else {
    this.$alert.present("Request Failed", response.message)
    return false // Stops the current alert from dismissing
  }
}

this.$alert.present("Get API?", "Are you sure?", [
  {
    title: "Yes",
    type: "normal",
    handler: handler
  },
  {
    title: "No",
    type: "cancel",
  }
])

Dismissing an alert programatically with async dismiss()

Note that, by default, the alert will dismiss after an action is clicked and the handler does not return false. You would not need to call dismiss() manually.

However, if for some reasons you want to dismiss the alert programmatically, you can do so by calling dismiss()

Parameters

Additional Parameters

Resolution

present() will never reject. It resolves after the alert is dismissed with a boolean value indicating whether or not the alert was dismissed.

Demo

Check out the demo here:

• Demo
• Demo (Source Code)

License

Vue-Alerts is licensed under the Apache License 2.0 .

Copyright @yyjlincoln