Vue notifications
npm install notinotiNotinoti is a simple notification system for your vuejs application
Notinoti es un sistema de notificaciones simple para tu aplicación vuejs
- Installation
- Usage
- slots
- Vue 3
- Vite
- Tailwindcss
##
npm install notinoti
1. Import the component and put it in your App.vue template
``html
// App.vue
`
- You can customize the NotiProvider' component by passing props to the NotiProvider component
| Name | Type | Default | Description |
|---|---|---|---|
| container-padding | number | 100 | padding of the container |
| classProp | Object | example below | class for the notifications |
`javascript
const classProp = {
container: 'container-class',
title: 'title-class',
msg: 'msg-class'
}
`
2. Use the addNotification method to add a notification in every component you want
`javascript
import { useNotification } from 'notinoti'
const { addNotification } = useNotification()
addNotification({
title: 'Hello',
message: 'This is a notification',
type: 'success'
})
`
3. method addNotification() options
`typescript
type NotiType = 'success' | 'info' | 'warning' | 'error' | 'default';
type NotiPosition = 'topRight'| 'topCenter' | 'topLeft' | 'bottomRight' | 'bottomCenter' | 'bottomLeft' | 'centerCenter' | 'centerLeft' | 'centerRight';
export interface NotinotiProps {
msg: string;
showTitle?: boolean;
title?: string;
icon?: string;
timeout?: number; // duration in ms
position?: NotiPosition;
type?: NotiType;
resetStyle?: boolean;
closeOnClick?: boolean;
closeOnHover?: boolean;
showCloseButton?: boolean;
showIcon?: boolean;
showProgressBar?: boolean;
}
`
`html
``