Implementing cordova-plugin-local-notifications for Vue

Ionic Framework Ionic Vue
1

Hello Team,

I was posting this also on stackoverflow, here is the link: (https://stackoverflow.com/questions/70261263)

I’m using Vue3 with Ionic and want to set up a local notification. The ionic docs only describe how to do it for Angular (Local Notifications: iOS & Android | Cordova Local Notifications).

The implementation doesn’t necessarily need to be with Ionic, a Vue3 implementation would be fine.

First I Downloaded the modules:

npm install cordova-plugin-local-notification
npm install @ionic-native/local-notifications

Now i’m already stuck at importing the module, as for Angular it would be

import { LocalNotifications } from '@ionic-native/local-notifications/ngx';

But how would I do that with Vue?

The next question would be how to use it. Something like that?:

<script>
  import { LocalNotifications } from '@ionic-native/local-notifications/ ???';

  export default {
    components: { LocalNotifications },
    data() {
      return {
        localNotifications: LocalNotifications,
      };
    },
    methods: {
      note() {
        this.localNotifications.schedule({
          id: 1,
          text: 'Single LocalNotification',

          data: { secret: key },
        });
      },
    },
  };
</script>

Thanks in advance.

2

Is there a specific reason you need to use the Cordova plugin? I would recommend using the official Capacitor one if you can which is here. I have that one successfully implemented in Ionic and Vue 3.

Here is an example with the Capacitor plugin:

// Create
import { LocalNotifications } from '@capacitor/local-notifications'

// In a Vue method
await LocalNotifications.schedule({
    notifications: [
        {
            id: 1234,
            channelId: 'reminders', // If you are using channels
            title: 'My Title',
            body: 'My body',
            schedule: {
                on: {
                    hour: 12,
                    minute: 30
                },
                allowWhileIdle: true,
            },
            extra: {
                // Any random data you want to add
            },
        },
    ],
})


// Initialization on app startup, I do it in main.ts where the app is bootstraped/mounted

// To create channels (Android only), you do the following. 
LocalNotifications.createChannel({
    id: 'reminders',
    name: 'Reminders',
    description: 'Reminders you set within App',
    importance: 4
})

// To register a tap of the notification and do something within your app

// I remove and re-register every time the app starts as I was having issues of double events being fired
LocalNotifications.removeAllListeners()

LocalNotifications.addListener('localNotificationActionPerformed', (notification: ActionPerformed) => {
    if (notification.actionId === 'tap') {
        // Run some code in your app
    }
})
2 Likes
3

Hey twestrick,

the Capacitor solution is fine. Thanks a lot. works nicely :slight_smile:
I didn’t read anything about it in the Ionic docs, so I didn’t even know it exists.

cheers

1 Like
4

Awesome! Yeah, it doesn’t appear Native APIs - Build Open-Source Native Application Experiences is kept up-to-date. My guess is that this page will be removed when Ionic 6 is released.

If you aren’t aware, the ionic-native project has been moved to awesome-cordova-plugins. - reference.

The best place to look for plugins that are current is in the Capacitor Community org on GitHub - Capacitor Community · GitHub. And then all the official Capacitor plugins are here.

5

Thanks these links are very useful for me. Just starting out on App-Developing :slight_smile:

1 Like
6

Nice! Welcome to app development! I started back in January with Ionic and Vue on a new app project. Being a web developer for 10+ years the Ionic Framework has been a joy to work with. The Ionic/Capacitor community is also awesome!

1 Like