Weekly Vue News #167

Add Filenames to Your Nuxt Chunks

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.tsnuxt.config.ts file:

1export 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.jsentry.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.