Well my question is simple, how to make a Ruby on Rails app work with Vue.js?
The details
I first look at the vue-rails gem, but that add Vue to the rails asset pipeline, and I want to work with other npm packages, like browserify. Then I look to that, browserify-rails that enable commonjs in the js folder app/assets/javascript/. Also I'm planning to make a Vuejs app for every rails controller, and access to backend actions with the vue-resource and vue-router (if this isn't a good approach please let me know), so I added the following line to my layout
<%= javascript_include_tag params[:controller] %>
That will add a js file with the name of the controller, so the UsersController will have the users.js file with the main vue app for that controller.
Then, to try this I scaffolded a Users resource with rails, and make it render json format in every action, like this
def index
@users = User.all
respond_to do |format|
format.html # index.html.erb
format.json { render json: @users }
end
end
That is working fine. Then in the app/assets/javascript/ folder I add users.js with the following content
var Vue = require('vue');
Vue.use(require('vue-resource'));
new Vue({
ready: function(){
this.$http.get('users.json').then(function(response){
console.log(JSON.stringify(response));
});
}
});
And when I inspect dev console in chrome, I see that Vue is added, but I don't see any response, and I had already inserted one user. By the way, I'm trying with the https://vuejs-rails-yerkopalma.c9users.io/users url (I'm developing in c9.io) and only the /users/index.html.erb file is rendered. So, waht are my guesses:
vue-resource in a wrong way, I mean the url passed to the get() function.vue-resource configuration.vue-rails gem combined with brwoserify-rails but I just don't know how. Any help or guideline would be appreciate.Here is my application.js file (is also included in my layout file)
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
I managed to make this work with Vue.js.
first I added an el propertie to the object passed to Vue constructor, and I started to get an error saying that body element was not defined. Obviously the body element is always present in an html file, so I though it was a problem about when the Vue instances were created. So I simply wrapped all on a ready event.
$(document).on('ready page:change', function() {
var Vue = require('vue');
Vue.use(require('vue-resource'));
new Vue({
el: 'body',
data: {
users: []
},
ready: function(){
this.$http.get('users.json').then(function(response){
console.log(JSON.stringify(response.data));
this.users = response.data;
}, function(response){
console.log("fail");
console.log(JSON.stringify(response));
});
}
});
});
And that works fine!
Because I'm using turbolinks, I also included the page:change event. And in my view index.html.erb I have access to Vue instance. So this make this case working and it's fine for this particular question, however I now have another issue working with .vue components, maybe I'll open another question about it.
Notice that in my index.html.erb view I have access to the Vue instance defined in users.js file in the assets/javascript/ folder, but that I have not access to Vue or any of the js modules loaded with browserify from the views folder
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments