Rails Vue Demo App screenshot

Rails Vue Demo App

Author Avatar Theme by Gbarillot
Updated: 19 Jan 2024
335 Stars

Rails 7 + Vite + Vue 3 + Pinia Demo App

Categories

Overview:

The Rails + Vite + Vue + Pina Demo App is a demo single-page application based on Ruby on Rails 7.0.2. It uses Vue 3 + Pina and is compiled with Vite. The application offers a variety of features necessary for building a real-world app, such as Front / Admin namespaces, I18n, forms with progress and error handling, authentication with Devise, pagination with Kaminari, dynamic search filters with Ransack, Websockets using ActionCable, and a Bootstrap-like grid layout utilizing CSS Grid layout.

Features:

  • Front / Admin namespaces
  • I18n (server side + client side)
  • Forms with progress and error handling
  • Authentication with Devise
  • Pagination with Kaminari
  • Dynamic search filters with Ransack
  • Websockets using ActionCable
  • Bootstrap-like grid layout (CSS Grid)

Installation:

To install the Rails + Vite + Vue + Pina Demo App, you can follow these steps:

  1. Clone the repository.
  2. Boot the app.
  3. Enable or disable Hot Module Reloading (HMR) in the configuration file by setting “hmr” to true or false.
  4. Run tests on the Rails side and JS side.
  5. Modify CSS directly in the public/css/development directory.

Summary:

The Rails + Vite + Vue + Pina Demo App provides a comprehensive example of integrating Vue with Ruby on Rails using modern tools and practices. With features like I18n, forms, authentication, and more, this demo app offers a solid foundation for building efficient and maintainable single-page applications. While the CSS handling may require some adjustments, overall, this demo app serves as a valuable resource for developers looking to leverage the power of Vue.js and Rails together. Contributions and feedback are welcome, and the project is licensed under MIT.