Vue3 Modern Toast

Un composant Toast moderne et élégant pour Vue 3 et Nuxt 3.

Caractéristiques

• 🚀 Support de Vue 3 et Nuxt 3
• 🎨 Styles modernes et personnalisables
• ✨ Animations fluides
• 📱 Responsive design
• 🔧 Configuration simple et flexible
• 🌈 4 types de notifications (success, error, warning, info)
• 📦 Léger et performant
• 🔄 Support SSR

Installation

yarn add vue3-modern-toast
# ou
npm install vue3-modern-toast

Configuration dans Nuxt 3

1. Créez un plugin dans plugins/toast.ts :

import { defineNuxtPlugin } from '#app'
import VueToast, { createToast } from 'vue3-modern-toast'
import 'vue3-modern-toast/dist/style.css'

declare module '#app' {
  interface NuxtApp {
    $toast: ReturnType<typeof createToast>
  }
}

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueToast)
  
  const toast = createToast()
  
  return {
    provide: {
      toast
    }
  }
})

Utilisation

<template>
  <button @click="showToast">Show Toast</button>
</template>

<script setup lang="ts">
import { EToast } from 'vue3-modern-toast'

const { $toast } = useNuxtApp()

function showToast() {
  $toast.show({
    message: 'Hello World!',
    type: EToast.SUCCESS,
    duration: 3000,
    dismissible: true,
    icon: '✨'
  })
}
</script>

Configuration

Vous pouvez configurer l'apparence et le comportement des toasts globalement au démarrage de l'application :

import { EToast, ETextOverflow } from 'vue3-modern-toast'

const { $toast } = useNuxtApp()

// Configuration globale dans votre app.vue
$toast.configure({
  position: {
    top: 20,
    right: 20
    // Vous pouvez aussi utiliser bottom et left
  },
  styles: {
    fontFamily: 'Arial, sans-serif',
    fontSize: '14px',
    borderRadius: '8px',
    boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
    width: '300px',
    maxHeight: '100px',
    textOverflow: ETextOverflow.ELLIPSIS,
    types: {
      [EToast.SUCCESS]: {
        backgroundColor: '#48BB78',
        color: '#ffffff',
        borderColor: '#2F855A'
      },
      [EToast.ERROR]: {
        backgroundColor: '#F56565',
        color: '#ffffff',
        borderColor: '#C53030'
      },
      [EToast.WARNING]: {
        backgroundColor: '#ED8936',
        color: '#ffffff',
        borderColor: '#C05621'
      },
      [EToast.INFO]: {
        backgroundColor: '#4299E1',
        color: '#ffffff',
        borderColor: '#2B6CB0'
      }
    }
  }
})

Options de Configuration

| Option | Type | Description | |--------|------|-------------| | position | Object | Position des notifications | | position.top | number | Distance du haut en pixels | | position.right | number | Distance de la droite en pixels | | position.bottom | number | Distance du bas en pixels | | position.left | number | Distance de la gauche en pixels | | styles | Object | Styles globaux | | styles.fontFamily | string | Police de caractères | | styles.fontSize | string | Taille de la police | | styles.borderRadius | string | Rayon des coins arrondis (ex: '8px', '0.5rem') | | styles.boxShadow | string | Ombre de la notification (ex: '0 4px 6px rgba(0, 0, 0, 0.1)') | | styles.width | string | Largeur des notifications (ex: '300px', '100%') | | styles.maxHeight | string | Hauteur maximale (ex: '100px', 'auto') | | styles.textOverflow | ETextOverflow | Gestion du texte long ('ellipsis' ou 'wrap') | | styles.types | Object | Styles par type de notification |

Options des Notifications

| Option | Type | Default | Description | |--------|------|---------|-------------| | message | string | required | Le message à afficher | | type | EToast | INFO | Type de notification (SUCCESS, ERROR, WARNING, INFO) | | duration | number | 3000 | Durée d'affichage en ms (0 pour désactiver la fermeture auto) | | dismissible | boolean | true | Si la notification peut être fermée manuellement | | icon | string | '' | Emoji ou texte à afficher comme icône |

Types disponibles

enum EToast {
  SUCCESS = 'success',
  ERROR = 'error',
  WARNING = 'warning',
  INFO = 'info'
}

enum ETextOverflow {
  ELLIPSIS = 'ellipsis',
  WRAP = 'wrap'
}

interface ToastOptions {
  message: string
  type?: EToast
  duration?: number
  dismissible?: boolean
  icon?: string
}

interface ToastConfig {
  position?: {
    top?: number
    right?: number
    bottom?: number
    left?: number
  }
  styles?: {
    fontFamily?: string
    fontSize?: string
    borderRadius?: string
    boxShadow?: string
    width?: string
    maxHeight?: string
    textOverflow?: ETextOverflow
    types?: {
      [key in EToast]?: {
        backgroundColor: string
        color: string
        borderColor: string
      }
    }
  }
}

License

MIT