The Project
It has been a while since I used Vue in a project. Since then, it is undergone massive updates most notably the new Composition API which involves importing functions rather than declaring options. So, I wanted to use this and check out Nuxt which helps generate server or static apps.
We are seeing an increase in the number of streaming services available.
70% of Australians have a subscription to a streaming service
I thought creating a calculator where users can select their services would provide them value. At times, the content on these services can be better. I hope this tool can be used to make an informed decision on whether they keep a service or even add another service.
The main goals of the project were to:
- Use the Vue Composition API
- Use Nuxt
- Graphically show a list of services to interact with
Weapons of choice (how it started)
- Nuxt 2 + Nuxt Bridge
- Tailwind CSS
- Pinia
- Vercel
Weapons of choice (how it ended)
- Nuxt 3
- Tailwind CSS
- Pinia
- Netlify
The Calculator
The services shown on the tool is just a JSON file which is imported to Vue. There was a challenge with working out how to show the plans of a service. Initially, I was using a select method. While this would be fine, it introduces more clicking when selecting a service.
In the end, I went with radio buttons as it helps with the following:
- Less clicking
- Can be shown to the user
- Makes comparisons easier
Highlighting each service graphically helps the user scan quickly and effectively. And since this is a single page application, everything just updates as you interact with the app giving instant feedback.
Vue
I forgot how easy Vue made things when it came to form elements. The v-model directive provides two-way data binding out of the box. You do need to do a small amount of setup when using the directive on a component, but it is still great.
The Composition API made the code cleaner. Vue still supports the old syntax, but I will be using this API for all future Vue projects.
Nuxt
My feelings are a bit mixed for Nuxt.
Initially I went with the stable Nuxt 2 and wanted the new Nuxt 3 features in my project like the Composition API which meant including Nuxt Bridge.
This resulted in a range of issues such as:
- Node build issues
- CSS not being imported
- Image optimisation not working due to library issues
- Hosting errors
- Hot reload hanging
This meant a googling to try and work out why these issues were occurring. Switching to Vite and moving to Netlify did help mitigate some of the issues. Image optimisation did work but only lossless compression was possible.
I did also try Nuxt 3 and did not have any issues in terms of the framework.
Nuxt does look promising but just needs to mature a little more. I cannot help but compare it to Next JS as that is a first-class framework. I will be keeping an eye on how Nuxt 3 progresses.
Performance
While Nuxt 2 + Nuxt Bridge was giving me 90 mobile Pagespeed, I was not satisfied as the Javascript bundle was too high for what the app is.
Normally I do not like to use release candidates, betas or even V1 frameworks but I wanted to see if Nuxt 3 would be better. The Nuxt 3 website has a comparison table mentioning that it has the fastest performance compared to predecessors.
The move to Nuxt 3 was not hard as using Nuxt Bridge meant I was already using the same development processes.
The performance hit was instant.
From 187 kB to 37 kb
