[SOLVED] Upgrade Rails-/Webpacker-App with plain JS, VueJS and Stimulus to Importmaps

Upgrade Rails-/Webpacker-App with plain JS, VueJS and Stimulus to Importmaps

I want to migrate a Rails project away from Webpacker. It uses different JS-parts: VueJS 2.6, StimulusJS, plain old Javascript with some JQuery. Having used Importmaps in some projects i wonder if this would be a solution or if a packaging-toolchain like jsbundling-rails or vite.js needs to be added?

The app consists of different JS-codeparts:

    app/
    ├─ assets/
    │  ├─ javascripts/     # <-- some legacy-JS using JQuery
    ├─ javascripts/        # <-- VueJS-Application with some components
    ├─ shared/
    │  ├─ my_plugin/
    │  │  ├─ javascripts/  # <-- a Stimulus-controller

To my understanding, i need some bundling to use the VueJS-Part. Currently it is beeing imported using the VueLoaderPlugin. Is this necessary in the future or can i avoid it and use it only with Importmaps?

My understanding of the JS-build/packaging-toolchain is basic so i appreciate your advice. What could be the most simple solution?

NOTE: The Stimulus-Part is not integrated with Webpacker yet, so it is not working in this app ATM :-)

Solution

No wrong or right answer here.

You could use:

ViteJS to bundle all of your JS and use it in your Rails app
use nothing and run VueJS as it is (CDN mode) + other things with no build tools, DDH style with import maps, and no build

You could probably find a blog on how to achieve both approaches quite easily.

You should very much consider upgrading to Vue3 tho.
Also, please skip using jQuery in 2025, especially when paired with Vue + Stimulus already.