Using ViteRuby in a subdirectory

[jnarowski]

I have a massive Rails app with Webpacker and Vue2. In order to migrate our app, we are looking to embed Vue3 into our app alongside Vue2. I was hoping/wondering if I could use ViteRails to accomplish this by installing Vite into a subdirectory so that I could have 2 separate package.json files.

I can do this by just building a standalone Vite+Vue3 app in a "client" folder for instance, but I'd really love to get all the benefits of the ViteRails integration, especially the build process.

If I could install the vite config, package.json, node_module etc into a subfolder and it would still work with the standard rails build process, that'd be awesome.

Before I go too deep down this rabbit hole, I wanted to see if something like this was possible?

If there isn't a simple way to configure this in the main rails app, I wonder if doing this in a rails engine might be another approach that could work?

We're on Rails 6.1

[ElMassimo]

Hi John!

There's some basic support for engines in the library.

Using a custom setup like what you describe is definitely possible, but it will require a lot of twiddling on your end to get the setup working.

---

If you can avoid the need for a separate package.json, then you could use webpacker and Vite Ruby side by side, in which case you can put all your new frontend code in app/frontend, and change sourceCodeDir accordingly. Then, gradually migrate code from app/javascript to app/frontend.

A way that you could achieve this, is by creating a vue3 alias in your package.json. Your Vite-processed code could import things from vue3 explicitly, or you can alias vue3 as vue. In a migration like what you are describing, perhaps explicitly importing from vue3 would reduce the mental overhead.

[jnarowski]

Thanks for the fast response! I certainly don't want to twiddle too much. Is there any other way to load ViteRails from a subdirectory? We cannot use the same package.json unfortunately so we have to figure out another way.

If it was you, would you just keep the client totally separate as a simple plan js app and not complicate things with vite_ruby?

[jnarowski]

I'll take a look at that alias option. Maybe that's something to consider. We just have soooo many packages there I think we'll be stuck in outdated dependency hell if we try and use the same package.json file.

Worth an experiment though for sure.