DEV Community

Cover image for I Tried Vite+ and Replaced My Entire Frontend Toolchain
Erik Hanchett
Erik Hanchett

Posted on

I Tried Vite+ and Replaced My Entire Frontend Toolchain

#webdev #vite #frontend #javascript

If you're a frontend developer in 2026, you've probably had to deal with a lot of different tooling. Package managers, linters, formatters, pre-commit hooks, test runners. The list goes on. And every team has opinions on which ones to use.

I've worked on apps where hours if not days went into tweaking, upgrading, and swapping out tooling. And the bikeshedding when someone proposes something new in a meeting? Don't get me started. Earlier in my career I remember spending over an hour debating whether we should add Vitest or keep the old test runner. We ended up not changing anything.

That's why I really like Vite+. Vite+ is a unified toolchain that acts as an entrypoint for web development. It comes out of the team from VoidZero, the company founded by Evan You, the creator of Vite and Vue. You can think of it like a ShamWow for your toolchain. One tool that replaces your linter, formatter, test runner, bundler, and package manager all at once.

I also made a full video walkthrough where I set up a Vue project from scratch, run into the Nuxt issues in real time, and show the formatting and testing in action. If you'd rather watch than read, check it out below!

Table of Contents

What's inside Vite+

Instead of having to worry about building, installing, adding every tool you need when building an app, and dealing with configurations in 10 different files, you can now rely on one Vite powered toolchain. In essence, Vite+ combines all of these tools into one.

  • Vite as your build tool, now even faster with Vite 8
  • Vitest for testing
  • Oxlint for linting, replacing ESLint
  • Oxfmt for formatting, replacing Prettier and Biome
  • Rolldown for bundling, replacing ESBuild
  • tsdown for library bundling
  • Node.js runtime and package manager built in

Since many of these tools are written in Rust, the performance gains are real. According to VoidZero's announcement, Oxlint runs 50 to 100x faster than ESLint, Oxfmt formats up to 30x faster than Prettier, and production builds with Vite 8 and Rolldown are 1.6x to 7.7x faster than Vite 7. I had to test this out in my own projects, and using the vp check command was finishing in under a second on fairly large code bases.

A few caveats

While having everything in one tool helps, it does have some DX papercuts at this point. For example, while they do support most package managers (pnpm, npm, yarn), they are missing bun. There is also some more work to be done with the vite.config.ts on Nuxt and TanStack Start since the tooling for each aren't quite there yet. Nevertheless it's early days in Vite+, and it's still in alpha, so I'm sure the updates are happening soon.

I'd imagine if you are not sold on the Vite ecosystem, or using toolchains in general, this probably isn't the tool for you. I, like many other developers, have opinions, and often when I create apps I have very bespoke patterns I use. In my case, I use npm create vue@latest for every Vue app, and npm create nuxt@latest for Nuxt apps. The Vue scaffolder does let you opt into ESLint, Prettier, and Vitest during setup, which is nice. But each one gets its own config file, you still have to make sure they play well together, and things like pre-commit hooks are on you to wire up with husky or lint-staged. It adds up. I also have a very specific set of skills and markdown files I use with Kiro, to help me code.

With Vite+, all of that comes out of the box. One vp create vue and I have linting, formatting, testing, and pre-commit hooks ready to go in a single vite.config.ts. That's what sold me on it.

Let's take a look at how to set it up.

Getting started

As described in the Vite+ setup guide you can install it on your macOS/Linux with a simple curl command.

curl -fsSL https://vite.plus | bash
Enter fullscreen mode Exit fullscreen mode

That should be it!

During the install you'll be asked a few questions around how Vite+ should manage your global Node.js runtime and package manager. You can opt-out of this, and use nvm or whatever else you'd like. However, I actually think this is really nice feature. With Vite+ you can use the vp env command to switch between environments really easily.

From here you can either start creating apps, or migrate existing Vite apps over. I've only really tested the creating apps options, so we'll look at that. I have seen a few people using the vp migrate command to do migration. It seems to work OK, but still requires manual intervention. One cool thing from the Vite+ announcement is that they provide a migration prompt you can paste directly into your AI coding agent. So if you're using Kiro or kiro-cli, you could have it handle the migration for you and just review the changes after. Here's the prompt:

Migration prompt: Migrate this project to Vite+. Run vp help to understand Vite+'s capabilities. Migrations can be run using vp migrate. Run vp help migrate for options. After the migration, verify the changes and make sure that type checking, linting, formatting, and tests pass. High-five your human when you are done.

Creating your first app

After installation you can then create a new app using the vp create command. This will then ask a few quick questions on what kind of application you'd like and it will then scaffold it all for you.

Image of vp create

As of this blog post it defaults to a non JS Framework solution. While this is fine for a demo, I don't really get it, because I don't think many people today create websites without some sort of framework or library. Instead you can use this command.

vp create <template>
Enter fullscreen mode Exit fullscreen mode

Right now it supports, vite, @tanstack/start, svelte, next-app, nuxt, react-router and vue. As I mentioned earlier with Nuxt they have not combined the nuxt.config.ts and the vite.config.ts together, so while you can use it, it's not quite ready yet. I also had issues with the next-app. I wasn't sure if it was trying to use a Vite-based Next app or the standard one. Either way it wasn't quite working.

