How to share a session between Vue.js dev and Rails 4 backend?

Question

I'm working with a Vue.js cli application that is co-exists with a Rails 4.2 backend.

The goal here is to use the existing sessions. When I compile the Vue.js application for production mode I can run the Rails server in development mode and the Vue app is served from correctly from the public directory and sessions work since they are being served on the same domain.

Trying to develop and debug like this is very difficult as you have to compile the Vue app for production after any change to test it and this also then makes it impossible to leverage the Vue Devtools for debugging purposes.

If I serve the Vue application in dev mode this is via webpack so then the Vue application and the Rails application are served separately and are thus now on separate domains which leads to no session sharing, having to try to deal with CORS, etc...

Answer 1

There is an option in called proxyTable in the file config/index.js .

We were able to set the webpack root to proxy through the local Rails server by setting this option as proxyTable: {"/": "http://localhost:3000"}

3000 is the default port for a Rails dev server, but you may need to change this if you are running on a different port.

Answer 2

Get rid of webpacker, if you at all can. Vue can be used from cdn quite fine. When the vue app is instantiated in the rails template, data can be passed really easily with #{@model.to_json} .

Vue components can be written using x-template syntax, either in rails templates or asset pipeline.