State of devtools

Guillaume Chau

@Akryum

Vue.js Core Team

Vue Devtools 6.6

New UI

Manifest V3

Vue 3 frontend

Much more...

Nuxt Devtools

Vue Devtools Next

Devtool Kit

The Goals

Have a common foundation

Devtools compatibility with each other

Make it easy to build devtools

Others?...

SDK to create devtools

Framework agnostic

Multi-environments

Devtools = many situations and environments

Applets

3 types of applet modules

Main: usually in Vite context

Page: access user apps in the page

View: inside the UI (usually in tabs)

Applet APIs

Remote Procedure Call

Tabs View: Iframe, Commands, Terminal, Inspector

Commands & Actions (& Prompts)

Devtools = Applets

Mix & Match!

What you are about to see is prototype code - everything can change

What's next?

Finnish first draft of the SDK

Rebase Nuxt and Vue devtools

Iterate until it's purrrrfect

Get a unified and awesome DX

Thank you!

State of devtools (Amsterdam 2024)

By Guillaume Chau

State of devtools (Amsterdam 2024)

  • 312