stevo-knievo / rails-vite-vue

Rails Vite Vue Example Project

Rails Vite Vue

Install Rails Project

1. rails new <project_new>

Remove Webpack/Webpacker

1. remove bin/webpack
2. remove bin/webpack-dev-server
3. remove bin/yarn
4. remove config/webpacker.yml
5. remove config/webpack
6. remove yarn.lock
7. remove postcss.config.js
8. remove bable.config
9. remove browserslistrc
10. remove app/javascript
11. comment Rails.application.config.assets.paths << Rails.root.join('node_modules') in config/initializers/assets.rb
12. run bundle remove turbolinks
13. run bundle remove webpacker
14. remove all devDependencies/dependencies from the package.json file

Create a dummy page

1. rails g controller pages home

Add Vite and Vue 3

1. bundle add vite_rails
2. bundle exec vite install
3. npm i vite-plugin-full-reload @vitejs/plugin-vue

Debug Vite container

docker logs --follow <container ID>

Start none DevContainer docker version

docker-compose -f docker-compose.dev.yml up --build --force-recreate

More infos:

• Vite Ruby
• Vue And Vite With Hot Reloading In Ruby On Rails 7
• WSL Localhost Docker Apps with Rails and Vite, Code
• Vite Rails running on Docker
• Migrating from (Rails) Webpack(er) to Vite
• Vue on Rails
• An example Rails 7 app
• Discord - Vite-Ruby