To enable any component to trigger a notification, I created a Pinia store called “notification”. The store holds state for the notification array and an action to add notifications to the store. After 2.5 seconds, the notification is removed, as we only want it to be visible for a short period.

In my component, after saving data in the database, I can run the action with the code below. This adds a notification with the text “New description has been saved” and a type of “success”.

To display the notifications in the UI, I created a component that imports and lists the notifications from the store in a transition-group. This way, they animate in and then fade out after 2.5 seconds. In the project that would look something like this:

Now, when the action is used, a notification is added to the array and the UI updates. After 2.5 seconds, the notification is removed from the array and the UI updates again. This isn't an advanced system, but it is simple and suited this project perfectly.

Building a simple notification solution with Nuxt 3

In January we went on a ski trip to Kläppen, we were there for a week with my fiancé’s family and I had a blast snowboarding and seeing the others that are just getting into skiing learning, and progressing. We are going back in January next year and I’m counting down the days.

During the spring we found out we were having another baby which is a major change in all of our lives, especially for our daughter.

In the summer I spent time at the flying club working towards my glider pilot license and even though I was not able to get all the flying done, I did end up finishing all the theoretical tests and got my radio license for both Swedish and English. In total, I spent over 11 hours in the air with 30 starts during the season.

During my vacation, we went on a road trip for a few days staying at a few different places in Dalsland and Dalarna. We stayed two nights in Kläppen where we went on a ski trip earlier in the year. Everything looked very different in the summer. We also went to Mora and looked at how they make the classic “dalahäst”-figurines as well went on a half-day cruise up “Dalslands Kanal”.

In the fall I started work on the new website for the flying club. Due to all the other things going on at work and home in preparation for having our second child things moved at a slow but steady pace until we finally published version 1.0 in early December.

In late November our second daughter was born and since then I think all of us have been just trying to get into new routines.

It has been an intense year with things happening both at work and home and I’m very excited to see what 2023 will bring.

Reflection of 2022

Here is an example of where things have gone wrong. Inter is loaded via @font-face and assigned to a font family called 

, this is a weight 900 font. But later on for the 

-class, the font is used but ‘transformed’ into a weight 300 which manipulates the font to look thinner.

Instead what would have been better is to define all weights needed to a collective font family called 

 and then grab the correct font file based on the assigned weight.

Rasmus Johansson

Hello!

Blog

Building a simple notification solution with Nuxt 3

Reflection of 2022

Use the right font for the job