After adding a template name it will then setup your app. It should look familiar if you're using something like npm create vite.

After install you'll then have a unified vite.config.ts file that you can then enter all your configurations for linting, formatting and testing. This worked surprisingly well and I was happy not having to worry about where to add each file.

Since Vite+ uses the Oxc set of tools, I added in the official Oxc extension for formatting and linting. This made it even easier so that my IDE was aware of these tools.

Important commands

Beyond vp create you have a number of interesting commands you can run with vp. Here are a few I've found useful. Although, if you'd like a full list please check out the official guide.

Checking and linting 

vp check
Enter fullscreen mode Exit fullscreen mode

The vp check is the default command for fast static checks in Vite+. It combines both the formatting with Oxfmt and the linting with Oxlint, and the TypeScript type checks via tsgolint. Combined this is an extremely fast static checker.

Under the hood, tsgolint is powered by tsgo, the official Go port of the TypeScript compiler from Microsoft. This means your type checking is running at native speed, not through Node.js. It's a big reason why vp check feels so fast.

If you like you can have it try to fix the issues.

vp check --fix
Enter fullscreen mode Exit fullscreen mode

In my tests, this still takes a lot of manual intervention as expected. What's nice is that a competent AI coding tool, like Kiro, can knock these type errors out in no time.

Vite+ also has built in pre-commit hook support. When you scaffold a project with vp create, it can set up hooks for you automatically. You can also run vp prepare to install them later, and configure what runs on staged files right in your vite.config.ts. No more husky or lint-staged setup.

Formatting 

vp fmt
Enter fullscreen mode Exit fullscreen mode

This will run the Oxfmt formatter. It has full Prettier compatibility and is designed as a drop-in replacement for Prettier.

Personally, I love prettier, but it does have its quirks. What's really nice is you can just go into the vite.config.ts file and add any rules you need.

import { defineConfig } from 'vite-plus';

export default defineConfig({
  fmt: {
    singleQuote: true,
  },
});
Enter fullscreen mode Exit fullscreen mode

When I first setup my app using vp create vue it asked me if I'd like to update the .vscode/settings.json. I'd highly recommend this so if you're using the Oxfmt extension it can find your formatting settings. Otherwise you can manually add it.

{
  "oxc.fmt.configPath": "./vite.config.ts"
}
Enter fullscreen mode Exit fullscreen mode

Testing

I love testing, so running tests with Vitest is great.

vp test
Enter fullscreen mode Exit fullscreen mode

This will kickoff the vitest test runner in your project. There is also a watch and a run --coverage command. And like all the other commands you can edit the configuration in the vite.config.ts file.

import { defineConfig } from 'vite-plus';

export default defineConfig({
  test: {
    include: ['src/**/*.test.ts'],
  },
});
Enter fullscreen mode Exit fullscreen mode

One quick annoyance with running the vp commands is that they do override your package.json scripts. So to run anything in your scripts you must run vp run <command>. Otherwise it will run the built in commands. I was watching a live stream with Theo Browne from T3 and he hated this. I'm on the fence, but maybe they'll change it in the future.

Caching with vp run

Another nice feature is caching.

vp run --cache build
Enter fullscreen mode Exit fullscreen mode

This will cache the build and if nothing changes the output is replayed on the next run. I have not used this command personally but anything to speed up builds I'm all for.

Managing Node.js with vp env

Another really neat feature is the vp env command.

vp env <command>
Enter fullscreen mode Exit fullscreen mode

vp env manages Node.js versions globally and per project. By default, Vite+ runs in managed mode, meaning it controls which Node.js version is used. It stores the runtime and related files in ~/.vite-plus (you can override this with VITE_PLUS_HOME).

If you don't want Vite+ managing your Node.js, you can switch to system-first mode:

vp env off
Enter fullscreen mode Exit fullscreen mode

This tells the shims to prefer your system Node.js and only fall back to the Vite+ managed runtime when needed. If you ever want to switch back, just run:

vp env on
Enter fullscreen mode Exit fullscreen mode

You can also pin a certain Node.js version in the current directory with:

vp env pin
Enter fullscreen mode Exit fullscreen mode

Or install an entirely new version.

vp env install
Enter fullscreen mode Exit fullscreen mode

I really liked all this flexibility with the package manager. I personally use nvm but I like the idea of this being handled by Vite+. One less thing to worry about.

While I haven't tried it, I'm curious to see how well this works in a CI environment. It looks like you can easily set this up in your GitHub actions and run all the checks you need.

- uses: voidzero-dev/setup-vp@v1
  with:
    node-version: '22'
    cache: true
- run: vp install
- run: vp check
- run: vp test
- run: vp build
Enter fullscreen mode Exit fullscreen mode

Conclusion

I could definitely see Vite+ saving me time when I create a new application. Having one configuration file to put everything in, and not having to think about which linter, formatter, or test runner to install, is a nice change. The vp commands are straightforward and the whole thing just works.

With that said, this project is still in alpha, and we'll see how much it catches on. With so much of the frontend ecosystem already using Vite, it makes sense for a tool like Vite+ to exist. Let me know if you would use something like this. I think it's very interesting. Thanks!

Top comments (2)

Collapse
 
jess profile image
Jess Lee •

Love your videos!

Collapse
 
erikch profile image
Erik Hanchett •

Thanks @jess !