Weekly Vue News #217

Nuxt UI v4, Real-Time Communication, and Smart Vue Components

Hi 👋

This week brings exciting updates with Nuxt UI v4's major release unifying the entire ecosystem, plus guides on building AI-powered Vue components and real-time communication with Socket.IO. We're also covering new tools like flagsmith-vue for feature flags and Vue Frimousse emoji picker.

On a personal note, I'm working on a new Nuxt module to render emails based on Vue components. It'll be a replacement for Vue Email which is not maintained anymore. I already implemented the main functionality & tests, now I need to test it in my apps and write the documentation. Stay tuned, I hope to be able to release the first public version in the next weeks!

Enjoy this issue and have a lovely week ☀️

Vue

📕 State Based Favicons (Tab Alerts) in Vue*

👉🏻 With VueUse's useFavicon, you can dynamically change out favicons with ease.

📕 Announcing Tres 5.0

👉🏻 This major release brings modern architecture, enhanced performance, and cutting-edge WebGPU support.

📕 Building AI-Powered Vue.js Components: The Developer's Guide to Smart UI in 2025

👉🏻 From smart search to intelligent validation and content summarization - this guide walks you through building components that think.

🛠️ flagsmith-vue

👉🏻 An (unofficial) Flagsmith Vue.js integration that uses Vue Composition API to dynamically update feature flags and traits in components.

👉🏻 Compatible with Vue versions 2.7 and 3.

🛠️ Vue Frimousse

👉🏻 A lightweight, unstyled, and composable emoji picker for Vue.

Nuxt

📕 Nuxt UI v4

👉🏻 Nuxt UI v4 unifies Nuxt UI and Nuxt UI Pro into one powerful, completely free library.

👉🏻 With over 110 components, 12 templates, and a comprehensive Figma kit, all of this is available for free.

📕 Building a Realtime Chat Application with Nuxt and Socket.IO*

👉🏻 Socket.IO is a powerful tool for building applications that demand instant communication.

📕 State Hydration & Persisted State in Nuxt with Pinia

👉🏻 When working with Nuxt (or any SSR framework), one of the trickiest parts is handling state hydration - making sure that the state you generate on the server matches what runs on the client.

🛠️ Nuxt Shopify Module

👉🏻 Fully typed fetch client for the Shopify Storefront API and the Shopify Admin API.

👉🏻 You can use it on the server and client side, with built-in support for mock.shop and automatic, hot-reloaded type generation from your GraphQL queries.

📹 Nuxt UI's Model Context Protocol is here... Let's test it

👉🏻 In this video, you take a look at the new MCP server for Nuxt UI.