Don't miss the next edition. Subscribe to the newsletter.
Published at Nov 11, 2024, 3:00 PMManage Page Metadata with useHead Ready for your weekly Vue & Nuxt dose? Weekly Vue News #171 Manage Page Metadata with useHead View online Hi 👋 Exciting week ahead — Nuxt Nation is happening, and it's free! This conference is a must-watch for all Nuxt developers, so don't miss out. Also, a quick heads-up: this newsletter is now on BlueSky ! With so many from the Vue & Nuxt ecosystem making the switch from X to BlueSky, let's keep the momentum going strong. Enjoy this issue and have a lovely week ☀️ Vue 📕 Render Functions Explained* 👉🏻 Render functions provide a low-level method of defining Vue components. 👉🏻 They allow you to work directly with the virtual DOM. 📕 Unlocking the Power of AI in Your Vue Coding Workflow* 👉🏻 By understanding how to effectively prompt AI and knowing the strengths and limitations of LLMs, you can significantly enhance your coding workflow. 🛠️ Radix Vue 👉🏻 An open-source, accessibility-focused UI component library for Vue.js that ports the Radix UI primitives. 💡 Vue Tip: Manage Page Metadata with useHead The useHead useHead composable from VueUse , which is included with Nuxt by default, facilitates the management of page metadata like title title : 1 script setup lang = " ts " > 2 useHead ({ 3 title : ' My App ' , 4 meta : [ 5 { name : ' description ' , content : ' My amazing site. ' } 6 ], 7 bodyAttrs : { 8 class : ' test ' 9 }, 10 script : [ { innerHTML : ' console.log( ' Hello world ' ) ' } ] 11 }) 12 script > Nuxt 📕 Nuxt 3.14 is out 👉🏻 With a new rspack builder, shared folder, and performance enhancements. 📕 How to create Navigation Guards in Nuxt with defineNuxtRouteMiddleware* 👉🏻 Learn how to implement navigation guards in Nuxt 3 using defineNuxtRouteMiddleware. 👉🏻This guide covers the essentials of route protection, async logic handling, and middleware ordering. 📹 shared - ANOTHER NEW folder in Nuxt 4?! 👉🏻 Nuxt now provides a new shared/ shared/ directory for sharing constants, types and other utils between the app/ app/ and server/ server/ directory. 🛠️ Nuxt i18n v9 👉🏻 The primary focus of this major release is to remove deprecated functionality and upgrade Vue I18n to v10. 🛠️ NuxtZzle 👉🏻 Port of the Shadcn/vue template to Nuxt. 🛠️ Opinionated Nuxt Starter By using it, you should have your project ready for 👉🏻 deployment (Dockerfile) 👉🏻 assuring great Software Quality (Testing, Lighthouse CI, GitHub Actions) 👉🏻 secure (Nuxt Security) 👉🏻 performant (Nuxt Image) 👉🏻 and styled properly with TailwindCSS and Linters. 📅 Events Nuxt Nation (12 - 13 November 2024, Virtual Conference) VueConf Toronto (18 - 20 November 2024, Toronto, Canada) Vuejs Amsterdam (12 - 13 March 2025, Amsterdam, Netherlands) 💬 Quote of the week 🧑🏻💻 In Other News 📕 WebStorm and Rider Are Now Free for Non-Commercial Use 👉🏻 The loved JavaScript/TypeScript IDE is now free for non-commercial use which, notably, also covers paid content creators. 📕How we shrunk our Javascript monorepo git size by 94% 👉🏻A Microsoft team working with a massive JavaScript monorepo (1JS) faced a challenge: the repository size had ballooned to 178GB. 👉🏻 They were able to shrunk it to 5GB by addressing folder & packing issues. 📹 JavaScript GameDev - Code a Sonic Runner Using Kaplay Library 👉🏻 A two hour walkthrough of using the Kaplay game library (formerly known as Kaboom.js) to build a complete, if simple, Sonic-branded game. 😂 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 X thread 📨 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 {{ TrackView }}