Skip to main content

Vite & Vitest example

In this guide, you'll learn how to integrate Vite and Vitest into moon.

Begin by creating a new Vite project in the root of an existing moon project (this should not be created in the workspace root, unless a polyrepo).

yarn create vite

If you plan on using Vitest, run the following command to add the vitest dependency to a project, otherwise skip to the setup section.

yarn workspace <project> add --dev vitest


Since Vite is per-project, the associated moon tasks should be defined in each project's moon.yml file.


We suggest inheriting Vite tasks from the official moon configuration preset.

# Inherit tasks from the `vite` and `vitest` presets
tags: ['vite', 'vitest']



We suggest against root-level configuration, as Vite should be installed per-project, and the vite command expects the configuration to live relative to the project root.


When creating a new Vite project, a vite.config.<js|ts> is created, and must exist in the project root.

import { defineConfig } from 'vite';

export default defineConfig({
// ...
build: {
// These must be `outputs` in the `build` task
outDir: 'dist',
test: {
// Vitest settings

If you'd prefer to configure Vitest in a separate configuration file, create a vitest.config.<js|ts> file.