Vite not detecting changes on files not under pages

Hi, I'm trying to make a small web app after taking Jeffrey's course on Laravel, Vue and Inertia but using Vite instead of Laravel Mix. The issue is that whenever I make changes to any file outside of the predefined "Pages" folder is not reflected in the browser. Other files within this folder immediately update the page through HMR.

This is my current structure and the vite.config.js and app.js files (imports omitted for conciseness):

src/resources/
├── css
│   └── app.css
├── js
│   ├── app.js
│   ├── Components
│   │   ├── IconProfile.vue
│   │   └── IconSearch.vue
│   └── Pages
│       └── Home.vue
└── views
    └── app.blade.php

export default defineConfig({
    plugins: [
        laravel({
            input: ["resources/css/app.css", "resources/js/app.js"],
            refresh: true,
        }),
        vue(),
    ],
    server: {
        host: true,
    },
});

createInertiaApp({
    progress: {
        delay: 250,
        showSpinner: true,
    },

    title: (title) => 'My App ' + title,

    resolve: async (name) => {
        const page = await resolvePageComponent(
            `./Pages/${name}.vue`,
            import.meta.glob("./Pages/**/*.vue"),
        );

        return page;
    },

    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(IconSearch, "IconSearch")
            .use(IconProfile, "IconProfile")
            .mount(el);
    },
});

So, for example, if I make changes inside those icons even if they are registered as globally available through Vue I still have to manually restart the npm server for changes to take effect. So, how could I have full HMR in the browser for any js or vue file inside src/resources/js?

Thank you,

ruthback

2 years ago

Best Answer

Level 6

For reference, I managed to solve this using the following settings:

export default defineConfig({
    plugins: [
        laravel({
            input: "resources/js/app.js",
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    server: {
        host: true,
    },
    resolve: {
        alias: {
            "@": "/resources/js/",
        },
    },
});

1 like

Please or to participate in this conversation.