Vue Notify Lib

A customizable notification library for Vue 3 applications.

Features

• 🚀 Simple API for creating notifications
• 🎨 Multiple notification types: success, error, info, warning, and custom
• 📱 Customizable positioning: top-right, top-left, bottom-right, bottom-left
• ⏱️ Auto-dismiss with configurable duration
• 🔄 Stacked notifications support
• ✨ Smooth animations for entry and exit
• 🔌 Works as a Vue plugin or composable
• 📦 Built with Vue 3 and JavaScript

Installation

npm install vue-notify-lib

or

yarn add vue-notify-lib

Usage

As a Vue Plugin

Register the plugin in your main.js file:

import { createApp } from 'vue'
import App from './App.vue'
import { NotifyPlugin } from 'vue-notify-lib'

const app = createApp(App)

// Use the plugin with default configuration
app.use(NotifyPlugin)

// Or with custom configuration
app.use(NotifyPlugin, {
  config: {
    duration: 5000,
    position: 'top-right'
  }
})

app.mount('#app')

Then use it in your components:

<template>
  <button @click="$notify.success('Operation successful!')">
    Show Success Notification
  </button>
</template>

As a Composable

Import and use the composable in your components:

<template>
  <button @click="notify.success('Guardado con éxito')">Guardar</button>
</template>

<script setup>
import { useNotify } from 'vue-notify-lib'
const notify = useNotify()
</script>

API

Notification Types

// Success notification
notify.success('Operation successful!')

// Error notification
notify.error('Something went wrong!')

// Info notification
notify.info('Did you know?')

// Warning notification
notify.warning('Be careful!')

// Custom notification
notify.custom('Custom notification')

Custom Configuration

You can customize each notification by passing an options object:

notify({
  type: 'error',
  message: 'Something went wrong!',
  duration: 5000,
  position: 'top-right'
})

Available Options

Option	Type	Default	Description
type	String	'info'	Notification type ('success', 'error', 'info', 'warning', 'custom')
message	String	(required)	Notification message
duration	Number	3000	Duration in milliseconds before auto-dismiss (0 for no auto-dismiss)
position	String	'top-right'	Position of the notification ('top-right', 'top-left', 'bottom-right', 'bottom-left')

Methods

Method	Description
notify(options)	Show a notification with the specified options
success(message)	Show a success notification
error(message)	Show an error notification
info(message)	Show an info notification
warning(message)	Show a warning notification
custom(message)	Show a custom notification
remove(id)	Remove a specific notification by ID
clear()	Remove all notifications
setConfig(config)	Update the global configuration
resetConfig()	Reset the global configuration to defaults

Global Configuration

You can set global configuration when registering the plugin:

app.use(NotifyPlugin, {
  config: {
    duration: 5000,
    position: 'bottom-right'
  }
})

Or using the setConfig method:

import { notify } from 'vue-notify-lib'

notify.setConfig({
  duration: 5000,
  position: 'bottom-right'
})

Documentation

A comprehensive documentation website is available to help you get started with Vue Notify Lib:

1. Clone the repository
2. Install dependencies: npm install
3. Run the documentation site: npm run docs:dev
4. Open your browser at http://localhost:3000

The documentation includes:

• Getting Started guide
• API Reference
• Live Demo with interactive playground
• Customization guide
• FAQ and Troubleshooting

Demo

To run the demo locally:

1. Clone the repository
2. Install dependencies: npm install
3. Run the demo: npm run dev
4. Open your browser at http://localhost:5173

License

MIT