Vuejs Toast Notification App

imadbelasri Vuejs
VS

فهاد ل projet الجديد غادي نقادوا Vuejs Toast Notification App ف Toast Notification هي رسالة لي كتعرض للمستخدم فاش كيدير واحد ل action ولي كتكون كتعبر على واحد الحالة إما نجاح فشل تحذير أو معلومة بغيتي المستخدم يعرفها.


نظرة سريعة بالفيديو


1- إضافة ToastHeader Component

أول حاجة زيد projet جديد غادي نخدموا ب vite لي هي واحد tool لي كتخليك تزيد les projets ديالك بطريقة سريعة وسهلة.

باش تزيد ل projet دير هاد ل commande :

npm create vite@latest my-vue-app -- --template vue

بدل my-vue-app بالإسم لي بغيتي.

من بعد ف src زيد dossier components فيه زيد fichier سميه ToastHeader.vue ولي فيه هاد الكود :

 

                                                    
                                                        //
<template>
  <div class="toast-header text-white" :class="toast.bgColor">
    <i :class="toast.icon"></i>
    <strong class="me-auto">{{toast.title}}</strong>
    <small>{{toast.time}}</small>
    <button type="button" class="btn-close btn-close-white"
      @click="$emit('hide')"></button>
  </div>
</template>

<script>
export default {
  emits: ['hide'],
  props:{
    toast: {
      type: Object,
      default: function () {
        return { 
          toast: {
            icon: '',
            title: '',
            time: '',
            message: '',
            bgColor: '',
          },
        }
      }
    }
  }
}
</script>
                                                    
                                                

2- إضافة ToastBody Component

من بعد فنفس dossier components زيد fichier سميه ToastBody.vue ولي فيه هاد الكود :

                                                        
                                                            //
<template>
  <div class="toast-body">
    {{message}}
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>
                                                        
                                                    

3- إضافة Toast Component

من بعد فنفس dossier components زيد fichier سميه Toast.vue ولي فيه هاد الكود :

                                                        
                                                            //
<template>
  <div class="container my-4">
    <div class="row">
      <div class="col-md-12 d-flex justify-content-start">
        <button class="btn btn-sm btn-success me-2"
          @click="successToast">Success</button>
        <button class="btn btn-sm btn-danger me-2"
          @click="dangerToast">Danger</button>
        <button class="btn btn-sm btn-warning me-2"
          @click="warningToast">Warning</button>
        <button class="btn btn-sm btn-info me-2"
          @click="infoToast">Info</button>
      </div>
    </div>
    <div class="toast-container position-absolute" :class="position">
      <div class="toast" :class="show">
        <ToastHeader 
          :toast="toast"
          @hide="hideToast"
        />
        <ToastBody :message="toast.message" />
      </div>
    </div>
  </div>
</template>

<script>
import ToastHeader from './ToastHeader.vue';
import ToastBody from './ToastBody.vue';
import moment from 'moment';

export default {
  data() {
    return {
      toast: {
        icon: '',
        title: '',
        time: '',
        message: '',
        bgColor: '',
      },
      show: '',
      position: '',
      timeout: null
    }
  },
  components:{
    ToastHeader,
    ToastBody
  },
  watch: {
    show() {
      if(this.timeout){
        clearTimeout(this.timeout);
      }
      this.timeout = setTimeout(() => {
        this.show = '';
        this.position = '';
      },3000);
    }
  },
  methods:{
    successToast(){
      this.show = 'show';
      this.position = 'top-0 end-0';
      this.toast = {
        icon: 'fa-solid fa-check me-2',
        time: moment().fromNow(),
        title: 'success',
        bgColor: 'bg-success',
        message: 'Message sent successfully'
      }
    },
    dangerToast(){
      this.show = 'show';
      this.position = 'bottom-0 start-0';
      this.toast = {
        icon: 'fa-solid fa-bolt me-2',
        time: moment().fromNow(),
        title: 'danger',
        bgColor: 'bg-danger',
        message: 'Error try later again'
      }
    },
    warningToast(){
      this.show = 'show';
      this.position = 'top-0 start-50 translate-middle-x';
      this.toast = {
        icon: 'fa-solid fa-exclamation me-2',
        time: moment().fromNow(),
        title: 'warning',
        bgColor: 'bg-warning',
        message: 'Warning check your info'
      }
    },
    infoToast(){
      this.show = 'show';
      this.position = 'bottom-0 end-0';
      this.toast = {
        icon: 'fa-solid fa-info me-2',
        time: moment().fromNow(),
        title: 'info',
        bgColor: 'bg-info',
        message: 'We are away for 2 days'
      }
    },
    hideToast(){
      this.show = '';
      this.position = '';
    },
  }
}
</script>
                                                        
                                                    

4- تعديل ل App Component

منبعد غادي نديرو تعديل على ل App component ونزيدو فيه هاد الكود:

                                                        
                                                            //
<template>
  <Toast />
</template>

<script>
import Toast from './components/Toast.vue';
export default {
  components:{
    Toast,
  }
}
</script>
                                                        
                                                    

5- إضافة Bootstrap 5 & Font Awesome

من بعد ف index.html غادي نزيدو روابط ديال Bootstrap 5 & Font Awesome.

باش ت démarrer serveur دير npm run dev

الكود ديال الملف بعد التعديل :

                                                        
                                                            //
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title>Toast App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
                                                        
                                                    

دروس ذات صلة

VS

آلة حاسبة بإ ستعمال Vuejs

فهاد الدرس الأول من سلسلة vuejs غادي نشوفو كيفاش نقادو آلة حاسبة بإستعمال vuejs فالناس لي مكتعرفش شن...


VS

كيفاش نصاوب Note App ب Vuejs

فهاد الدرس الثاني من سلسلة vuejs غادي نشوفو كيفاش نقادو Note App بإستعمال vuejs فحنا فهاد الدرس ال...


VS

Application de gestion de dépenses باستعمال Vuejs

فهاد الدرس الجديد من سلسلة vuejs غادي نشوفو كيفاش نقادو une simple application كتدير la gestion de d...


VS

Ecommerce App باستعمال Vuejs

فهاد الدرس الجديد من سلسلة vuejs غادي نشوفو كيفاش نقادو Ecommerce App المستخدم كيزيد des produits فل...


VS

login système ب laravel & vue js الجزء الأول

فهاد الدرس الجديد غادي نشوفوا كيفاش نقادو login système ب laravel & vue js فل projet بسيط غادي يكون...


VS

LOGIN SYSTÈME ب LARAVEL & VUE JS الجزء الثاني

فهاد الجزء الثاني من LOGIN SYSTÈME ب LARAVEL & VUE JS غادي نشوفوا كيفاش نزيدو les components vue js...


VS

login système + Vote systéme ب laravel & vue js الجزء الثالت

فهاد الجزء الثالت من login système + vote systéme ب laravel & vue js كيف قلنا فل ل video...


VS

LOGIN SYSTÈME + VOTE SYSTÉME ب LARAVEL & VUE JS الجزء الرابع

فهاد الجزء الرابع من LOGIN SYSTÈME + VOTE SYSTÉME ب LARAVEL & VUE JS غادي نعرضوا les posts ديال...


VS

CRUD application ب php & vuejs الجزء الأول

فهاد ل projet الجديد غادي نشوفوا كيفاش نقادوا CRUD application ب php و vue js ولي سبق ودرناها...


VS

CRUD application ب php & vuejs الجزء الثاني

فهاد الجزء الثاني من CRUD application ب php و vue js غادي نكملوا ل projet ديالنا وندوزو للجزء الخاص...