• Docs
  • Setup
  • Vite Plugin - Watch-and-Run

⚡How to - vite-plugin-watch-and-run


If you have @kitql/all-in you don't need to install this manually.

If you want to install it stand alone, please do

yarn add -D vite-plugin-watch-and-run


Add watchAndRun plugin with the following configuration:

  • watch: a glob pattern to watch for changes. This will be matched against the absolute path for altered files.
  • run: a command to trigger when a file change is detected (You can be very creative 🥳!)
import path from 'path'
import watchAndRun from 'vite-plugin-watch-and-run'
/** @type {import('vite').UserConfig} */
const config = {
  plugins: [
        name: 'gen',
        watchKind: ['add', 'change', 'unlink'],
        watch: path.resolve('src/**/*.(gql|svelte)'),
        run: 'npm run gen',
        delay: 300
export default config

Side Notes

  • Full list of watchKind can be found here: https://github.com/paulmillr/chokidar#api

  • delay is good in case you have 200 files added realy fast! Like this the cmd is executed only once.

  • For the run command we recommend to use npm run xxx as it will work for npm, yarn and pnpm 🙃

Go back to Get Started.

Last updated on November 26, 2022