Allow include/exclude to work on Vue files

[cinderisles]

I noticed that this line prevents include/exclude from working on Vue files, because query.vue will always be true for Vue files.

My use case is that I have a project with both Vue2 and Vue3 SFCs that I want to process with the same Vite config. So I am trying to get the vite plugins to look in different folders based on the Vue version. But since query.vue is true for both Vue 2 and 3 SFC, the filter doesn't work, and Vue 2 files try to get run through Vue 3's compiler, causing errors

Please consider making the filter work regardless of the query.vue value.

[franzliedke]

@cinderisles I think I have the same problem.

As this plugin is no longer being maintained, I doubt this will be fixed.

My conclusion was that the only way to achieve the goal is having separate Vite config files per SPA. Our backend is a Rails app, so we're using the vite_rails gem. Its maintainer explained how to make this approach work here: ElMassimo/vite_ruby#496 (comment)

[cinderisles]

@franzliedke I made an example repository for you with some of the workarounds I've found to get Vue 2 and 3 to work with the same Vite config. Hopefully I explained things well enough in the README

https://github.com/cinderisles/vue2-vue3-vite

[franzliedke]

@cinderisles Wow, thanks so much for putting so much effort into writing this down!

You are right, we are also doing this as a part of migrating a large app from Vue 2 to Vue 3. Migrating just parts of the app to Vue 3 and making both apps work together on the same page isn't something that occurred to me so far, I will consider it.

You have helped me understand that the way we use NPM aliases is a much deeper problem than I anticipated. I think I will try to avoid the (impressive!) patches and workarounds you resorted to, and will instead prepone our planned change to completely separate the apps we have (incl. separate package.json and separate build chains).

[cinderisles]

@franzliedke Happy to help! My guess is that for your use case, your apps don't need to share state and you were just looking for an easy way to build them all at once. I think the separate dev server approach as described by the vite_ruby maintainer here will be enough for you.

Unfortunately, in my case, I needed to share state between SPAs, because I had Vue 2 and 3 on the same page. There is no server code either, like Ruby on Rails --- just a pure SPA on a static file server. The Vite workarounds came about from over a year of a painful developer experience of having two different SPAs and dev servers running on different ports. I could only ever see both apps on a production build where I concatenated each SPA's build files together.

I definitely like the separateBundlesPlugin vite plugin example the vite_ruby maintainer gave. I'm going to give that a try with my include/exclude patches