Weekly Vue News #160 - Reactive Configuration Within Your Nuxt App

Weekly Vue News #160 Reactive Configuration Within Your Nuxt App View online Hi 👋 This issue is packed with some really interesting articles, videos, and tools all about Vue and Nuxt. Plus, there's a Nuxt tip on reactive configurations that might be a game-changer for some of you. Dive in and enjoy! Have a lovely week ☀️ Vue 📕 Speeding Up the Virtual DOM With Vue.js 👉🏻 Web frameworks often use a virtual DOM to keep track of current UI elements. 👉🏻 To combat performance issues, Vue.js closely couples its runtime and compiler. 📕 Building Real-Time Applications with Vue.js and WebSockets 👉🏻 This guide walks through setting up a Vue.js project, integrating Socket.io for WebSocket communication, and creating a real-time chat application. 📕 Async Prop Fetching 👉🏻 Learn how you can use Kitbag Router in Vue to fetch your async data with route params and provide that down to your components. 📹 React vs Vue - Async State, Effects and Custom Hooks 👉🏻 In this video, you'll learn how to handle async state, effects and create custom hooks in both Vue and React. 🛠️ KickStart 👉🏻 An AI form builder to speed up the development of the forms in your Vue.js projects. 👉🏻 Generate from a prompt, image, or text attachment. Nuxt 📕 Nuxt v3.13 is out 👉🏻 Route groups 👉🏻 Islands and head metadata 👉🏻 Custom prefetch triggers 👉🏻 Better server source maps 👉🏻 New features for module authors 👉🏻 Improved dev warnings 📕 Introducing Nuxt Scripts 👉🏻 Nuxt Scripts provides better performance, privacy, security, and developer experience for third-party scripts. 📕 Introducing hubAI() 👉🏻 Run machine learning models, such as LLMs in your Nuxt application, with minimal setup. 📕 Mastering Nuxt SSG: Take Full Control of Your Static Site Output 👉🏻 This article will explore how to generate static sites using Nuxt. 👉🏻 It provides detailed insights into controlling various behaviors and configuration options during the generation process. 📹 My new favorite way to build apps… 👉🏻 Matt explains, why he loves to build & deploy apps with NuxtHub. 📹 Nuxt with OTHER backend frameworks? 👉🏻 In this video, Alexander tries to get three different backend frameworks up and running with Nuxt. 💡 Nuxt Tip: Reactive Configuration You can use the app.config.ts file in Nuxt 3+ to expose a reactive configuration, which you can update at runtime: 1export default defineAppConfig({ 2 theme: 'dark', 3 version: 1, 4}); As these values are exposed to the client bundle, you should not put any secret values inside this file. In your app, use the useAppConfig composable to access the configuration values: 1<script setup lang="ts"> 2const appConfig = useAppConfig(); 3 4console.log('Theme:', appConfig.theme); 5console.log('Version:', appConfig.version); 6</script> You can try out this example on StackBlitz where I simulate a network request that updates the config after a timeout of 3 seconds: ✨ Open Demo 📅 Events PrageVue 2024 (17 September 2024, Prag, Czech Republic) vuejs.de Conf (8 - 9 October 2024, Bonn, Germany) Vue Fes Japan 2024 (19 October 2024, Otemachi, Japan) VueConf Toronto (18 - 20 November 2024, Toronto, Canada) 💬 Quote of the week 🧑🏻‍💻 In Other News 📕 Plain Vanilla 👉🏻 An explainer for doing web development using only vanilla techniques. 👉🏻 This means no tools and no frameworks — just HTML, CSS, and JavaScript. 📕 Tracking supermarket prices with Playwright 👉🏻 This article goes through the process of building a website for tracking supermarket prices in Greece. 👉🏻 The main challenge was scraping JavaScript-heavy websites, which was solved using Playwright. 🛠️ emoji-picker-element 👉🏻 A web component for selecting emojis, with support for Emoji v15.1 and custom emoji. 👉🏻 It has a small bundle size and efficient memory usage thanks to IndexedDB. 🛠️ CSS Editor 👉🏻 A web-based CSS editor with a GUI. 😂 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 from this newsletter Holzapfelkreuther Str. 19, 81375 Munich, Germany