Demo Single Page Application based on Ruby on Rails 7.0.2, using Vue 3 + Pina, compiled with Vite. All the basic features you need to build a real world app with:
- Front / Admin namespaces
- I18n (server side + client side)
- Forms (with progress and error handling)
- Authentication (Devise)
- Pagination (Kaminari)
- Dynamic search filters (Ransack)
- Websockets (ActionCable)
- Bootstrap like grid (using CSS Grid layout)
All of this is designed with maintainability and readability in mind, slightly inspired by the Rails conventions.
This is the follow up of the previous Rails + Vue + Vuex app from 2017 which is still available on the Rails6 branch.
A lot of things has been updated/rewrote for this version, notably:
- Webpacker is now replaced by Vite
- No longer depends on JQuery for API calls (replaced by Axios)
- Vuex is now replaced by Pinia to handle state management
Nonetheless, a lot of opinions and conventions from the previous version remain valid, you may have a look at the original blog post for details (https://guillaume.barillot.me/2017/12/02/how-to-organize-your-vue-files-in-a-rails-5-1-project-using-webpack/).
Boostrapping the plumbing for basic stuff can take some time, but once you get the basic it's pretty easy to extend and to get really efficient with Vue + Rails. With this example you have all you need to build up your new project in minutes.
git clone git@github.com:gbarillot/rails-vue-demo-app.git
cd rails-vue-demo-app
bundle install
yarn install
bundle exec rails db:migrate
bundle exec rails db:seed
foreman start
Hot Module Reloading (HMR) is enabled by default. If you prefer to turn it off, set "hmr" to false in /vite.config.ts.
rails test
yarn test
PR and feedbacks welcome!
MIT