Notinoti

Notinoti is a simple notification system for your vuejs application Notinoti es un sistema de notificaciones simple para tu aplicación vuejs

• Installation
• Usage
• slots

Importants requirements

• Vue 3
• Vite
• Tailwindcss

Installation

npm install notinoti

Usage

1. Import the component and put it in your App.vue template

// App.vue
<template>
    <RouterView />
    <NotiProvider />
</template>

<script setup lang="ts">
  import {NotiProvider} from 'notinoti'
</script>

• You can customize the NotiProvider' component by passing props to the NotiProvider component

// class object for the notification container, title, msg

• classProp example

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

import { useNotification } from 'notinoti'

const { addNotification } = useNotification()

addNotification({
  title: 'Hello',
  message: 'This is a notification',
  type: 'success'
})

3. method addNotification() options

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;
}

slots