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 useHeaduseHeadcomposable from VueUse , which is included with Nuxt by default, facilitates the management of page metadata like titletitle:

1<script setup lang="ts">
2useHead({
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)