# vue-alertify-customized

> altertifyjs wrapper for vue & customized

Latest version **1.1.1** (published 2022-01-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-alertify-customized
pnpm add vue-alertify-customized
yarn add vue-alertify-customized
bun add vue-alertify-customized
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2022-01-19 |
| First published | 2022-01-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 414 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 11 |
| Author | yuanchieh,cheng |
| Maintainers | starlight93 |
| Keywords | vue, vuejs, alert, alertifyjs |

## Links

- npm: https://www.npmjs.com/package/vue-alertify-customized
- Repository: https://github.com/sj82516/vue-alertify
- Homepage: https://github.com/sj82516/vue-alertify#readme
- Issues: https://github.com/sj82516/vue-alertify/issues
- npm.io page: https://npm.io/package/vue-alertify-customized

## Dependencies (6)

- [vue](https://npm.io/package/vue.md) ^2.5.2
- [babel-cli](https://npm.io/package/babel-cli.md) ^6.26.0
- [cross-env](https://npm.io/package/cross-env.md) ^5.1.1
- [alertifyjs](https://npm.io/package/alertifyjs.md) ^1.11.0
- [babel-core](https://npm.io/package/babel-core.md) ^6.26.3
- [babel-preset-env](https://npm.io/package/babel-preset-env.md) ^1.7.0

## Alternatives

- [update-check](https://npm.io/package/update-check.md) — 4.0M weekly downloads
- [react-native-onesignal](https://npm.io/package/react-native-onesignal.md) — 134.5K weekly downloads
- [react-redux-toastr](https://npm.io/package/react-redux-toastr.md) — 33.7K weekly downloads
- [@nocobase/plugin-notification-manager](https://npm.io/package/@nocobase/plugin-notification-manager.md) — 2.0K weekly downloads
- [react-simple-toasts](https://npm.io/package/react-simple-toasts.md) — 1.9K weekly downloads

## Recent versions

- 1.1.1 (latest) — 2022-01-19

## README

# Credits

This is the Vue@2.x plugin wrapped functions of [Alertifyjs](https://github.com/MohammadYounes/AlertifyJS) which is maintained by MohammadYounes
AlertifyJS provides beautiful popup alert / confirm / prompt / messaging views, so you can simply call the function and no need to handle views anymore.

Every method is just a wrapper and return alertify.js function.  
So you can use chain method like [alertify.prompt('Input (text):').set('type', 'text'); ](https://alertifyjs.com/prompt/type.html).  
Please check `promptWithTypeColor` methods.

# Installation

```
npm install vue-alertify
```

vue-alertify would import the stylesheet of Alertify automatically, so you don't need to import by yourself.

# Demo

[jsfiddle](https://jsfiddle.net/sj82516/vv9v9crt/)

# How to use

```javascript
import Vue from 'vue';
import VueAlertify from 'vue-alertify';

Vue.use(VueAlertify);

var vm = new Vue({
  el: '#main',
  methods: {
    success: function() {
      this.$alertify.success('success');
    },
    alert: function() {
      this.$alertify.alert('This is alert', () =>
        this.$alertify.warning('alert is closed')
      );
    },
    alertWithTitle: function() {
      this.$alertify.alert('alert title', 'This is alert', () =>
        this.$alertify.warning('alert is closed')
      );
    },
    confirm: function() {
      this.$alertify.confirm(
        'This is comfirm',
        () => this.$alertify.success('ok'),
        () => this.$alertify.error('cancel')
      );
    },
    confirmWithTitle: function() {
      this.$alertify.confirm(
        'confirm title',
        'This is comfirm',
        () => this.$alertify.success('ok'),
        () => this.$alertify.error('cancel')
      );
    },
    prompt: function() {
      this.$alertify.prompt(
        'This is prompt',
        'default value',
        (evt, value) => this.$alertify.success('ok: ' + value),
        () => this.$alertify.error('cancel')
      );
    },
    promptWithTitle: function() {
      this.$alertify.promptWithTitle(
        'prompt title',
        'This is prompt',
        'default value',
        (evt, value) => this.$alertify.success('ok: ' + value),
        () => this.$alertify.error('cancel')
      );
    },
    promptWithTypeColor: function() {
      this.$alertify
        .promptWithTitle(
          'prompt title',
          'This is prompt',
          'default value',
          (evt, value) => this.$alertify.success('ok: ' + value),
          () => this.$alertify.error('cancel')
        )
        .set('type', 'color');
    },
  },
  mounted: function() {
    setTimeout(() => {
      this.$alertify.success('Hell Alertify');
    }, 500);
  },
});
```

# Default options

The defaults of alertify can be changed via the `options` parameter of the `use` statement.

```javascript
Vue.use(VueAlertify, {
  // dialogs defaults
  autoReset: true,
  basic: false,
  closable: true,
  closableByDimmer: true,
  frameless: false,
  maintainFocus: true, // <== global default not per instance, applies to all dialogs
  maximizable: true,
  modal: true,
  movable: true,
  moveBounded: false,
  overflow: true,
  padding: true,
  pinnable: true,
  pinned: true,
  preventBodyShift: false, // <== global default not per instance, applies to all dialogs
  resizable: true,
  startMaximized: false,
  transition: 'pulse',

  // notifier defaults
  notifier: {
    // auto-dismiss wait time (in seconds)
    delay: 5,
    // default position
    position: 'top-right',
    // adds a close button to notifier messages
    closeButton: false,
  },

  // language resources
  glossary: {
    // dialogs default title
    title: 'AlertifyJS',
    // ok button text
    ok: 'OK',
    // cancel button text
    cancel: 'Cancel',
  },

  // theme settings
  theme: {
    // class name attached to prompt dialog input textbox.
    input: 'ajs-input',
    // class name attached to ok button
    ok: 'ajs-ok',
    // class name attached to cancel button
    cancel: 'ajs-cancel',
  },
});
```

Other usage please checkout [Alertifyjs documentation](http://alertifyjs.com/guide.html)

# Contributors

Thanks [Jonathan Andersson](https://github.com/ja1984) for adding methods with title setting.
Thanks [simonvomeyser](https://github.com/simonvomeyser) for adding Alertifyjs default override.

# Resource

1. Alertifyjs: https://github.com/MohammadYounes/AlertifyJS
2. How to build commonjs/es/UMD module: http://dev.topheman.com/package-a-module-for-npm-in-commonjs-es2015-umd-with-babel-and-rollup/
3. Load Css by js: https://stackoverflow.com/questions/4724606/how-to-use-javascript-to-check-and-load-css-if-not-loaded

---
_Source: https://npm.io/package/vue-alertify-customized · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._