Create vanilla notifications for your webapp using Vue 3 and Pinia

A quick overview of how you can display universal notifications to your users from any component in your webapp by simply importing a Pinia store and just one line of code!

Last updated on 9 March, 2025, 4:47pm by keston

Preface

This is a quick overview of how I use Vue 3 and Pinia to create UI notifications that I displayed to application users as success, warning or error message.

This is pretty much a vanilla solution and the reason why I’ve done it this way is because all of the plug-ins I found while looking for a solution either didn’t work as expected or seemed overly complicated or not easy to customise.

 

For this solution I created a div with an ID of notifications that lives in the main in index html file and I’m using the built-in teleport feature of vue 3 to display notifications when necessary.

 

I used Pinia to manage the state of the notifications as this provides an easy way to pass this functionality into any component in my application where I need it.  In particular Pinia allows you to access your data store and methods/function of the store directly from within a component .

 

The setup

In main.js – you can see the app if importing Pinia and set to use it.

 

In the index.html file there’s a div with an id of notifications. This is where the notifications component gets teleported into and displayed. The other div with the id of app, is where the main vue app is still being mounted.

 

In the app.vue file I have two components present, however, only example component is actually visible in the application. The notifications component will later to be teleported as previously mentioned.

 

Notifications.vue  file - this notifications component is special in the sense that it’s included within the app but gets teleported to the notification div in the index HTML file outside where the app is mounted. Advantage of this being that the notifications are now independent of any routes within the application. This is where the notifications styles are configured.

image goes here

In particular I have set this up to use simple webkit animation to bring the notifications into view based on conditional css  classes connected the the notificationStore. The animationend listener is used to hide the notification when the animation finishes. You can see the notificationstore is imported and whether this component is displayed and the content is based on this store.

 

NotificationStore.js – this imports Pinia and manages the state for the notifications and 2 simple actions that we are able to call from components.

 

Now, once you have this setup, you can trigger a notification very easily, from within a component so long as you import the notificationStore

 

ExampleComponent,  here I import the store and can trigger a notification from any logic within this component. This is a basic example so we are calling from inside a function that runs when a button is click but we could trigger a notification based on a server response or a more complicated logic.

 

So, if you’re a Vue developer and thinking about building a custom notification setup, consider using Pinia do help you get this done.

 

I hope this helps someone and some time!