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,