How to stop full page reloading after backend file changes

[KhalidAshaibani]

I am using Adonisjs v6 with inertia and vuejs
I start the server using yarn dev I open the webpage in the browser, when I edit a controller, the page is fully reloaded, this is annoying since I need to fill the data of forms again and then check for the changes i made in the controller, how can I stop full page reload after backend file changes and make it only restart the backend sever

this is my vite.config.ts file:

import { defineConfig } from 'vite'
import { getDirname } from '@adonisjs/core/helpers'
import inertia from '@adonisjs/inertia/client'
import vue from '@vitejs/plugin-vue'
import adonisjs from '@adonisjs/vite/client'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
    inertia({ ssr: { enabled: true, entrypoint: 'inertia/app/ssr.ts' } }),
    vue(),
    adonisjs({ entrypoints: ['inertia/app/app.ts'], reload: ['resources/views/**/*.edge'] }),
  ],

  resolve: {
    alias: {
      '~/': `${getDirname(import.meta.url)}/inertia/`,
    },
  },
  server: {
    watch: {
      ignored: [
        '**/app/**',
        '**/bin/**',
        '**/config/**',
        '**/database/**',
        '**/resources/**',
        '**/start/**',
      ],
    },
  },
})

and this is my pakcage.json:

{
  "name": "AdonisProject",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "license": "UNLICENSED",
  "scripts": {
    "start": "node bin/server.js",
    "build": "node ace build",
    "dev": "node ace serve --hmr",
    "test": "node ace test",
    "lint": "eslint .",
    "format": "prettier --write .",
    "typecheck": "tsc --noEmit"
  },
  "imports": {
    "#controllers/*": "./app/controllers/*.js",
    "#exceptions/*": "./app/exceptions/*.js",
    "#models/*": "./app/models/*.js",
    "#helpers/*": "./app/helpers/*.js",
    "#mails/*": "./app/mails/*.js",
    "#services/*": "./app/services/*.js",
    "#listeners/*": "./app/listeners/*.js",
    "#events/*": "./app/events/*.js",
    "#middleware/*": "./app/middleware/*.js",
    "#validators/*": "./app/validators/*.js",
    "#providers/*": "./providers/*.js",
    "#policies/*": "./app/policies/*.js",
    "#abilities/*": "./app/abilities/*.js",
    "#database/*": "./database/*.js",
    "#tests/*": "./tests/*.js",
    "#start/*": "./start/*.js",
    "#config/*": "./config/*.js"
  },
  "devDependencies": {
    "@adonisjs/assembler": "^7.8.2",
    "@adonisjs/eslint-config": "^2.0.0",
    "@adonisjs/prettier-config": "^1.4.4",
    "@adonisjs/tsconfig": "^1.4.0",
    "@japa/assert": "^4.0.1",
    "@japa/plugin-adonisjs": "^4.0.0",
    "@japa/runner": "^4.2.0",
    "@swc/core": "1.11.24",
    "@types/luxon": "^3.7.1",
    "@types/node": "^22.15.18",
    "@vitejs/plugin-vue": "^6.0.1",
    "eslint": "^9.26.0",
    "hot-hook": "^0.4.0",
    "pino-pretty": "^13.0.0",
    "prettier": "^3.5.3",
    "ts-node-maintained": "^10.9.5",
    "typescript": "~5.8.3",
    "vite": "^6.3.5"
  },
  "dependencies": {
    "@adonisjs/auth": "^9.4.0",
    "@adonisjs/core": "^6.18.0",
    "@adonisjs/cors": "^2.2.1",
    "@adonisjs/inertia": "^3.1.1",
    "@adonisjs/lucid": "^21.6.1",
    "@adonisjs/session": "^7.5.1",
    "@adonisjs/shield": "^8.2.0",
    "@adonisjs/static": "^1.1.1",
    "@adonisjs/vite": "^4.0.0",
    "@formkit/auto-animate": "^0.9.0",
    "@inertiajs/vue3": "^2.1.6",
    "@tailwindcss/vite": "^4.1.13",
    "@vinejs/vine": "^3.0.1",
    "@vue/server-renderer": "^3.5.21",
    "adonis-lucid-soft-deletes": "^2.1.0",
    "axios": "^1.12.2",
    "edge.js": "^6.2.1",
    "luxon": "^3.7.2",
    "mysql2": "^3.14.5",
    "reflect-metadata": "^0.2.2",
    "vue": "^3.5.21"
  },
  "hotHook": {
    "boundaries": [
      "./app/controllers/**/*.ts",
      "./app/middleware/*.ts"
    ]
  },
  "prettier": "@adonisjs/prettier-config"
}