Vite not detecting changes (vue/pug)

Vite fails to detected changes in PUG files that are referenced by other PUG files. For example:

div 
    include ./pug/index-2.pug

The index-2.pug is placed next to index.pug, but Vite only detects changes for the parent file. Maybe that is because index-2.pug is not referenced in the .vue file directly. But that's a huge deal breaker! Is there any way to fix this?

Update:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    port: 8080
  }
})

and package.json

{
  "name": "booqall_ui",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "axios": "^1.4.0",
    "buffer": "^6.0.3",
    "pinia": "^2.1.3",
    "pug": "^3.0.2",
    "socket.io-client": "^4.7.0",
    "underscore": "^1.13.6",
    "vite-plugin-pug": "^0.3.2",
    "vue": "^3.3.4",
    "vue-router": "^4.2.2",
    "vue-toast-notification": "^3.1.1"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.2.0",
    "@tsconfig/node18": "^2.0.1",
    "@types/node": "^18.16.18",
    "@types/underscore": "^1.11.5",
    "@vitejs/plugin-vue": "^4.2.3",
    "@vue/eslint-config-prettier": "^7.1.0",
    "@vue/eslint-config-typescript": "^11.0.3",
    "@vue/tsconfig": "^0.4.0",
    "eslint": "^8.39.0",
    "eslint-plugin-vue": "^9.11.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.8.8",
    "sass": "^1.63.6",
    "typescript": "~5.0.4",
    "vite": "^4.3.9",
    "vue-tsc": "^1.6.5"
  }
}

The Vite+Vue doesn't support development mode with reloading PUG's includes. But that's not a problem. There should be some mindset shift to see Vue components as building blocks of an application, not PUG files. So you just wrap your PUG code into Vue SFCs and use these components in other PUG code. The huge benefit of that is that you can futher extend those PUG based components with scoped/css module styles and JS code.

<script setup>
    import MyPug from './MyPug.vue'; // usuall SFC with pug template
</script>

<template lang="pug">
div 
    my-pug

</template>

The OP complained that Webpack offers pug includes smoothly. But there's a huge difference. Webpack is a bundler, Vite isn't. Vite uses Rollup.js as a bundler. So you can easily recreate your Webpack workflow:

• use npx vite build --watch --minify=true (you should probably want to turn off treeshaking in the rollup options).
• use build.watch.include Vite's options to include your PUG files for watching and rebuild on changes
• use npx vite preview to start a preview server
• (out of scope of Vite): use some tool to live reload when the build files are re-build. I don't mind to reload manually

After investigating this issue it turned out to be a Design Flaw in Vite. The framework has heavily designed based on the assumption that all markup languages work similar to Html without any advanced functionalities. For that reasons, it cannot understand any dependency between PUG files. In fact when a change is made to a pug dependency, it is detected! but the framework is too dump to understand that it is a dependency of another pug and that other pug should be reloaded. I absolutely discourage Vite after running to this issue as we had to migrate back to Webpack.