# Fresh Vue and Nuxt patterns + new RAG course lessons now live Canonical: https://brew.new/browse/templates/email/pt1_k97rgkevcy76w7janc46fsy9xh8e4k2t Brand: vueschool.io Category: newsletter ![Preview of Fresh Vue and Nuxt patterns + new RAG course lessons now live](https://cdn.brew.new/email-preview-0e7c98789d3b8261-tracking_r57y65gwx3142qbe9g7cxwbweh8dt48j-1789016532774.png) ## Email content Vue School website Hi John, This week’s edition is packed with fresh Vue and Nuxt content focused on practical patterns you can use right away. We’re covering cleaner ways to handle variable-height UI, stable IDs in Vue 3.5, and how to build a RAG workflow in Nuxt with Gemini File Search. We’ve also released the first lessons of a brand-new course, plus a recommended next course based on your experience level. Here’s what’s inside this week: 3 new articles on Vue School blog: Using Pretext in Vue to Build Variable-Height UI Without Layout Thrash, Generating Random IDs in Vue.js, RAG with Nuxt and Gemini File Search The first 8 lessons of our new RAG with Nuxt and Gemini File Search course Frontend Nation updates A recommended course based on your current Vue level Chance to win FREE Unlearn.dev subscription by registering to CypressConf 2026 Practical tips from Daniel Kelly News from the BitterBrains ecosystem Latest courses, articles and tutorials Using Pretext in Vue to Build Variable-Height UI Without Layout Thrash → Read the article If you’ve ever had to render text, measure it, and then re-render just to make a layout work, this one is for you. This new article explores how to use Pretext in Vue to calculate wrapped text height before mounting it in the DOM. That means fewer hidden measurement elements, less layout thrash, and a much cleaner way to handle text-heavy interfaces. You’ll see why this approach is especially useful for things like: virtualized lists chat threads card grids resizable interfaces canvas-style UIs with labels It’s a smart pattern for cases where text height affects layout and you want Vue to stay focused on state, not DOM measurement hacks. → Read the article Generating Random IDs in Vue.js → Read the article Vue 3.5 introduced useId(), and it solves a small but surprisingly annoying problem really well. In this article, you’ll learn how to generate unique, stable IDs for labels, inputs, ARIA attributes, and reusable components without relying on manual counters, Math.random(), or hydration-prone workarounds. The article covers: how useId() works why it’s SSR-safe when to use it when not to use it how to avoid common mistakes like calling it inside computed() A small API, but a very nice upgrade for building accessible and reusable UI. → Read the article RAG with Nuxt and Gemini File Search → Read the article RAG is one of the most useful AI patterns right now, and this article walks through how to build it in a practical way with Nuxt. You’ll create a working backend flow using Gemini File Search, including document indexing, store creation, polling job status, and grounded question answering based on your own uploaded content. Inside the tutorial, you’ll learn how to: create a File Search store upload and index documents poll indexing status ask grounded questions against your indexed docs add document listing and delete flows It’s a strong hands-on guide if you want to build AI features that are actually useful, not just flashy. → Read the article New course release: RAG with Nuxt and Gemini File Search The first lessons of our brand-new course are now live. → Find out more 8 lessons now available: What is RAG and What We’re Building RAG Terms Project Setup Create a Gemini File Search Store Add Documents to a Gemini File Search Store Ask Questions about Your Documents Attributing Docs in Answers Filtering Matches with Metadata This course is built to help you understand the full flow behind retrieval-augmented generation in a Nuxt app, step by step. You’ll start with the core concepts, set up the project, and then move into working with Gemini File Search in a way that feels practical and developer-first. If you want to get better at building AI-powered apps with grounded answers and real document workflows, this is a great place to start. → Start the new course ⭐ Course recommendation GraphQL Fundamentals 5 lessons · 23 minutes GraphQL is one of those things every frontend developer runs into sooner or later. This beginner-friendly course gives you a clean foundation without drowning you in theory. You’ll learn what GraphQL is, why it can be more flexible than REST, how to explore APIs with GraphiQL, and how to write both queries and mutations. A solid pick if you want to understand modern API workflows and build better instincts early. → Start course Upcoming events Frontend Nation 2026: New Speakers Announced Frontend Nation continues to push deeper into the intersection of frontend and AI, with speakers like Kent C. Dodds, Alex Garrett-Smith, Alex Kyriakidis, and Ekaterina Sirazitdinova shaping what’s next. And we’re not slowing down. Strong voices from the Laravel ecosystem are joining the stage as we expand into the backend ecosystem this year. Pascal Baljet is the creator of Inertia UI and a prolific open-source contributor, with Laravel packages used millions of times across the ecosystem. Pascal will join Frontend Nation to dive into modern frontend without an API. Stay tuned. Joining him is Steve McDougall, a Laravel and PHP expert and Certificates.dev content owner, known for his work on building practical, production-ready APIs and improving the developer experience across frontend and backend teams. If you’re not registered yet, this is the moment to join while the program is still unfolding. It’s free, global, and designed for developers actively building today. 📍 Online | 🗓️ June 3–4, 2026 → Save your free seat One-click sign-up enabled If you have practical insights to share with the global frontend community, this is your chance to step onto the stage. → Apply to speak at Frontend Nation VueConf US We will be at the largest Vue.js conference in the US, VueConf US, happening May 19–21, 2026, in Atlanta. Hosted by Evan You and the Vue core team, expect workshops, production-focused talks, and a strong AI angle across the lineup. Our very own Daniel Kelly will be there with a Nuxt Fundamentals & Nuxt 4 workshop covering rendering modes, routing, data fetching, SEO, runtime config, and deployment for real-world Nuxt apps. And you will see him on stage as well. Midtown Atlanta, USA | May 19–21, 2026 As part of the Vue School community you get a 20% discount with the code: VUESCHOOL. → Register for VueConf US Win a FREE Unlearn.dev subscription with CypressConf 2026 → Find out more Staying sharp as a developer means learning the tools, workflows, and practices that actually move your team forward. That’s why we’ve partnered with Cypress to bring you a limited-time opportunity tied to CypressConf 2026 and Unlearn.dev, a platform built to help you unlearn outdated patterns and build the judgment needed to work confidently with AI. Here’s how to participate: Register for CypressConf before April 14th at 23:59 CEST You’ll automatically be entered into the Unlearn.dev giveaway One winner will receive a FREE 1-year Unlearn.dev subscription → Register for CypressConf & enter giveaway The winner will be announced by CypressConf. Not interested in the giveaway? You can still join CypressConf. 🎟️ Secure your spot and start building practical skills before the event begins. 💡Tip of the week from Daniel Kelly Want your browser to talk directly to your Vite dev server? Use `import.meta.hot.send()` to dispatch custom events straight from the browser. Log interactions, trigger rebuilds, or power custom dev tools in real time. No polling. No extra network layers. Dev-only magic. Learn how to master this trick and build smoother tooling. Turn your images on to see this weekly tip from Daniel. Struggling with complex components? Break them into smaller, focused pieces. The Branching Component Pattern fixes that. Extract each state into its own component Loading, Error, Content become isolated Smaller files, clearer intent Easier testing and long-term maintenance This one shift makes large components dramatically easier to work with. See all 5 patterns explained. Turn your images on to see this weekly tip from Daniel. From the BitterBrains network Training, events, and courses from our broader developer ecosystem Unlearn: a new developer learning platform for the AI era and beyond Unlearn just announced early access signup. It’s a new developer education platform built around an important reality: AI is changing how software is built. Instead of focusing only on AI tools, Unlearn focuses on the skills developers need when AI becomes part of the development workflow. → Join waitlist One-click signup enabled Level up your next skill 40% off If something from this week clicked, this is where you push it further. Your Vue School subscription gives you full access to: GraphQL Fundamentals, the new RAG with Nuxt and Gemini File Search course, and the entire library of 84+ Vue School courses. Whether you're getting comfortable with APIs, tightening up your data flows, or building reusable systems, it’s all there. You can get 40% off your Vue School subscription right now. → Get access and keep building That’s it for this week. Working on something interesting or want us to cover a specific topic? Just reply, we’re listening. Kind regards, Maria vueschool.io Facebook X GitHub BlueSky LinkedIn YouTube Instagram TikTok Vue School is proudly part of BitterBrains – Making Developers’ Lives Easier Become a BitterBrains Community Supporter here. Courses | Vue.js Master Class | Workshops | Tutorials | Plans 🔕 Not interested? Mute Weekly Newsletter here. You received this email because you are subscribed to Marketing Information at thomas+vueschool@brew.marketing. Manage email preferences 2093 Philadelphia Pike #9442, Claymont, Delaware 19703, United States [Open and remix this design](https://brew.new/browse/templates/email/pt1_k97rgkevcy76w7janc46fsy9xh8e4k2t) [Browse email designs](https://brew.new/browse/templates)