Weekly Vue News #181 - Scroll to the Top Before Rendering a Nuxt Page

Weekly Vue News #181 Scroll to the Top Before Rendering a Nuxt Page View online Hi 👋 As promised, here's a sneak peek at the SaaS Starter Kit I've been working on over the past few weeks! It's a highly opinionated boilerplate project built with Nuxt UI v3 Pro and NuxtHub, designed to streamline SaaS development. Since I plan to sell it, this starter kit won't be free and the price will be about $69. You'll also need a Nuxt UI Pro license and be ready to deploy on NuxtHub. If that doesn't fit your needs, a more flexible starter kit might be a better choice. You can check it out a early demo of the kit here. For the best experience, log in with the following demo admin user credentials: Email: bsw799za8@mozmail.com Password: NuxtStarterKit2025! The kit is feature-complete, but I'm waiting for stable releases of Nuxt UI Pro v3 and Nuxt Content v3 before publishing it. Feel free to join the waitlist in the footer of the demo page, if you are interested. Stay tuned for more updates! Enjoy this issue and have a lovely week ☀️ Sponsored Pre-Order Total TypeScript If you're an experienced JavaScript developer or want to level up your TypeScript skills, with Total TypeScript you'll learn everything you need to build a TypeScript product from scratch. Use MOKK30 to get 30% on your pre-order. The code is valid until March 1st. → Pre-Order Vue 📕 Testing Vue components with Vitest 👉🏻 In this article, Jakub dives into how you can use Vitest to test Vue components. 📕 How to Prefetch a Vue.js Component* 👉🏻 In this article, you'll explore how to implement component prefetching to enhance your Vue application's user experience and loading times. 📕 Vue Land FAQ 👉🏻 This FAQ aims to answer some of the most common programming questions that get asked on the Vue Land Discord server. 📹 The CORRECT Tag Order in your Vue SFCs 👉🏻 One thing that makes Vue special are it's SFCs - Single File Components. 👉🏻 But which is the best order of the three tags - script, template and styles - inside the components? 🛠️ Vue 3 + Vite + Nuxt UI 3 👉🏻 This template should help get you started developing with Vue 3, TypeScript, Vite and Nuxt UI v3. Nuxt 📕 Nuxt Content v3 is out 👉🏻 Performance Improvements 👉🏻 Content Collections 👉🏻 Simplified Vue Utils 👉🏻 TypeScript Integration 👉🏻 ... and much more! 📕 Building a multi-lingual web app with Nuxt 3 and Nuxt i18n 👉🏻 This tutorial will guide you through creating a multi-lingual web application using Nuxt 3 and Nuxt i18n. 📕 Fixing Cumulative Layout Shift (CLS) in Nuxt 3 👉🏻 The author improved the CLS by disabling the inline styles feature in the Nuxt configuration. 👉🏻 This results in the relevant CSS file being placed higher in the document, loading in time to avoid the layout shift. 📕 Official Clerk SDK for Vue and Nuxt 👉🏻 We now have official Clerk SDKs for authentication integration with pre-built UI components in Vue & Nuxt apps. 📹 I Made a Viral App to Make Thousands Of Dollars (Sevalla, VueJS, NUXT, MYSQL) 👉🏻 In this video, the author shares the full story of how he created a fun and addictive Suika game clone with Nuxt. 💡 Nuxt Tip: Scroll to the Top Before Rendering a Page definePageMetadefinePageMeta is a compiler macro that you can use to set metadata for your pages. With the scrollToTopscrollToTop parameter you tell Nuxt to scroll to the top before rendering the page or not: 1<script setup lang="ts"> 2definePageMeta({ 3 layout: 'default', 4 scrollToTop: true, 5}) 6</script> If you want to overwrite the default scroll behavior of Nuxt, you can do so in ~/app/router.options.ts~/app/router.options.ts (see custom routing) for more info. 📅 Events Vue.js Nation Conference (29 - 30 January 2025, free online conference) Vuejs Amsterdam (12 - 13 March 2025, Amsterdam, Netherlands) Vueconf.US (13 - 15 May 2025, Tampa, Florida) MadVue (29 May 2025, Madrid, Spain) 💬 Quote of the week 🧑🏻‍💻 In Other News 📕 Balancing Text In CSS 👉🏻 Balanced text makes web pages look better. 👉🏻 New CSS features, such as text-wrap: balance and text-wrap: pretty, provide native solutions for text wrapping. 📕 How I Stay Sane Implementing Stripe 👉🏻 Theo shares how he sets up Stripe after doing it for dozens apps. 🎮 DOOM: The Gallery Experience 👉🏻 A game developer has created this amusing version of DOOM, parodying art gallery openings. 👉🏻 Complete with curated pieces, wine, fancy music, and even hors d'oeuvres. 🛠️ CSS Variables Editor 👉🏻 The CSS Variables Editor browser extension allows users to manage and test CSS variables, including AI-generated palettes and accessibility checks, directly within their web app. 😂 Fun 🔗 Want more Vue & Nuxt content? More Exclusive Vue Tips: Join Michael Thiessen's newsletter and get great Vue tips and insights delivered to your inbox each week. Weekly Vue & Nuxt Videos: You must subscribe Alexander Lichter's YouTube channel if you are interested in Vue & Nuxt. DejaVue Podcast: A weekly podcast about Vue.js and the ecosystem around it. Comments? Join the discussion about this issue in our Discord community. Until next week, Michael Hoffmann (Curator)

---

To support me:

😘 Recommend the newsletter to your friends: it really helps!

💸 Sponsor this newsletter

🦋 Repost the latest BlueSky post

📨 Reply to this email: feedback is welcome

* Some of my links are affiliate links; if you make a purchase, I gain a small percentage at no extra cost. Thank you for supporting my newsletter.

---

Unsubscribe Holzapfelkreuther Str. 19, 81375 Munich, Germany