Don't miss the next edition. Subscribe to the newsletter.
Published at Oct 14, 2024, 3:00 PMAdd Filenames to Your Nuxt Chunks Ready for your weekly Vue & Nuxt dose? Weekly Vue News #167 Add Filenames to Your Nuxt Chunks View online Hi 👋 It's been a tough last week — my whole family has COVID, so I'm running on low energy mode. Still, I've managed to put together this issue, which includes a really useful Nuxt tip on naming file chunks. This can help you analyze large chunks in your production bundles. Hope you find it helpful! Have a lovely week ☀️ Vue 📕 From Atoms to Pages: Applying Atomic Design in Vue and Nuxt Projects 👉🏻 An in-depth blog post on how to use atomic design to structure your Vue & Nuxt projects better. 📕 The Definitive Guide To Building Cross Platform Apps With Vue (Quasar)* 👉🏻 Quasar is a Vue framework that can build apps for mobile, desktop and the web. 👉🏻 This guide touches on 11 aspects of Quasar which will help get you started. 📕 Quickly Build Fullstack Vue Apps with Directus 👉🏻 In this article, Michael Thiessen shows you how he built a survey app using Directus and Nuxt. 📹 DejaVue #E028 - Vue Performance Tips 👉🏻 Join Alex and Michael to dive into what tools Vue gives us to improve the frameworks' performance. 🛠️ Inspira UI 👉🏻 A curated collection of beautifully designed, reusable components for Vue & Nuxt. 👉🏻 It's free, open-source and highly configurable. Nuxt 📕 How we tackled our major front-end migration to Nuxt 3 👉🏻 At funda, migrating from Nuxt 2 to Nuxt 3 was a major project last year. 👉🏻 A frontend engineer talks about some challenges of this migration. 📕 Introducing hubVectorize() 👉🏻 Vectorize is a globally distributed vector database that enables you to build full-stack, AI-powered applications with Nuxt. 📕 Nuxt UI v3-alpha is out 👉🏻 Completely rebuilt from the ground up. 👉🏻 Powered by Tailwind CSS v4-alpha. 👉🏻 Integrated with Radix Vue for accessible primitives. 👉🏻 Enhanced with Tailwind Variants for flexible styling. 📹 Dependency warnings in a fresh Nuxt application? 👉🏻 When using `nuxi init` to scaffold a new Nuxt application and choose NPM as package manager, you might've seen deprecation warnings. 👉🏻 Alex explains if they are relevant and what they do say. 💡 Nuxt Tip: Add Filenames to Your Nuxt Chunks In one of my customer's projects, we had a problem with one Nuxt client chunk that was too large (>1MB). We used the nuxt analyze CLI command to analyze the production bundle and identify which chunk was too large. The command generates a URL that you can open in your browser to see a visual representation of your bundle: Unfortunatly, the chunk names are not very descriptive because they are hashed. To make them more descriptive, you can add the following code to your nuxt.config.ts nuxt.config.ts file: 1 export default defineNuxtConfig ({ 2 //... other config 3 $production : { 4 vite : { 5 $client : { 6 build : { 7 rollupOptions : { 8 output : { 9 chunkFileNames : ' _nuxt/[name].js ' , 10 entryFileNames : ' _nuxt/[name].js ' 11 } 12 } 13 } 14 } 15 } 16 }, 17 }) This way, we identified that the entry.js entry.js chunk was too large and we are now investigating how to split it into smaller chunks. 📅 Events Vue Fes Japan 2024 (19 October 2024, Otemachi, Japan) 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 📕 Testing Frontend — Lessons from over a million lines of TypeScript at Palantir 👉🏻 Focus on unit tests with the right scope, avoid unnecessary component tests, and leverage stable APIs to create scalable integration tests that require minimal maintenance. 👉🏻 Having good tests helps maximize engineering velocity, and automated generated tests may help codebases be better tested in the future. 📕 Web Components Are Not the Future 👉🏻 The author claims that web components possibly pose the biggest risk to the future of the web that he can see. 🛠️ Better Auth 👉🏻 Better Auth is a framework-agnostic authentication and authorization library for TypeScript. 👉🏻 It provides a consistent API and has a plugin ecosystem. 🛠️ CrUX Vis 👉🏻 A new, experimental, browser-based Chrome User Experience Report (CrUX) tool to allow you to visualize CrUX History API data. 😂 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 Holzapfelkreuther Str. 19, 81375 Munich, Germany {{ TrackView }}