Nuxt DevTools 101

Slides for v-tokyo #20

Transcript

1. Nozomu Ikuta 28th May 2024 Nuxt DevTools 101
2. @NozomuIkuta
4. • Software Engineer • Vue.js-JP Core Sta ff • UnJS Member • Nuxt / Vite Contributor
6. Introduction
7. Get an overview of Nuxt DevTools: why and what Know future of Nuxt DevTools Introduction Goals
8. Overview
9. ?…Read the o ff i cial documentation…? nuxt.com
10. Yes, I do (No, I don’t) 🥹
11. Developing Nuxt apps is still hard 🤔
12. Topic “What component uses what”
13. Topic “What component comes from where”
14. Topic “What to import, where to import”
15. Topic “How our app is configured”
16. Topic “What happens in what order”
17. Magics are not debuggable 🧙
18. Magics = Transparency 🧙
19. Transparency vs. Learnability ⚖
20. Time Maintainability by Transparency Learning Performance Trade-o ff s
21. Time Maintainability by Transparency Learning Performance
22. • Trade-o ff s between transparency and making things easier to use • Transparency would be helpful for maintainability in the long run • Needs on tools to make the learning curve smoother https://nuxt.com/blog/nuxt-devtools-v1-0
24. • The o ff i cial DevTools for Nuxt apps • Shipped as a Nuxt module • Run as another app besides yours • Extensible by module authors • Available with Vite only Nuxt DevTools Overview What Nuxt DevTools Is
25. Features Nuxt DevTools Overview • Components List / Graph / Tree • Imports / Virtual Files Viewer • Pages List • App Data • App Con fi g • Runtime Con fi g • Private Con fi g • Timeline / Hooks / Plugins • Build Analysis • Vite Transformation Viewer • Open-in-Editor links
26. DEMO
27. Future of Nuxt DevTools ⚠ Uno ff i cial Information
28. Future of Nuxt DevTools • UI Kit • Nuxt Modules Integration • Module Tamplate • Install / Self-update • Custom RPC Functions • Terminal Integration • Assets View • Nuxt Layers Support • Integration into Nuxt core • Build time / Production Support • VS Code Extension • Browser Extension https://github.com/nuxt/devtools/discussions/31 Roadmap
29. Future of Nuxt DevTools • Much more metrics • Histoire integration • Storybook is already supported! • Accessibility Hints • Development-only Built-in Logger • Data / File / Line numbers https://github.com/nuxt/devtools/discussions/29 Community Feedback https://nuxt.com/blog/nuxt-devtools-v1-0
30. Summary
31. • Nuxt DevTools makes “magics” debuggable and learnable • Nuxt DevTools is stable but may be still for early adopters • There are a lots of features on the roadmap
32. Thank you