Weekly Vue News #79 - Analyze Production Bundle in Nuxt

a { color: #616161; text-decoration: underline; text-decoration-color: #3fb983; text-decoration-thickness: 2px; text-underline-offset: 3px; }

.ct-36e85c{color:#6A9955} .ct-8f9f80{color:#C8C8C8} .ct-ae5419{color:#808080} .ct-78eef5{color:#9CDCFE} .ct-0d8ec4{color:#B5CEA8} .ct-c2bbeb{color:#CE9178} .ct-c746e8{color:#DCDCAA} .ct-b1c360{color:#4FC1FF} .ct-220622{color:#569CD6} .ct-e8c10a{color:#C586C0} .ct-f3f815{color:#D4D4D4}

FOLLOW_UP_PLACEHOLDER

#title Weekly Vue News #79 - Analyze Production Bundle in Nuxt #preview Ready for your weekly Vue & Nuxt dose?

View and discuss online,

Weekly Vue News #79

Nuxt Tip: Analyze Production Bundle

Hi 👋

I'm currently working on possible topics for talks I want to do this year. Additionally, I updated my three main private projects (mokkapps.de, weekly-vue.news and codesnap.dev) and fixed some bugs.

I also added a new feature to my newsletter: Each Friday, I send a follow-up email to verified subscribers that haven't opened this week's issue. Let me know if you think this is a stupid idea.

Have a nice week ☀️

To support me:

😘 Recommend the newsletter to your friends: it really helps!
💸 Sponsor the newsletter
🧵 Retweet the latest Twitter thread
📨 Reply to this email: feedback is welcome

Nuxt Tip: Analyze Production Bundle

nuxi analyze is an experimental feature that builds your Nuxt application and analyses the production bundle.

To get started, simply call the following command in your project's directory:


    npx nuxi analyze

This command creates a local server to view your production bundles:

You can select if you want to view bundle stats for the client or the Nitro server.

The following pictures show the client and server bundle stats for weekly-vue.news:

Curated Vue Content

📕 Options API vs Composition API

👉🏻 In this article, Charles explores the differences between the two approaches and help you understand when to use each one.

vueschool.io

📕 Vue 3 - Why computed functions can make your code cleaner

👉🏻 "One of the features that make Vue 3 stand out is its support for computed functions (Vue 2 also has this), which can help make your code a lot cleaner and more efficient."

medium.com

📕 Using Notion as a Headless CMS with Nuxt

👉🏻 This tutorial should give you a good understanding of how to use Notion as a headless CMS with Nuxt 3.

dev.to

📕 Work with Vite and NX

👉🏻 This practical post will help you combine Vite with the NX monorepo tool.

medium.com

🛠️ TresJS

👉🏻 A new declarative way of building 3D Threejs with Vue components.

👉🏻 Playground: https://playground.tresjs.org/

tresjs.org

Quote of the week

Curated Web Development Content

📕 Handling errors like a pro in TypeScript

👉🏻 “Learn the design pattern I use to handle errors and write cleaner code.”

engineering.udacity.com

📕 Awesome Software and Architectural Design Patterns

👉🏻 This repository contains a curated list of software and architecture-related design patterns.

github.com

📕 How To Debug

👉🏻 Phil's explains debugging steps that are not specific to a particular language or paradigm

👉🏻 (1) Reproduce the bug.

👉🏻 (2) Reproduce it again.

👉🏻 (3) Don't reproduce it.

👉🏻 and more...

philbooth.me

🎧 Learn How to Migrate Large TypeScript Codebases

👉🏻 A podcast series of in-depth interviews where Joe Previte chats with experts, open-source maintainers, and web developers to distill the practice of migrating large-scale applications to TypeScript.

www.typescriptcourse.com

🛠️ Carbonly

👉🏻 Chromium running inside your terminal

github.com

Comments? Join the discussion about this issue here.

Until next week,

Michael Hoffmann (Curator)

Share via

Facebook

Twitter

Unsubscribe from this newsletter
Holzapfelkreuther Str. 19, 81375 Munich, Germany