Javascript is required
Weekly Vue News Logo Weekly Vue News
a { color: #42B883; text-decoration: none; } a:hover { color: #33a06f } .overflow-auto { overflow: auto } p {margin: 5px 0px} .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 #82 - Use Nuxt DevTools to Know Your App Better #preview Ready for your weekly Vue & Nuxt dose?

View and discuss online, Weekly Vue News #82

Use Nuxt DevTools to Know Your App Better

Hi ๐Ÿ‘‹

Last week I started a new project as a freelancer at ROLLER. They are replacing the old shop website with Nuxt 3 and need support. I'm excited; it's my first time working in eCommerce.

My talk "ref() vs. reactive(): What to choose using Vue 3 Composition API?" has been selected for the line-up of Vue.js Live 2023 ๐Ÿ˜ฎ

Additionally, you can now sponsor this newsletter.

Have a lovely week โ˜€๏ธ

To support me:

Nuxt Tip: Use DevTools to Know Your App Better

Nuxt DevTools is experimental and under heavy development. APIs are subject to change.

You need Nuxt v3.1.0 or higher to use DevTools.


To enable Nuxt DevTools you can opt-in per project by running the following command:

1npx nuxi@latest devtools enable

Nuxt DevTools will be installed as a global module and only activated for the projects you enabled. The configuration will be saved in your local ~/.nuxtrc file, so it doesn't affect your team unless they also opt-in.

Next, you need to restart your Nuxt server and open it in your browser.

To toggle the DevTools, you can either click the Nuxt icon at the bottom of the browser window or press Alt / โŒฅ Option + D:


Nuxt DevTools is a set of visual tools available right inside your app.

Here is a list of the current features:

  • Pages: The pages tab shows your current routes and provides a quick way to navigate them.
  • Components: Components tab shows all the components you are using in your app and where they are from.
  • Imports: Imports tab shows all the auto-imports registered to Nuxt.
  • Modules: Modules tab shows all the modules you have installed and the links to their documentation.
  • Hooks: Hooks tab can help you to monitor the time spent in each hook to identify performance bottlenecks.
  • Virtual Files: Virtual Files tab shows the virtual files generated by Nuxt to support the conventions.
  • Inspect: Inspect expose the vite-plugin-inspect integration, allowing you to inspect the transformation steps of Vite.

Check the official docs to get more details about the features. The official roadmap is also interesting.

Disable DevTools

Of course, you can disable DevTools per project by running:

1npx nuxi@latest devtools disable
Curated Vue Content๐Ÿ“• Ref vs. Reactive โ€” Which is Best?
๐Ÿ‘‰๐Ÿป Michael discusses the difference between ref and reactive, and which one is better
๐Ÿ‘‰๐Ÿป His short answer: "default to using ref wherever you can"
๐Ÿ“• Micro frontend with Vue + Vite

๐Ÿ‘‰๐Ÿป Microfrontend: "various parts of a large application separated into small parts, each of these parts contained in a repository, and being taken care of by a team"
๐Ÿ“น Scalable Front End Architecture with the Composition API and Composable Functions

๐Ÿ‘‰๐Ÿป Learn how to leverage Vue 3's Composition API and Composable functions to discuss a scalable front-end architecture pattern.
๐Ÿ› ๏ธ Vuestic UI v1.6
๐Ÿ‘‰๐Ÿป A Vue 3 based UI framework with 60+ components
๐Ÿ‘‰๐Ÿป Now has Tailwind support
๐Ÿ‘‰๐Ÿป A new select autocomplete component
๐Ÿ‘‰๐Ÿป and more...
Quote of the weekCurated Web Development Content๐Ÿ› ๏ธ BrandBird

๐Ÿ‘‰๐Ÿป BrandBird turns your screenshots into captivating graphics aligned with your branding to help you boost your social media reach & engagement!
๐Ÿ“• 10 Web Development Trends in 2023

๐Ÿ‘‰๐Ÿป Robin takes a considered look at new web dev trends that we should be paying attention to this year, and why they matter.
๐Ÿ“• Design Patterns in TypeScript

๐Ÿ‘‰๐Ÿป A fantastic catalog of examples, complete with diagrams and explanations.
๐Ÿ“• 5 Tips to creating a (good) pull request
๐Ÿ‘‰๐Ÿป Keep it short.
๐Ÿ‘‰๐Ÿป Add more information i.e. the what, why and screenshots.
๐Ÿ‘‰๐Ÿป Leave in-line code comments.
๐Ÿ‘‰๐Ÿป more in the article...
๐Ÿ˜ฎ GitHub Copilot is on ๐Ÿ”ฅ
GitHub revealed some interesting findings from their research:
๐Ÿ‘‰๐Ÿป It makes developers code 55% faster
๐Ÿ‘‰๐Ÿป It helps developers feel more fulfilled at work
๐Ÿ‘‰๐Ÿป It generates 46% of all the code
๐Ÿ“น Youโ€™re probably using Lighthouse wrong

๐Ÿ‘‰๐Ÿป Filip Rakowski, Co-founder and CTO of VueStorefront, takes a look at how we misuse the most common tool to measure web performance: Lighthouse.
๐Ÿ› ๏ธ Tailwind Elements

๐Ÿ‘‰๐Ÿป "Bootstrap components recreated with Tailwind CSS, but with better design and more functionalities."
Comments? Join the discussion about this issue here.

Until next week,

Michael Hoffmann (Curator) Share via Facebook Twitter LinkedIn Unsubscribe from this newsletter
Holzapfelkreuther Str. 19, 81375 Munich, Germany
Weekly Vue News LogoWeekly newsletter that gives you high-quality tips and curated content about Vue & Nuxt.
I will never share any of your personal data.
ยฉ 2023 All rights reserved.