javascriptruby-on-railsvue.jsruby-on-rails-7importmap-rails

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:

    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.