Nuxt Alert

Un module Nuxt pour gérer les alertes avec Pinia et Bootstrap.

• ✨  Release Notes

Fonctionnalités

• 🎯  Gestion d'état avec Pinia
• 🎨  Composants Vue réactifs
• 🔧  Configuration flexible
• 📱  Design responsive avec Bootstrap
• ⚡  Auto-dismiss configurable
• 🎭  Animations fluides
• 🎨  Icônes Bootstrap Icons

Installation rapide

Installez le module dans votre application Nuxt :

npm install nuxt-alert

Ajoutez le module à votre nuxt.config.ts :

export default defineNuxtConfig({
  modules: [
    '@pinia/nuxt',
    'nuxt-alert'
  ]
})

Utilisation

Avec le store Pinia

<template>
  <div>
    <button @click="showAlert">Afficher une alerte</button>
    <AlertContainer />
  </div>
</template>

<script setup>
import { useAlertStore } from 'nuxt-alert'

const alertStore = useAlertStore()

const showAlert = () => {
  alertStore.success('Opération réussie !')
}
</script>

Avec le plugin global

<template>
  <div>
    <button @click="showAlert">Afficher une alerte</button>
    <AlertContainer />
  </div>
</template>

<script setup>
const { $alert } = useNuxtApp()

const showAlert = () => {
  $alert.success('Opération réussie !')
}
</script>

Types d'alertes disponibles

// Succès
alertStore.success('Message de succès', 'Titre optionnel')

// Erreur
alertStore.error('Message d\'erreur', 'Titre optionnel')

// Avertissement
alertStore.warning('Message d\'avertissement', 'Titre optionnel')

// Information
alertStore.info('Message d\'information', 'Titre optionnel')

Configuration

export default defineNuxtConfig({
  modules: [
    '@pinia/nuxt',
    'nuxt-alert'
  ],
  nuxtAlert: {
    position: 'top-right', // 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center'
    useBootstrap: true // Active Bootstrap pour le style (par défaut: true)
  },
  css: [
    'bootstrap-icons/font/bootstrap-icons.css' // Pour les icônes
  ]
})

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

Publication

Pour publier le module sur npm :

# 1. Build le module
npm run prepack

# 2. Vérifier les types
npm run test:types

# 3. Vérifier le linting
npm run lint

# 4. Créer le package
npm pack

# 5. Se connecter à npm (si pas déjà fait)
npm login

# 6. Publier
npm publish

Ou utilisez le script de publication :

./scripts/publish.sh

Structure du projet

src/
├── components/           # Composants Vue
│   ├── Alert/           # Composants d'alerte modulaires
│   └── AlertContainer/  # Container pour les alertes
├── composables/         # Composables Vue
├── stores/             # Store Pinia
├── types/              # Types TypeScript
├── runtime/            # Plugin runtime
└── module.ts           # Configuration du module