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

pmx's avatar
Level 2

Vite won't see my laravel application

I've been away from laravel for a while and I'm just coming back to it for a new project. I've read the docs to try and catch up on what's changed but I'm falling at the first hurdle it seems.

I'm installing a brand new instance of laravel, running npm install and then npm run dev. I'm getting this:

I'm running laravel valet on my mac and i've tried setting the app_url in env to the correct one. I can access the laravel app fine via that url but vite isn't seeing it so no hot reloading. I've also tried running artisan serve, same result I just get the above page every time.

I followed the instructions at https://freek.dev/2276-making-vite-and-valet-play-nice-together but that didn't make a difference. I'm at a loss of what to try next, I'm used to laravel "just working" so this is all a bit weird for me!

As you can see below all my files are fresh from the install. Please help me!

{
    "name": "laravel/laravel",
    "type": "project",
    "description": "The Laravel Framework.",
    "keywords": ["framework", "laravel"],
    "license": "MIT",
    "require": {
        "php": "^8.1",
        "guzzlehttp/guzzle": "^7.2",
        "laravel/framework": "^10.0",
        "laravel/sanctum": "^3.2",
        "laravel/tinker": "^2.8"
    },
    "require-dev": {
        "fakerphp/faker": "^1.9.1",
        "laravel/pint": "^1.0",
        "laravel/sail": "^1.18",
        "mockery/mockery": "^1.4.4",
        "nunomaduro/collision": "^7.0",
        "phpunit/phpunit": "^10.0",
        "spatie/laravel-ignition": "^2.0"
    },
    "autoload": {
        "psr-4": {
            "App\": "app/",
            "Database\Factories\": "database/factories/",
            "Database\Seeders\": "database/seeders/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "Tests\": "tests/"
        }
    },
    "scripts": {
        "post-autoload-dump": [
            "Illuminate\Foundation\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi"
        ],
        "post-update-cmd": [
            "@php artisan vendor:publish --tag=laravel-assets --ansi --force"
        ],
        "post-root-package-install": [
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate --ansi"
        ]
    },
    "extra": {
        "laravel": {
            "dont-discover": []
        }
    },
    "config": {
        "optimize-autoloader": true,
        "preferred-install": "dist",
        "sort-packages": true,
        "allow-plugins": {
            "pestphp/pest-plugin": true,
            "php-http/discovery": true
        }
    },
    "minimum-stability": "stable",
    "prefer-stable": true
}
{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.2",
        "vite": "^4.0.0"
    }
}
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});
APP_NAME=Laravel
APP_ENV=local
APP_KEY=____
APP_DEBUG=true
APP_URL=https://mydomain.test

LOG_CHANNEL=stack
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=

BROADCAST_DRIVER=log
CACHE_DRIVER=file
FILESYSTEM_DISK=local
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

MEMCACHED_HOST=127.0.0.1

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_MAILER=smtp
MAIL_HOST=mailpit
MAIL_PORT=1025
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS="[email protected]"
MAIL_FROM_NAME="${APP_NAME}"

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=
AWS_USE_PATH_STYLE_ENDPOINT=false

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_HOST=
PUSHER_PORT=443
PUSHER_SCHEME=https
PUSHER_APP_CLUSTER=mt1

VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
0 likes
8 replies
LaryAI's avatar
Level 58

Based on the provided information, it seems that the issue is related to the configuration of Vite and Laravel Valet. Here are some steps that can help resolve the issue:

  1. Make sure that Laravel Valet is properly configured and running. You can check this by accessing your Laravel application through the Valet URL in your browser.

  2. Check that the APP_URL in your .env file matches the URL that you are using to access your Laravel application through Valet. If not, update the APP_URL to match the Valet URL.

  3. In your vite.config.js file, make sure that the laravel-vite-plugin is properly configured. Here is an example configuration:

    import { defineConfig } from 'vite';
    import laravel from 'laravel-vite-plugin';
    
    export default defineConfig({
        plugins: [
            laravel({
                input: 'resources/js/app.js',
                output: 'public/js',
                manifest: true,
                refresh: true,
            }),
        ],
    });
    

    Note that the input and output paths may need to be adjusted based on your project structure.

  4. Restart your Laravel Valet server and run npm run dev again. This should start the Vite development server and enable hot reloading.

If the above steps do not resolve the issue, you may want to try the following:

  • Check the console output for any error messages or warnings that may indicate the cause of the issue.
  • Try running npm run dev with the --debug flag to get more detailed output.
  • Make sure that your Laravel application is properly configured and running without Vite.
pmx's avatar
Level 2

Thanks Robot.

Just to note I've tried the steps outlined by the AI but still stuck. App loads fine via it's URL, vite in the console is telling me it is reloading but if I go to the url it provides I'm still getting the same page as my OP.

1 like
NielsNumbers's avatar

I have the same issue. Could you fix it in the meantime?

1 like
greg_pimu's avatar

@pmx @elenktik Hi there, bumped on this during my first time installation of Laravel. Tried with artisan serve and with Laravel Sail, both beahve the same. By any chance, have you found a solution? Thanks

pmx's avatar
Level 2

I never did! I gave up and wondered off. I've not been bothering to use Laravel for frontend stuff anymore it's too much of a mess!

greg_pimu's avatar
Level 7

Hey @pmx @elenktik It turned out that I got the whole thing wrong. Vite dev works, it's just that:

  • i didn't have the @vite() directive in my view file (i assumed it will be there, but somehow it was missing)

  • i was expecting to see the changes reflected on that special url containing Vite port, but in fact the reload happens on the main url

2 likes
pmx's avatar
Level 2

@greg_pimu Thanks for sharing mate I'll give it another look, then!

NielsNumbers's avatar

I can confirm greg_pimu's post. The hot reloading happens on localhost. I thought I had to use the url with the port to get the reloading and saw the same screen you posted. Turns out, the hot reloading happens on localhost, so everything seems to be working now :)

Screenshot showing localhost

Please or to participate in this conversation.