I installed a Laravel Inertia project with Vue and hot reload doesn't do his job even if I F5.
For modifications to apply on my frontend, I need to stop the dev script and restart it for example if I change the content of a <p>
I'm using Laravel 11 with Vue 3 (Vite).
Here are my files :
vite.config.js :
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: 'resources/js/app.js',
ssr: 'resources/js/ssr.js',
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
});
app.js :
import './bootstrap';
import '../css/app.css';
import 'remixicon/fonts/remixicon.css';
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy';
import { createI18n } from 'vue-i18n';
import * as Sentry from '@sentry/vue';
const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) =>
resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
setup({ el, App, props, plugin }) {
const locales = props.initialPage.props.locales;
let locale = Object.keys(locales).includes(navigator.language) ? navigator.language : 'fr';
if (localStorage.getItem('locale')) {
locale = localStorage.getItem('locale');
} else {
localStorage.setItem('locale', locale);
}
const app = createApp({ render: () => h(App, props) });
Sentry.init({
app,
dsn: import.meta.env.VITE_SENTRY_DSN,
integrations: [
Sentry.replayIntegration({
maskAllText: false,
blockAllMedia: false,
}),
],
// Session Replay
replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0,
});
app.use(plugin)
.use(ZiggyVue)
.use(
createI18n({
locale:
props.initialPage.props.auth?.user?.locale ??
locale ??
props.initialPage.props.appLocale,
fallbackLocale: props.initialPage.props.appLocale,
messages: props.initialPage.props.localeMessages,
}),
)
.mount(el);
return app;
},
progress: {
color: '#4B5563',
},
});
app.blade.php :
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title inertia>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
@googlefonts(['font' => 'Poppins','nonce' => csp_nonce()])
<!-- Scripts -->
@routes(nonce: csp_nonce())
@vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
@inertiaHead
</head>
<x-impersonate::banner/>
<body class="antialiased h-lvh overflow-hidden">
@inertia
</body>
</html>
Did i missconfigured something ?