Implementing Push Notifications in Vue 3

Show how to implement push notifications using the Notifications API with Vue 3 on supported mobile browsers for real-time updates.

const app = Vue.createApp({
  data() {
    return {
      // State to handle push notification permissions
      hasPermission: false,
    };
  },
  methods: {
    // Check and request notification permission
    checkPermission() {
      if (!('Notification' in window)) {
        alert('This browser does not support desktop notification');
      } else if (Notification.permission === 'granted') {
        this.hasPermission = true;
      } else if (Notification.permission !== 'denied') {
        Notification.requestPermission().then(permission => {
          this.hasPermission = permission === 'granted';
        });
      }
    },
    // Show a notification
    showNotification(title, message) {
      if (this.hasPermission) {
        new Notification(title, { body: message });
      }
    }
  },
  mounted() {
    // Check for permission when the component is mounted
    this.checkPermission();
  }
});

app.mount('#app');

This Vue 3 component example checks and requests notification permissions when mounted and provides a method to display notifications if the user has granted permission. Ensure to include this in the <script> part of your Vue component.