While writing an article on how to install Vue.js with Rails 5.x, I learned that the process was even more straightforward with Rails 6. x. The main reason is that Webpacker has now replaced Sprockets as the default JavaScript compiler and asset pipeline. For new Rails users, the asset pipeline gathers all of your application assets (JavaScripts, CSS, images, font files, etc.). It bundles them into one large file, significantly speeding up app performance and download times.

Step 0 - Install Package Managers

Read this tutorial on installing package managers for Mac.

Step 1 - Create a Rails App

Rails 6 needs a minimum version of Ruby 2.5.0.

RBENV_VERSION=2.7.1 rbenv exec rails _6.1.3.1_ new rails_vue_app --skip-turbolinks --webback=vue -d sqlite3

Create a controller named PagesController with the method home.

rails g controller Pages home

Open file config/routes.rb and paste this to redirect your default page.

root 'pages#home'

Step 2 - Create a Rails App

RBENV_VERSION=2.7.1 rbenv exec rails _6.1.3.1_ new [my_rails_app]

Step 3 - Optimize

 bin/webpack-dev-server

Appendix