vue-flashy

Beautiful alert component made with VueJs and Tailwindcss.

Important

The component themes are based on Tailwindcss, so make sure you are using it otherwise this won't work.

Installation

Via YARN

yarn add vue-flashy

Via NPM

npm i vue-flashy

Step 2: Add it to Vue

Include plugin in your main.js file.

import Flashy from 'vue-flashy'

Vue.use(Flashy)

Usage

Now, for global usage inside your App.vue add the following tag

<flashy></flashy>

then call it from anywhere in the app:

this.$flashy.push('Lorem ipsum dolor sit.')

More Control

You may also change the default theme color, display delay, add title

<flashy
    :delay="1000"
    font="font-semibold"
>
</flashy>

And

this.$flashy.push(Message, Theme, Title);

Available props:

| Prop | Type | Value | Default | Required | | -------------- | -------- | --------------------------------------------------------- | ------- | -------- | | Message | String | --- | --- | true | | Title | String | --- | --- | false | | Theme | String | primary, success, danger, warning, light, grey | primary | false | | Delay | Integer | --- | 3000ms | false | | Font | Integer | Any of tailwindcss font classe | --- | false |

Issues and Contribution

If you find any bug or problem please open an issue or create a pull request, Thanks!.

Licence

The MIT License (MIT). Please see License File for more information.