How to use Vue DevTools with Void

Void logo

Introduction

Void is an up-and-coming full-stack web framework from VoidZero, the heavy-hitters you may remember from Vue, Vite, Vitest, and Oxc.

I've been following Void since it was announced and started to use it for a production project, even though it was pre-1.0 and even though I wasn't invited to the private Beta. (As Austin Powers one said: I like to live dangerously.)

There were some hiccups with earlier releases, certainly, but v0.28.0 is working great. One thing that's missing from the Void developer experience if you're writing a Void App (as opposed to a meta framework) using Vue* is Vue DevTools support.

I missed features from Vue DevTools, like editing component state and clicking a component to open it in my editor], so I sought a way to use Vue DevTools with Void and found it.

And, since I'm not a Greedy Gus, I'm sharing it with you. Read on to see how to add Vue DevTools to your Void project.

Prerequisites

Naturally, your Void project needs vite-plugin-vue-devtools before you can use it. Install it as a dev dependency with your preferred package manager, like Vite+:

vp add -D vite-plugin-vue-devtools

The code

Now for the good stuff. Here's the Vite configuration to add Vue DevTools to your Void Vue project:

// vite.config.ts
import { voidMarkdown } from "@void/md/plugin"
import { voidVue } from "@void/vue/plugin"
import vueDevTools from "vite-plugin-vue-devtools"
import { defineConfig } from "vite-plus"
import { voidPlugin } from "void"

export default defineConfig({
  plugins: [
    // Your project may not use all these plugins, but mine does!
    voidPlugin(),
    voidVue({ viewTransitions: true }),
    voidMarkdown(),
    // This is the line that does the magic:
    vueDevTools({ appendTo: /virtual:void-(pages|islands)-client/ }),
  ],
  [...]
}

Explainer

Why does this need to be explained? Maybe it doesn't!

The trick to getting Vue DevTools to work with a Void Vue application is in the appendTo above. Because Void handles routing and setup, there is no main.ts file like in many Vue projects. As a result, there isn't the explicit entrypoint for plugins that you might be accustomed to with a vanilla Vue project.

This code attaches to the virtual Vue app file generated by Void, giving you DevTools support without having to modify your application code.

Wrap-up

Do I need to put a bow on this post? Maybe not, but it can't hurt: 🎀.

Mastodon