#title Weekly Vue News #82 - Use Nuxt DevTools to Know Your App Better #preview Ready for your weekly Vue & Nuxt dose?
Use Nuxt DevTools to Know Your App Better
Hi ๐
Last week I started a new project as a freelancer at
My talk "ref() vs. reactive(): What to choose using Vue 3 Composition API?" has been selected for the line-up of
Additionally, you can now
Have a lovely 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
You need Nuxt v3.1.0 or higher to use DevTools.
Installation
To enable
1 npx 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:
Features
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
Disable DevTools
Of course, you can disable DevTools per project by running:
1 npx nuxi@latest devtools disable
๐๐ป Michael discusses the difference between ref and reactive, and which one is better |
๐๐ป His short answer: "default to using ref wherever you can" |
๐๐ป 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"
medium.com๐๐ป Learn how to leverage Vue 3's Composition API and Composable functions to discuss a scalable front-end architecture pattern.
www.youtube.com๐๐ป A Vue 3 based UI framework with 60+ components |
๐๐ป Now has Tailwind support |
๐๐ป A new select autocomplete component |
๐๐ป and more... |
๐๐ป BrandBird turns your screenshots into captivating graphics aligned with your branding to help you boost your social media reach & engagement!
www.brandbird.app๐๐ป Robin takes a considered look at new web dev trends that we should be paying attention to this year, and why they matter.
www.robinwieruch.de๐๐ป A fantastic catalog of examples, complete with diagrams and explanations.
refactoring.guru๐๐ป Keep it short. |
๐๐ป Add more information i.e. the what, why and screenshots. |
๐๐ป Leave in-line code comments. |
๐๐ป more in the article... |
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 |
๐๐ป Filip Rakowski, Co-founder and CTO of VueStorefront, takes a look at how we misuse the most common tool to measure web performance: Lighthouse.
www.youtube.com๐๐ป "Bootstrap components recreated with Tailwind CSS, but with better design and more functionalities."
tailwind-elements.comUntil next week,
Holzapfelkreuther Str. 19, 81375 Munich, Germany