Vite not working for laravel

The problem i am facing is when i change somrthing in the html the page reloads I am using these steps to install vite

1) npm install
2) npm install bootstrap
3) npm install sass
4) npm install jquery

My vite.config.js

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/sass/app.scss',
                'resources/js/app.js'
            ],
            refresh: true,
        }),
    ],
    resolve: {
        alias: { 
            '@': '/resources',
            '$': 'jQuery'
        },
    },
});

My package.js

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "axios": "^1.6.4",
        "laravel-vite-plugin": "^1.0",
        "vite": "^5.0"
    },
    "dependencies": {
        "bootstrap": "^5.3.3",
        "jquery": "^3.7.1",
        "sass": "^1.77.6"
    }
}

My blade

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    @vite(['resources/css/app.css', 'resources/sass/app.scss', 'resources/js/app.js'])
</head>
<body>
    <h1>hshhhs</h1>
</body>
</html>

martinbean

1 year ago

Level 80

The problem i am facing is when i change somrthing in the html the page reloads

@sarfaraz1212 Yes. That’s what the Laravel Vite integration does: it refreshes the page when a Blade template is changed.

So what exactly is “not working”?

sarfaraz1212

1 year ago

Level 1

@martinbean the page is getting reloaded, Does the page reload everytime? Like the page hard refresh's, the html should update without the page reload.

martinbean

1 year ago

Level 80

@sarfaraz1212 How is the HTML meant to be updated if the page isn’t refreshed…?

From the Laravel docs on refreshing on save:

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

2 likes

Please or to participate in this conversation.