Skip to content

Beautiful flash component build with VueJs and Tailwindcss

License

Notifications You must be signed in to change notification settings

MiloudiMohamed/vue-flashy

Repository files navigation

vue-flashy

Beautiful alert component made with VueJs and Tailwindcss.

alt text

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.