herd / inertia / vue - build

To resolve the issue of not seeing changes to your Vue components in a Laravel + Inertia + Vue project, you can follow these steps:

1. Ensure Vite is Properly Configured: Make sure your vite.config.js is correctly set up for a Laravel project. It should look something like this:

   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'],
               refresh: true,
           }),
           vue(),
       ],
   });
   

2. Check Your app.js Entry Point: Ensure that your resources/js/app.js file is correctly importing and initializing your Vue components. It should look something like this:

   import { createApp, h } from 'vue';
   import { createInertiaApp } from '@inertiajs/vue3';
   import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
   
   createInertiaApp({
       resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
       setup({ el, App, props, plugin }) {
           createApp({ render: () => h(App, props) })
               .use(plugin)
               .mount(el);
       },
   });
   

3. Run Vite in Development Mode: Use npm run dev to start Vite in development mode. This should enable hot module replacement (HMR), allowing you to see changes without refreshing the browser.

4. Check for Console Errors: If you see a black screen, check the browser console for any errors. This can provide clues about what might be going wrong.

5. Clear Cache: Sometimes, caching issues can prevent changes from appearing. Clear your browser cache or try accessing the site in an incognito window.

6. Ensure Node Modules are Up-to-Date: Run npm install to ensure all your dependencies are up-to-date. Sometimes, outdated packages can cause issues.

7. Check Network Configuration: If you're using a tool like Herd, ensure that your network configuration allows for the Vite development server to be accessed. You might need to adjust your firewall or proxy settings.

By following these steps, you should be able to see your Vue component changes reflected in the browser. If the issue persists, consider checking the Laracasts forum or other community resources for additional troubleshooting tips.