admin管理员组

文章数量:1122846

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 ?

本文标签： phpLaravel Inertia with Vuejs doesn39t reloadStack Overflow

版权声明：本文标题：php - Laravel Inertia with Vue.js doesn&#39;t reload - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736304645a1932308.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。