Weekly Vue News #171

Manage Page Metadata with useHead

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.