#9 Real-time Nuxt with Nitro & WebSockets, Interactive Vue and Custom TOC in Asciidoctor
Discover the potential of Nuxt & Nitro with WebSocket integration, prefix & suffix usage, & a custom TOC setup in Asciidoctor. Plus, Vue tricks with Floating Dock Menus & flashcards from pariksha.io
🌟 Welcome to NuxtDojo Newsletter #9 🌟
This NuxtDojo edition covers WebSockets, Nitro, and the power of Nuxt's prefixes, suffixes and lazies. Reflecting on the Nitro chapters in my book, I realise there’s so much depth to Nitro that I could fill several newsletters with it—a single book chapter won’t do it justice! I’ve also grouped all the info on Nuxt’s prefixes, suffixes, and lazy loading into one spot to help you think methodically when you are structuring your Nuxt projects.
In Author’s Corner, we explore Ruby extensions to create a two-column TOC layout in Asciidoctor, inspired by Packt books.
Bonus items include a Floating Dock Menu in Vue with VueUse Motion and Pariksha.io’s fun flashcards on coding jargon!
Happy reading!
Nuxter’s Corner
As Nitro keeps evolving, it’s only getting stronger. Writing a chapter on Nitro, though, has been a bit overwhelming—juggling ideas and sometimes feeling torn between covering the essentials or diving deeper into what it can offer for full-stack Nuxt.
Some recipes I’m considering:
Recipe 1: Build Serverless API Endpoints
Recipe 2: Implement Custom Middleware
Recipe 3: Deploy to Multiple Platforms
Recipe 4: Edge Rendering
Recipe 5: Data Fetching and Server-Side Rendering
Recipe 6: Use WebSockets for Real-Time Communication
Recipe 7: Handle File Uploads
For a fresh start, I chose Recipe 6: Adding WebSockets in Nuxt for real-time functionality. Despite being an experimental feature, the implementation was surprisingly smooth and so much fun!
Nuxt and WebSocket
We’re all familiar with Nitro’s `defineEventHandler`, but have you come across `defineWebSocketHandler`? I hadn’t either, and in my opinion, it’s a game-changer!
I’m still laying the groundwork with WebSockets in Nuxt and haven’t tackled databases or deployment just yet. For now, I’ve adapted an example from UnJs’s CrossWS library and customised it as a communication layer for a two-player (board) game.
After setting up the WebSocket example below, `XState` immediately came to mind—adding it could make for a great Game Engine example. It might just be the perfect addition to my book! How about two players can play this type of quiz, but in real-time?
Here’s an example I put together where Chrome and Firefox chat with each other in real-time. Feel free to clone the repo (link below) and experiment with the various WebSocket hooks to see how everything connects and functions.
Check out the Github Repo of my experiment with Nuxt and WebSockets
Read full article on how I integrated WebSockets in Nuxt 3 project: Real-Time with Nuxt 3: A Guide to WebSocket Integration
Suffixes, Prefixes and Nuxt Magic
I haven’t yet decided where this will fit into my book, but it’s essential to have a high-level understanding of the prefixes and suffixes available in Nuxt. While working with WebSockets, I coincidentally needed to create a client-only Vue component, making the topic of suffixes and prefixes especially relevant to my project. It was perfect timing for my use case!
So, I documented the impact of prefixes and suffixes in Nuxt, highlighting how strategic naming—like `.global`, `.server`, and `Lazy`—enhances functionality, improves performance, and optimises component behaviour for server-side and/or client-side rendering. This detailed breakdown illustrates the power of conventions in organising code, controlling loading processes, and handling middleware. For developers seeking to streamline and elevate their Nuxt projects, mastering these naming conventions offers both clarity and efficiency.
Read full article: Suffixes, Prefixes, and Nuxt Magic
Author’s Corner
Custom Table Of Content
This little side project started when I was browsing through some of the Packt Publishing books. I loved how each section is neatly organised, which inspired me to explore how to achieve a similar style in my own book using Asciidoctor.
So, I took a deeper dive into using Asciidoctor with Ruby and the Prawn library to create professional, customised PDFs, focusing on designing a tailored Table of Contents (TOC). By leveraging Asciidoctor’s API and methods, like `convert_document`, I was able to structure TOCs with interactive links, a two-column layout, and dynamic page management. These techniques offer a polished PDF layout, ideal for projects needing a well-organised TOC and flexible content formatting.
Read full article where I wrote about how I achieved the two-column TOC layout using custom Ruby extension for Asciidoctor: Building Professional PDFs with Asciidoctor: Advanced Techniques for TOCs and Layouts
Check out the quick Ruby implementation Gist
Bonus
Floating Dock Menu with VueUse Motion
While browsing through the latest component libraries, I stumbled upon Aceternity UI. They had recently implemented a new Floating Dock component. Naturally, I had to try it with Vue!
My first instinct was to use GSAP to create that magnifying icons effect. Since Aceternity UI achieved their transitions with Framer Motion, I decided to go for a similar approach in Vue and picked VueUse Motion to recreate the effect.
Check out the Github Repo of Floating Dock Menu
I haven’t mapped out my chapter on transitions yet, but exploring VueUse Motion has been a real eye-opener. Many developers might assume that animations and transitions are strictly client-side, so rendering them on the server might seem unnecessary. However, VueUse Motion offers both module and SSR support, making it a perfect fit for Nuxt projects because SSR (Server-Side Rendering) support for animations is essential in Nuxt for several reasons:
SEO Benefits: SSR ensures that content, including animations, is available for search engines, improving SEO by making animated elements fully crawlable.
Initial Load Experience: With SSR, animations can be pre-rendered, ensuring a smoother experience on the first load, especially on slower devices or networks.
Accessibility: By rendering transitions server-side, you maintain an accessible, static fallback for users with JavaScript disabled or limited browser capabilities.
Interactive Flashcards
I’ve been experimenting with ways to present listicle-style articles, and it hit me—pariksha.io, which started as a flashcard quiz platform, would be great for quick, informative flashcards too. You can read listicle-style content as interactive flashcards on pariksha.io!
Learn about backstories of programming jargons that we (developers) use in our daily lives.
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 🚀📚
Thank you very much, very useful material.