This upcoming week my team and I will be heading to New Orleans, LA to attend Vue Conf! This will be my first-ever developer conference which should be very fun.
I signed up to attend the “Nuxt - Inside and Out” workshop by Daniel Roe and I’m very excited about it.
Nuxt is a meta-framework for Vue and provides a lot of great functionality out-of-box. I didn’t want to go into the workshop completely blind, so I decided to make a small application to test it out.
Technically this isn’t the first time I’ve used Nuxt, but this is my first time using the latest version, Nuxt 3.
Nuxt 3 includes several great features including:
- Vue 3 and Vite for superfast development.
- Easy-to-understand directory scaffold.
- Server-Side Rendering with many supported hosts.
- Modules to quickly integrate other tools.
My Nuxt App
I decided to build a small application for users to keep track of their purchased music. This was inspired by Andy Bell’s music collection site and my newfound love of collecting vinyl records.
I wanted users to be able to log into the app and update their libraries, this meant that I needed to have authentication, databases, and some sort of music search.
This post is intended as a summary of how I built the application using Nuxt, but if you’d like to check out the full code, it is available on GitHub!
Supabase Nuxt Module
Supabase is a great open-source alternative to Google’s Firebase that provides databases and authentication. I have used Supabase before for other projects, but it was made even better when I discovered there was a Supabase Nuxt module available to be installed.
Nuxt modules are plugins to enhance your Nuxt application or connect with third-party tools, such as Supabase.
Using Supabase’s authentication, I was able to set up GitHub and Google as authentication providers for my application.
One of the great things about Nuxt is that it makes routing a lot more straightforward. You can just add a
.vue file to the
pages/ directory and Nuxt will automatically build routes for it. Some routes should not be accessible by unauthenticated users, though - but this is where Nuxt’s middleware comes in handy.
Using the middleware, you can set up authentication criteria and redirect users who are not logged in, creating route guards.
Also, since I was already using Supabase for authentication, it made sense to continue using Supabase for storing data. Of course, the Supabase Nuxt module made querying the database straightforward as well.
For music searching, I created an API key with Discogs. Discogs itself is an online platform for managing your music and luckily have a free API to interact with its massive database of music.
Although there are many ways to build a music search engine, I wanted to experiment with Nuxt’s ability to have nested routes. For this, I created a multi-step form where:
- The user would first search for an artist
- After selecting the artist, they could select a specific album from that artist
- In the final step, the user could select what media format they own (CD, Cassette, Digital, or Vinyl), rate the album (out of five), and select their favorite track from the album.
To build the multi-step form, I needed to have some sort of state management. Since Nuxt is based on Vue, the best choice for state management is Pinia. Using Pinia, I can keep track of the form data while users traverse the nested routes.
I made a simple user profile page that can be viewed by browsing by the user’s ID. This is handled by Nuxt’s routing also.
With Nuxt, you can create dynamic routes by putting brackets around the file name like
[id].vue. This allows you to grab the ID parameter from the URL and use it on the page, in my case I used this to query the database looking for data related to that ID.
Things I like
In my opinion, if you use Vue, Nuxt 3 has one of the best developer experiences I’ve come across.
One of the simplest and most convenient things about Nuxt is that you do not need to import components as any component you create within the
components/ directory is globally available. This makes using components easier and keeps code cleaner.
The fact that Nuxt makes routing easy is also a huge win in my opinion, with nested and dynamic routes providing more possibilities for your applications.
I am looking forward to learning more about Nuxt from the workshop and in general looking forward to Vue Conf itself. I’ve never been to New Orleans, but I’ve heard it has a lot of great food. Plus I will get to spend some time with some of my team members that I don’t typically get to see since they work remotely from other states.
I plan to have a post-conference write-up once I get back, so keep an eye out for that!