vue-grille-pain

Lightweight Toast notifications for Vue3 composition API

Introduction

vue-grille-pain is a light toast notification plugin for Vue3.

• Fully typed configuration
• Provides a custom hook for usage with the composition API
• Toasts can be individually customized
• Several animations to chose from
• Light and dark theme
• ...and more options

Check the demo here

Installation

Using npm

npm install vue-grille-pain

Using yarn

yarn add vue-grille-pain

Using CDN

<!-- Insert the Vue core before -->
<script src="https://unpkg.com/vue-grille-pain"></script>

<script>
  createApp(App)
    .use(GrillePain)
    .mount("#app");
</script>

Usage

Register the plugin wherever you create your Vue App:

import { createApp } from Vue;
import App from "./App.vue";
import GrillePain from "vue-grille-pain";

createApp(App)
  .use(GrillePain)
  .mount("#app");

You can also pass some options:

import { createApp } from Vue;
import App from "./App.vue";
import GrillePain, { GpOptions } from "vue-grille-pain";

const opts: GpOptions = {
  // your default configuration, see the options section for details
};

createApp(App)
  .use(GrillePain, opts)
  .mount("#app");

Then in any component you can now import the useGrillePain hook like so:

import { useGrillePain } from "vue-grille-pain";

const { toast } = useGrillePain();

// Generate a toast
toast({
  title: "Hello",
  message: "Very cool message!",
});

You can override most of your default configuration by passing some options:

import { useGrillePain, GpToast } from "vue-grille-pain";

const { toast } = useGrillePain();

const opts: GpToast = {
  title: "Hello",
  message: "Very cool message!",
  // rest of your toast config, see the options section for details
};

// Generate customized toast
toast(opts);

Options

Plugin configuration

These parameters can be passed when registering the plugin.

| Parameter | Type | Default | Description | | ---------------- | ----------- | ------------------------ | ----------------------------------------------------------------------------------------------------- | | position | GpPosition | GpPosition.BOTTOM_LEFT | Position of the toasts container | | order | GpOrder | GpOrder.ASC | Toasts ordering (oldest / newest on top) | | fullWidth | boolean | false | Toasts take up the full screen width (useful for mobile) | | animation | GpAnimation | GpAnimation.SLIDE_UP | Toasts display animation | | theme | GpTheme | GpTheme.LIGHT | Toasts theme | | fadeAfter | number | 5000 | Time in ms before toasts fade (0 for never) | | closeOnClick | boolean | false | Whether toasts should be closable on mouse click (by default, toasts are closable via a close button) | | maxMessageLength | number | undefined | If set, texts of a greater length will be truncated and the toasts will be expandable | | displayTimer | boolean | false | Displays a pie timer showing time before toasts fade (must have fadeAfter > 0) |

position, order and fullWidth are global parameters, meaning they concern the toasts container and cannot be overridden on a single toast.

Toast customization

These parameters can be passed when generating a toast.

| Parameter | Type | Default | Description | | ---------------- | ------------------ | ---------------------- | -------------------------------------------------------------------------------------------------- | | title | string | undefined | Displays a header with the title text | | message | string | '' | Toast message | | type | GpToastType | GpToastType.INFO | Type of toast (message, success, warning, error) | | className | string | string[] | undefined | Custom CSS classes | | animation | GpAnimation | GpAnimation.SLIDE_UP | Toast display animation | | theme | GpTheme | GpTheme.LIGHT | Toast theme | | fadeAfter | number | 5000 | Time in ms before toast fades (0 for never) | | closeOnClick | boolean | false | Whether toast should be closable on mouse click | | maxMessageLength | number | undefined | If set and the toast text length is greater, it will be truncated and the toast will be expandable | | displayTimer | boolean | false | Displays a pie timer showing time before toast fades (must have fadeAfter > 0) |

Notes

This is just a sandbox project to play around with the new Vue3 features. Feel free to contact me with requests or suggestions, or post pull requests and issues directly on GitHub.