Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

stratboy's avatar

Why Vite doesn't refresh upon scripts/css changes?

Hi! Just curious, because maybe I'm missing something... Docs say that:

When the refresh option is true, saving files in the following directories will trigger the browser to perform a full page refresh while you are running npm run dev:

    app/View/Components/**
    lang/**
    resources/lang/**
    resources/views/**
    routes/**

Well, this feels quite strange to me, since some of the main reasons one would like to refresh is js/css changes, and those are not included in the list above. Why?

I know I can add them by configuring Vite, but just curious shy they're not included by default.

0 likes
5 replies
LaryAI's avatar
LaryAI
AI
2 years ago
Level 58

It seems like there might be a bit of confusion regarding the behavior of Vite and the directories you've listed. Vite is a modern frontend build tool that provides a fast development environment with features like Hot Module Replacement (HMR). By default, Vite should automatically refresh the page or update the modules when you make changes to your JavaScript or CSS files.

The directories you've listed (app/View/Components/**, lang/**, resources/lang/**, resources/views/**, routes/**) are more related to a Laravel project structure, and they are not typically the directories where your JavaScript and CSS assets would reside. In a standard Laravel project using Vite, your JavaScript and CSS files would typically be located in the resources/js/ and resources/css/ directories, respectively.

Vite should be set up to watch for changes in your JavaScript and CSS files out of the box. If it's not refreshing upon changes to these files, there might be an issue with your Vite configuration or the way your project is set up.

Here's what you can do to ensure that Vite is watching your JavaScript and CSS files:

  1. Check your vite.config.js file to make sure it's correctly configured to watch the appropriate directories. If you've customized the configuration, ensure that you haven't inadvertently excluded your resources/js/ and resources/css/ directories.

  2. Ensure that you are running Vite in development mode by using the npm run dev command, which should enable HMR by default.

  3. If you've added custom paths that you want Vite to watch for full page refreshes, you can configure them in your vite.config.js file like this:

export default {
  // ... other configurations
  server: {
    watch: {
      // Add custom paths to watch for full page refreshes
      additionalPaths: (watcher) => {
        watcher.add('path/to/your/custom/directory/**');
      }
    }
  }
};
  1. If you're still experiencing issues, try clearing the cache or restarting the Vite server.

If you've followed these steps and Vite is still not refreshing upon changes to your JavaScript or CSS files, you may want to check the official Vite documentation or seek support from the community for more specific troubleshooting related to your project setup.

stratboy's avatar

Lary answer was not correct since I'm using default Vite config, and because I copied the text and list above directly from official Laravel docs. That's written here:

https://laravel.com/docs/10.x/vite#blade-refreshing-on-save

And my current Vite config:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/scss/test.scss',
                'resources/js/app.js',
                'resources/js/seed-create.js',
            ],
            refresh: true,
        }),
    ],
});

Any idea?

stratboy's avatar

@arifhossen Mmm I see now that, despite what official docs above write, it DOES refresh when changing 'resources/css/app.css' o 'resources/js/app.js', but not when chaging 'resources/js/seed-create.js' or 'resources/scss/test.scss', and I guess that's because they're page-specific assets that I'm retrieving without the @vite directive. The reason why I'm doing without @vite for them, is that otherwise it would inject its server client 2 times.

1 like

Please or to participate in this conversation.