Vite & Vitest example

import AddDepsTabs from '@site/src/components/AddDepsTabs'; import CreateDepTabs from '@site/src/components/CreateDepTabs'; import HeadingApiLink from '@site/src/components/Docs/HeadingApiLink';

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).

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

Setup

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

:::tip

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

:::

# Inherit tasks from the `vite` and `vitest` presets
# https://github.com/moonrepo/moon-configs
tags: ['vite', 'vitest']

Configuration

Root-level

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.

Project-level

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.