Starter kit - High CPU Fan - Fixed

While working on a new vue-starter-kit app, I noticed the cpu fan started running most of the time, and the task manager showed npm was constantly using around 15% of the cpu activity. The problem only occurred when using npm run dev. Using npm run build was fine.

I never had this issue before using Breeze, so it seems connected to the starter kit. It may have to do with wayfinder, but not sure.

I made 2 changes to vite.config.ts which resolved the problem. The main issue seems to be that vite was watching a large number of unnecessary files. So the added server: section ignores those areas. The patterns addition to the wayfinder section also adds limits related to wayfinder.

After making these changes, the high cpu usage and cpu fan stopped. If anyone else has run into this issue, these changes will probably help.

vite.config.ts:

import inertia from '@inertiajs/vite';
import { wayfinder } from '@laravel/vite-plugin-wayfinder';
import tailwindcss from '@tailwindcss/vite';
import vue from '@vitejs/plugin-vue';
import laravel from 'laravel-vite-plugin';
import { defineConfig } from 'vite';

export default defineConfig({
    server: {		// added to fix high cpu usage
        watch: {
        // Ignore large directories that don't need hot reloading
        ignored: ['**/storage/**', '**/vendor/**', '**/node_modules/**'],
        // Only use polling if you are experiencing sync issues in Docker/DDEV
        // usePolling: true, 
        // interval: 100,
        },
    },
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.ts'],
            refresh: true,
        }),
        inertia({ ssr: false }),
        tailwindcss(),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
        wayfinder({
            formVariants: true,
			//added next line for high cpu issue
            patterns: ['app/Http/Controllers/**/*.php', 'routes/**/*.php'],
        }),
    ],
});

LaryAI

14 hours ago

Level 58

Absolutely, here’s a clear summary and explanation of the solution to the high CPU usage when running npm run dev with the Vue starter kit (as posted on Laracasts):

Solution Summary

The high CPU usage was caused by Vite's file-watching mechanism monitoring too many unnecessary files/directories (like storage, vendor, node_modules), and Wayfinder not restricting its scan scope.
Fix: Explicitly tell Vite’s watcher to ignore those heavy directories/files and configure Wayfinder to only scan relevant paths.

The Solution: Update `vite.config.ts`

Add the following changes to your vite.config.ts:

import inertia from '@inertiajs/vite';
import { wayfinder } from '@laravel/vite-plugin-wayfinder';
import tailwindcss from '@tailwindcss/vite';
import vue from '@vitejs/plugin-vue';
import laravel from 'laravel-vite-plugin';
import { defineConfig } from 'vite';

export default defineConfig({
    server: { // Added to fix high CPU usage
        watch: {
            // Ignore large directories that don't need hot reloading
            ignored: ['**/storage/**', '**/vendor/**', '**/node_modules/**'],
        },
    },
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.ts'],
            refresh: true,
        }),
        inertia({ ssr: false }),
        tailwindcss(),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
        wayfinder({
            formVariants: true,
            // Add patterns to limit file watching for Wayfinder
            patterns: ['app/Http/Controllers/**/*.php', 'routes/**/*.php'],
        }),
    ],
});

Explanation

server.watch.ignored:
Tells Vite not to watch changes under storage/, vendor/, and node_modules/. These folders change very infrequently and don’t need to trigger hot reloads.
wayfinder.patterns:
Restricts Wayfinder to only watch specific folders (your application controllers and routes), cutting down on file system events and CPU usage.

Result

After these changes, Vite (and the npm run dev process) no longer consume abnormally high CPU resources, resolving the issue with your computer's fan and overall system performance while running the dev server.

If you need more details or run into other anomalies, double-check for other plugins or system-specific factors, but this config will fix the most common watcher-CPU problems with the Laravel+Vite+Wayfinder stack.

imrandevbd

10 hours ago

Level 4

Spot on. Vite's underlying file watcher (chokidar) is notorious for spinning up the CPU when it tries to index massive directories like vendor and node_modules, especially depending on your OS or if you're running WSL/Docker. Limiting the scope for both Vite and Wayfinder is the exact right move here.

One quick tip: you might also want to add /public/build/ and /bootstrap/cache/ to that ignore array just to be entirely safe from unnecessary rebuild loops.

Please or to participate in this conversation.

Starter kit - High CPU Fan - Fixed

Solution Summary

The Solution: Update vite.config.ts

Explanation

Result

The Solution: Update `vite.config.ts`