Migrate from Webpacker to Vite Rails

[ElMassimo]

Description 📖

This pull request is an example on how to migrate from webpacker to Vite Rails.

Steps 👟

• Add the vite_rails gem, and run bin/rake vite:install.
• Add the .vue extension to any imports, since Vite requires it.
• Replace javascript_packs_with_chunks_tag with vite_javascript_tag.
• Replace asset_pack_path with vite_assets_path.
• For complex or deeply nested dynamic imports, use import.meta.glob.

More information available in the migration guide.

Development 🚀

Now, run bin/vite instead of bin/webpack-dev-server, and code as usual, but with faster feedback ⚡

Comparison 🎥

Webpacker

Took 31 seconds to start, and then 1-2 second lag for every simple change:

webpacker.mp4

Vite

Took 15 seconds to start, and then super quick feedback on every change:

vite_rails.mp4

[zigomir]

@ElMassimo this is really nice – thanks for sharing on Vite Land Discord! :)

I don't know a lot about Inertia, but I see they have support for Vue 3 too. Do you intend to make it work with Vue 3 too or are you open for PRs – maybe I can take a look into it.

[ElMassimo]

Thanks!

Creating a Vue 3 version would be great! I want to keep this Vue 2 example because it's less common with Vite, so we could create a vue3 branch on this repo as an additional example.

I would happily accept a pull request, using Vue 3 and sticking to the options API, or using Vue 3 and <script setup> with the composition API.

[ndrean]

I am currently using Rails6.1.4/Webpacker 6. I added the gem vite_rails, run bundle install, then bundle exec vite upgrade but then bin/rake vite:install fails.

[ElMassimo]

@ndrean Hi Neven! You can follow the guide or this blog post to get started.

Try running bundle exec vite install, the install command is provided by the CLI, and is not available as a rake task.

Cheers!

[ndrean]

Thanks Maximo. The dev server responds indeed after bundle exec vite install. Now the rest! Cheers!
By the way, have you tried to set up on k8 a side-car container running the dev server in a pod (Rails + Vite dev server)? Maybe using the settings from "https://github.com/ElMassimo/vite_rails_docker_example/blob/main/docker-compose.yml" ?