Easy push notifications in Nuxt 3 with Pusher Beams
Published: 2023-10-13 13:50:16

I was looking for ways to add push notifications to my Nuxt app and decided to test [Pusher Beams](https://pusher.com/beams/).

I found it to be really easy to use so I made a little tutorial, including fixes for a few minor problems I encountered along the way.

Create new Nuxt project with
`npx nuxi init notifications-test`

Create a Pusher account
[https://pusher.com/beams/](https://pusher.com/beams/)

After confirming your account and logging in, you will be asked to create a new instance.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/saaig261l0cjsc6plaum.png)


Click create, and select your platform.
For this example I'm going to use web.

Here you will be taken to a quickstart guide with all the steps you need to set up push notifications for your app.
It's pretty simple, but there's a few things to be aware of.

In your nuxt app, create a file called `service-worker.js` in the `public` folder
The file should like like this:

```
importScripts("https://js.pusher.com/beams/service-worker.js");
```

In your terminal, start your nuxt app with `npm run dev`
Open http://localhost:3000/service-worker.js in your browser and you should see the content of the file.

Install the Pusher SDK

`npm install @pusher/push-notifications-web
`
[](https://pusher.com/docs/beams/reference/web/#npm-yarn)


Open https://dashboard.pusher.com/beams/instances and click the name of your instance

Open "Keys" and copy your instance ID.

In app.vue, in the script tag, import @pusher/push-notifications-web" and copy this code. Remember to add your own instance ID.

```
onMounted(() => {
	const beamsClient = new PusherPushNotifications.Client({
    instanceId: 'YOUR_INSTANCE_ID',
  });

  beamsClient.start()
    .then(() => beamsClient.addDeviceInterest('hello'))
    .then(() => console.log('Successfully registered and subscribed!'))
    .catch(console.error);
})
```

Your app.vue should now look like this:

```
 <script setup>
import * as PusherPushNotifications from "@pusher/push-notifications-web";

onMounted(() => {
	const beamsClient = new PusherPushNotifications.Client({
    instanceId: 'YOUR_INSTANCE_ID',
  });

  beamsClient.start()
    .then(() => beamsClient.addDeviceInterest('hello'))
    .then(() => console.log('Successfully registered and subscribed!'))
    .catch(console.error);
})
</script>
```

Make sure your app is running and open [http://localhost:3000/](http://localhost:3000/)

If you did everything correcly you should see a popup asking to allow notifications.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/biieipf4pq16jmbtt9c7.png)

If it doesn't work you may need to refresh the page or check your browser settings to ensure localhost has permission to display notifications. 

Click "Allow".

In the console you should now be able to see "Successfully registered and subscribed!" if everything is working.
You might have to refresh the page for it to work.


> If you are using Brave, you might get this error:
> DOMException: Registration failed - push service error
> To fix this, you can go to Brave settings and enable
> "Use Google services for push messaging", and then relaunch Brave
> [brave://settings/privacy](url) 



To test that the push notifications are being displayed, we need to send a post request to Pusher. I'm going to use [Thunderclient](https://www.thunderclient.com/) for this.

First, in your Pusher dashboard, find the primary key of your instance.

In Thunderclient (or your preferred client)
Add an `Authorization` header with the value of "Bearer [YOUR_PRIMARY_KEY]
 
Make sure the method is POST and add this address. Remember to swap [YOUR_INSTANCE_ID] with the ID of your Pusher Beams instance.


```
https://[YOUR_INSTANCE_ID].pushnotifications.pusher.com/publish_api/v1/instances/[YOUR_INSTANCE_ID]/publishes/interests
```

In the `body` tab, paste the following JSON:

```
{
"interests": ["hello"],
"web": {
  "notification": {
    "title": "Hello",
    "body": "Hello, world!",
    "deep_link": "https://www.pusher.com"
  }
}
}
```


Click "Send" and you should be able to see your notification displayed!


> If you are not seeing any notifications, check your computers settings. On Mac you will find this under "Notification settings". Make sure notifications are allowed, and check the list of apps to see if your browser is allowed to display notifications.