Rails + Vite + Vue + Pina Demo App

This repo is no longer maintained

Feel free to grab some ideas, but I will no longer update this codebase.

Description

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
Vue app in using Composition API
Vuex is now replaced by Pinia to handle state management
No longer depends on JQuery for API calls (replaced by Axios)

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.

Installation

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

Booting the app

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.

Running tests

Rails side

rails test

JS side

yarn test

A note on CSS

CSS is done right in the public/css/development directory.

Pros:

No compile time, greatly speed up page load time in dev
Allows CSS editing + saving directly from Chrome Devtools
Easier / more fexible to manage imports

Cons:

You should disable cache in DevTools in Dev
As of today, not suitable for production!

The purpose of this repo is Vue + Vite + Rails, not CSS, so feel free to use whatever method you'd prefer to handle CSS. Sprocket is left as is and still works.

Contributions

PR and feedbacks welcome!

Licence

MIT

gbarillot/rails-vue-demo-app

ErrorLooks like something went wrong!

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors 4

Uh oh!

Languages

Error
Looks like something went wrong!

Packages