Rails 6 Sharing Routes With Vue Components

This article highlights how to use js-routes to share Rails routes with Vue to avoid having to hardcode paths in your components.

I’ve previously written about using Vue components inside your Rails app, however one of the things I found annoying was not being able to use Rails routes inside Vue components.

A lot of other tutorials or articles suggest simply hardcoding paths but this definitely is not a very Rails way of doing things. Thankfully the js-routes gem lets your bring your Rails routes into the javascript realm so it can easily use them in your Vue components.

Add JSRoutes Gem

First add the js-routes gem to our bundle.

bundle add js-routes

Add ERB Webpack

Next we add ERB webpack so we can load files server side.

rails webpacker:install:erb

Update Webpack Environment

Now update config/webpack/environment.js, make sure it has these lines.

const { environment } = require('@rails/webpacker');
const erb = require('./loaders/erb');
environment.loaders.prepend('erb', erb);

Add Routes Index