@socialgouv/dsfr-toaster-nuxt-module

Module Nuxt Dsfr Toaster

Module Nuxt Dsfr Toaster pour afficher des alertes.

• ✨  Release Notes

Features

• Duration : Permet de limiter dans le temps l'alerte
• maxToasts : Détruit les toasters au bout d'un délai si trop de toasts à l'écran
• Accessibilité : Ajout du role alert sur les success et error
• Dsfr : Utilisation du DsfrAlert

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxi module add @socialgouv/dsfr-toaster-nuxt-module

That's it! You can now use Module Nuxt Dsfr Toaster in your Nuxt app ✨

Utilisation

Créer une balise <DsfrToaster /> dans un layout puis appeler useToaster n'importe où.

const toaster = useToaster();
onMounted(() => {
  toaster.info({
    description: "Va disparaître",
    duration: 2500,
  });
  toaster.info({
    title: "title",
    description: "Small",
    small: true,
  });
  toaster.info({
    title: "title",
    description: "Not small",
    small: false,
  });
  toaster.warning({ description: "warning", closeable: false });
  toaster.success({ title: "Opération réussie", description: "success" });
  toaster.error({
    title: "Une erreur est survenue lors de la saubegarde",
    description: "Veuillez considérer un nouvel échantillon",
  });

  toaster.success({
    // Passe la description via en slot
    slots: {
      default: {
        component: DsfrBadge,
        attrs: { label: "Alerte avec un badge" },
      },
    },
  });
  toaster.success("youyou"); // Passe une description uniquement
});

Contribution

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release