@lartisanenumerique/nuxt-snackbar

Snackbar légère et personnalisable pour Nuxt 4, avec quatre types de notifications, empilement automatique, fermeture manuelle et durée configurable.

Ce package est indépendant de @lartisanenumerique/nuxt-cookie-consent.

Installation

npm install @lartisanenumerique/nuxt-snackbar

Configuration Nuxt

Ajouter le module dans nuxt.config.ts :

export default defineNuxtConfig({
  modules: ['@lartisanenumerique/nuxt-snackbar'],

  snackbar: {
    position: 'bottom-right',
    duration: 4000,
    max: 4,
  },
})

Puis rendre le composant une seule fois dans app/app.vue :

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>

  <Snackbar />
</template>

Le composant et le composable sont auto-importés : aucun import manuel n'est nécessaire dans l'application.

Afficher une notification

<script setup lang="ts">
const snackbar = useSnackbar()

function save() {
  snackbar.success('Vos modifications ont été enregistrées.')
}
</script>

Raccourcis

snackbar.success('Enregistrement réussi')
snackbar.error('Une erreur est survenue')
snackbar.info('Une information utile')
snackbar.warning('Une vérification est nécessaire')

Chaque raccourci accepte une durée personnalisée en second paramètre :

snackbar.success('Message court', 2000)
snackbar.error('Ce message reste affiché', 0)

Une durée de 0 désactive la fermeture automatique. La notification reste visible jusqu'à sa fermeture manuelle ou à l'appel de remove ou clear.

API de useSnackbar

| Propriété ou méthode | Paramètres | Retour | Description | | --- | --- | --- | --- | | messages | — | liste en lecture seule | Notifications actuellement affichées | | add | string ou objet | number | Ajoute une notification et retourne son identifiant | | success | text, duration? | number | Ajoute une notification de succès | | error | text, duration? | number | Ajoute une notification d'erreur | | info | text, duration? | number | Ajoute une notification d'information | | warning | text, duration? | number | Ajoute une notification d'avertissement | | remove | id | void | Ferme une notification précise | | clear | — | void | Ferme toutes les notifications |

Méthode add

add accepte directement un texte :

const id = snackbar.add('Une notification simple')

Ou un objet complet :

const id = snackbar.add({
  text: 'Le paiement a échoué',
  type: 'error',
  duration: 8000,
})

Types acceptés :

type SnackbarType = 'success' | 'error' | 'info' | 'warning'

L'identifiant retourné permet de fermer ultérieurement la notification :

const id = snackbar.info('Traitement en cours…', 0)

// Une fois le traitement terminé :
snackbar.remove(id)
snackbar.success('Traitement terminé')

Fermer toutes les notifications

snackbar.clear()

Options

| Option | Type | Valeur par défaut | Description | | --- | --- | --- | --- | | position | SnackbarPosition | bottom-right | Position du groupe de notifications | | duration | number | 4000 | Durée par défaut en millisecondes | | max | number | 4 | Nombre maximal de notifications visibles |

Positions disponibles :

top-left
top-center
top-right
bottom-left
bottom-center
bottom-right

Lorsque la limite max est atteinte, la notification la plus ancienne est retirée.

Personnalisation visuelle

Le style utilise des variables CSS. Elles peuvent être redéfinies dans la feuille de styles globale du projet :

.lan-snackbar-host {
  --lan-snackbar-radius: 0.75rem;
  --lan-snackbar-shadow: 0 10px 30px rgb(0 0 0 / 12%);
  --lan-snackbar-text: #2f2d33;
  --lan-snackbar-surface: #fff;

  --lan-snackbar-success: #d4e3d4;
  --lan-snackbar-error: #eecece;
  --lan-snackbar-info: #e5effb;
  --lan-snackbar-warning: #fff0cf;

  --lan-snackbar-success-accent: #6ea171;
  --lan-snackbar-error-accent: #c65c5c;
  --lan-snackbar-info-accent: #83a9d1;
  --lan-snackbar-warning-accent: #d6a956;
}

Accessibilité

Les notifications utilisent une zone aria-live="polite" et restent fermables manuellement. Les animations sont désactivées lorsque la préférence système prefers-reduced-motion est active.