Vue.js router with Ruby on Rails routes

Question

I'm currently working on a application with a Ruby on Rails backend and Vue.js frontend. It's a single page application. I'm using the webpacker gem to build my main JS file.

I've added vue-router and and a couple frontend routes. I'm able to navigate using <router-link> which correctly renders the appropriate component. What I can't figure out is how do I setup my frontend routes so that someone can directly navigate to a URL without hitting my Rails routes.

For example if I type /sample-route I'd like to hit my Vue.js route and not my Rails route. I still want to be able to make API calls to my Rails routes as well. For example /api/users.

nflauria · Accepted Answer · 2019-06-13 19:19:39Z

7

My problem was solved by adding <router-view></router-vew> into my main Vue.js component.

Here's my rails routes file as well:

Rails.application.routes.draw do
  namespace :api do
    # api routes here
  end

  root 'application#index'
  get '/*path', to: 'application#index' 
end

answered Jun 13, 2019 at 19:19

nflauria

9071 gold badge14 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mando75 · Accepted Answer · 2019-06-13 17:01:39Z

1

Depending on how many routes you have, you can add your Vue routes to routes.rb and send them to your root Vue application route. e.g. Webpacker is rendering your js pack with controller#action vue_controller#app. Your Vue app router uses /user/profile. In routes.rb, add a route:

get "/user/profile" => "vue_controller#app" # <- The controller action rendering your Vue pack

If it seems unmaintainable to redefine every Vue route in routes.rb, you may want to look into a universal fallback route that sends them to the vue app controller action. As long as you don't change the route, but just respond with the Vue controller action, the Vue router will take care of rendering the right components for that route when the page loads.

In Rails 4, you can use something like the answers in this SO question to help you out with setting up a "catch-all" route Rails catch-all route.

EDIT: Using a catch all route does lead to some problems with 404's. If the user requests a route that doesn't exist, the Rails app will still send them the Vue pack. To fix this, you would need to add some unknown route handling in your Vue router to render something like a 404 page.

answered Jun 13, 2019 at 17:01

Mando75

361 silver badge5 bronze badges

2 Comments

nflauria Over a year ago

Thanks for your help Mando. I added what solved my problem below.

Mando75 Over a year ago

@nflauria I see you went with the catch all route I suggested. As I mentioned, be careful when handling 404's. Make sure that your Vue router has a backup catch all route if you try to access a route that doesn't exist.

Malay · Accepted Answer · 2020-06-04 15:29:20Z

1

There is one more approach which will be useful and handles sub-routes as well (having separate vue apps per page in a single rails app):

routes.rb

Rails.application.routes.draw do
    # this route entry will take care of forwarding all the page/* urls to the index
    get 'page_controller/*path', to: 'page_controller#index', format: false
end

Additionally, please handle the api and index routes separately based on the design.

vue-routes.js

const router = new VueRouter({
  mode: 'history',
  base: '/page_url',
  routes: [
    ...
  ]
});

answered Jun 4, 2020 at 15:29

Malay

7159 silver badges11 bronze badges

Collectives™ on Stack Overflow

Vue.js router with Ruby on Rails routes

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related