Vue-snacks NPM

Cover

Vue Snacks

Vue Snacks is a toast notification component for Vue.js 3, developed with TypeScript. It offers a simple and flexible way to display temporary "toast" style notifications in your application.

Installation

First, install the package via npm:

npm install vue-snacks

Configuration

In the main.ts file, import and register the Vue Snacks plugin in the main Vue instance:

import { createApp } from 'vue';
import App from './App.vue';
import VSnacks from 'vue-snacks/dist';

const app = createApp(App);
app.use(VSnacks);
app.mount('#app');

Usage

Inside a Vue component, you can display a notification by calling the $snack.notify method:

import { defineComponent, getCurrentInstance } from 'vue';

export default defineComponent({
  setup() {
    const { proxy } = getCurrentInstance() as any;

    const showNotification = () => {
      proxy.$snack.notify({
        position: 'top-center',
        type: 'success',
        duration: 3000,
        title: 'Success!',
        message: 'The operation was successfully completed.',
      });
    };

    return { showNotification };
  },
});

Customization

Vue Snacks provides a range of options to tailor notifications to your specific needs. You can adjust the following parameters:

position: Controls where the notification appears on the screen. Options include:
- 'top-left': Top left corner
- 'top-center': Top center of the screen
- 'top-right': Top right corner
- 'bottom-left': Bottom left corner
- 'bottom-center': Bottom center of the screen
- 'bottom-right': Bottom right corner
type: Defines the visual style of the notification to convey the appropriate message:
- 'success': Green background, used for success messages
- 'error': Red background, used for error messages
- 'warning': Orange background, used for warnings
- 'info': Blue background, used for informational messages
- 'details': Gray background, for detailed or neutral information
duration: Sets the length of time (in milliseconds) the notification remains visible. For example, a value of 3000 keeps the notification displayed for 3 seconds before it fades out. If not set, the default duration is used.
title: The main headline of the notification. This is typically a brief, attention-grabbing phrase that conveys the core message.
message: The detailed text of the notification. This should provide additional context or information related to the title.

By fine-tuning these parameters, you can create a notification system that fits seamlessly with your application's design and user experience.

Color Documentation

Type	Color	Description
`success`	Green (#4caf50)	Used for success messages to indicate a positive outcome.
`error`	Red (#f44336)	Used for error messages to signal a problem or failure.
`warning`	Yellow (#ff9800)	Used for warning messages to draw attention to potential issues.
`info`	Blue (#2196f3)	Used for informational messages to provide general updates or notifications.
`details`	Gray (#757575)	Used for neutral or detailed information that doesn't fall into the other categories.