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