Slide 1
Slide 1 text
Nozomu Ikuta 28th May 2024
Nuxt DevTools 101
Slide 2
Slide 2 text
@NozomuIkuta
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
• Software Engineer
• Vue.js-JP Core Sta
ff
• UnJS Member
• Nuxt / Vite Contributor
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
Introduction
Slide 7
Slide 7 text
Get an overview of Nuxt DevTools: why and what
Know future of Nuxt DevTools
Introduction
Goals
Slide 8
Slide 8 text
Overview
Slide 9
Slide 9 text
?…Read the o
ff i
cial documentation…?
nuxt.com
Slide 10
Slide 10 text
Yes, I do (No, I don’t)
🥹
Slide 11
Slide 11 text
Developing Nuxt apps is still hard
🤔
Slide 12
Slide 12 text
Topic
“What component uses what”
Slide 13
Slide 13 text
Topic
“What component comes from where”
Slide 14
Slide 14 text
Topic
“What to import, where to import”
Slide 15
Slide 15 text
Topic
“How our app is configured”
Slide 16
Slide 16 text
Topic
“What happens in what order”
Slide 17
Slide 17 text
Magics are not debuggable
🧙
Slide 18
Slide 18 text
Magics = Transparency
🧙
Slide 19
Slide 19 text
Transparency vs. Learnability
⚖
Slide 20
Slide 20 text
Time
Maintainability
by Transparency
Learning
Performance
Trade-o
ff
s
Slide 21
Slide 21 text
Time
Maintainability
by Transparency
Learning
Performance
Slide 22
Slide 22 text
• 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
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
• 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
Slide 25
Slide 25 text
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
Slide 26
Slide 26 text
DEMO
Slide 27
Slide 27 text
Future of Nuxt DevTools
⚠ Uno
ff
i
cial Information
Slide 28
Slide 28 text
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
Slide 29
Slide 29 text
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
Slide 30
Slide 30 text
Summary
Slide 31
Slide 31 text
• 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
Slide 32
Slide 32 text
Thank you