#7 Mastering Vue side of Nuxt, Firebase Auth as Nuxt Layer, and Author's Insights
#7 Mastering Vue side of Nuxt, Firebase Auth as Nuxt Layer, and Author's Insights
Explore Vue component design patterns, my Firebase Auth experiment as a Nuxt Layer, and insights on Vue/Nuxt books and authoring tools in the Author's Corner.
🌟 Welcome to NuxtDojo Newsletter #7 🌟
It’s been a while since my last update. I've been reading several books by other authors in the JavaScript community, and a few side projects have popped up while my Nuxt book project continues to progress slowly but surely in the background.
For the Nuxt book, I've been developing ideas for the Vue Components and Authentication chapters, and I'm also exploring other book authoring software in addition to AsciiDoc.
So, let’s dive in. Happy reading!
Nuxter’s Corner
Vue side of Nuxt
Vue components are the backbone of Nuxt applications, so I'm planning to draft a chapter that takes a deep dive into everything related to Vue components.
We'll explore:
And two additional Vue component design patterns to enhance the performance of Vue/Nuxt applications:
This chapter will provide a comprehensive look at these essential building blocks of Vue and Nuxt development.
The key idea here is to take a single Vue component and re-create it using the various design patterns available in Vue.js. You can visit this landing page to get a clearer view of the bigger picture, showcasing all the different variants of the same Numeric Input component in one place, along with their respective articles for further learning.
Additionally, feel free to explore the GitHub repository where I am extending these components into my blog as a Nuxt Layer.
I see this chapter as a smooth transition into the Nuxt side of Vue, where Vue components are taken to the next level. In Nuxt, we have page components that drive the file-based routing system, and now we can even separate server and client components. And that's not even touching on dynamic and async components in Vue.js. It only makes sense to thoroughly understand everything about Vue components when we talk about Nuxt.
While writing this guide on Vue components, I've come up with a lot of ideas that I haven't been able to include just yet, but I believe they could be super useful. These could include sections like:
Vue Components Gotchas: covering potential pitfalls with each design pattern
Vue Components Best Practices
How to debug Vue components in Nuxt using Nuxt DevTools, and more.
The more I think about these topics, the more I can see this turning into a mini-book of its own. However, I’ll wait to see how the final version of the chapter shapes up before deciding whether to go down that route.
Firebase Authentication as a Nuxt Layer
I've been exploring different use cases for Nuxt Layers with the goal of reusing them across multiple Nuxt projects. Beyond the obvious UI and data layers, the authentication layer is another key area that could be reused without modification in various Nuxt projects. For authentication, there's the nuxt-auth-utils library created by Atinux, which works well but requires your Nuxt app to be server-rendered.
In one of my personal projects, I decided to test how Firebase performs as an authentication solution. Interestingly, it turns out that you can implement Firebase authentication with Nuxt entirely on the client-side, offering a flexible alternative to traditional server-rendered approaches.
I’ve documented my approach in a concept diagram that illustrates the structure of the Nuxt Firebase Layer, which includes plugins, pages, composables, and components. While Nuxt Layers don’t currently support named route middleware, you can still implement inline middleware on Nuxt pages within the layer.
At the moment, I have this Firebase Auth layer set up as a local layer, so I’m unable to share it with you all just yet. My initial plan was to create a GitHub Repo layer that anyone could use. Stay tuned for future updates on this project!
If you're interested in learning more about architecting your Nuxt applications using Nuxt Layers, you might want to check out an article I wrote a while ago: "Nuxt Layers Unwrapped."
Author’s Corner
Michael Thiessen’s book
Michael's book, "Nuxt Tips Collection," is packed with a treasure trove of tips and tricks that might otherwise be overlooked in the Nuxt documentation. Despite using Nuxt for over 6 years, I discovered new insights in this book that I had no idea of.
The book is an easy read, one that you can likely finish in a single sitting. However, it's also the kind of resource you'll find yourself returning to repeatedly when working on Nuxt projects, making it an invaluable companion for both new and experienced developers.
In this tweeter thread, Michael gives a sneak peek into his book, sharing a glimpse of content you'll find in this book.
Markus Oberlehner’s book
Markus wrote a book on writing tests for Vue applications, and in this tweet, he shares his journey of creating it. What I really like about his book is its focus on a single, niche topic - testing - allowing readers to dive deep and master one aspect thoroughly. It reminds me of a similar book written by Lachlan Miller about a test driven approach to maintainable applications. This kind of focused exploration can be super useful to truly understanding a framework.
While it's a bit late for me to shift the trajectory of my current book project, writing my Vue components guide has made me realise the value of honing in on one specific area of a framework. If you're interested, here’s the link to Markus’s book—it’s definitely worth checking out.
WriteBook
The team at 37Signals has just launched a brand new software called WriteBook, designed for writing and instantly publishing your own books on the web for free, without the need for a traditional publisher.
I've been eagerly following this project through their newsletter and was excited to see it finally come to life. Despite missing the traditional book feel of AsciiDoc, WriteBook is straightforward and easy to use once you have purchased and hosted (yes, hosted as in on DigitalOcean or Hetzner) your free copy of the software.
Thank you for joining me on this adventure, and I hope you find inspiration and enlightenment within these pages.
🚀 How You Can Participate:
📚 Read Along: Subscribe to the newsletter to receive updates, diagrams, and behind-the-scenes content.
🤝 Community Interaction: Share topic suggestions for the book, questions, and insights here on NuxtDojo Substack.
🚀 Spread the Word: Let others know about NuxtDojo – share on social media and among your developer circles.
Warm regards,
Krutie @ NuxtDojo 🚀📚