Constant page reloads when using autoImport with Laravel/Inertia

[craigrileyuk]

Been trying to use Vuetify with Laravel/Inertia with this plugin and it's borderline unusable with auto-imports (which is the main purpose of the plugin).

Every time you start dev, the page reloads.

Then if you follow an Inertia link to another page which contains a new Vuetify component, the navigation fails, the page reloads and then you have to click the link again and the page reloads and goes this time.

Obviously when you're trying to navigate through multiple pages, this gets very annoying, very fast.

Are there any ways around this?

[merlinz01]

Related issues:

https://stackoverflow.com/questions/75469067/vite-cypress-how-to-prevent-reloading-due-to-optimized-dependencies-causin

sveltejs/kit#11793

vitejs/vite#8721

vitejs/vite#14801

remix-run/remix#8917

[merlinz01]

This seems to work for me:

// vite.config.ts
import { globSync } from 'glob'

const vuetifyComponents = globSync('node_modules/vuetify/lib/components/V*')
  .map((file) => file.replace('node_modules/vuetify/lib', 'vuetify'))

export default defineConfig({
  optimizeDeps: {
    include: [
      'unplugin-vue-router/runtime',
      ...vuetifyComponents.filter((dep) =>
        !dep.includes('VOverflowBtn')
      ),
    ],
  },
})

The VOverflowBtn component gives an error that I don't feel like digging into, and I don't need it anyway, so that's why it's excluded.