How to make rails work with vue.js?

Question

Well, my question is simple, how to make a Ruby on Rails application with Vue.js?

Details

I will look at the vue-rails gem first, but add Vue to the rails resource pipeline, and I want to work with other npm packages, such as a browser. Then I look at this, browserify-rails , which allow commonjs to be used in the js app/assets/javascript/ folder. I also plan to make a Vuejs application for each rails controller and access the backend actions using vue-resource and vue-router (if this is not a good approach, let me know), so I added the following line to my layout

 <%= javascript_include_tag params[:controller] %> 

This will add a js file with the name of the controller, so UsersController will have a users.js file with the main vue application for this controller.

Then, to try this, I ran the Users resource with rails and make it render the 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 

It works great. Then in the app/assets/javascript/ folder, I add users.js with the following contents

 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 check the dev console in chrome, I see that Vue has been added, but I don't see any answer, and I already inserted one user. By the way, I'm trying to use the url https://vuejs-rails-yerkopalma.c9users.io/users (I'm developing in c9.io), and only the file /users/index.html.erb . So waht are my guesses:

• I could use vue-resource incorrectly, I mean that the URL is passed to the get() function.
• Perhaps I am missing the vue-resource configuration.
• Maybe I just need to use the vue-rails gem in combination with brwoserify-rails , but I just don't know how to do this. Any help or recommendations would be appreciated.

Here is my application.js file (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 vendor/assets/javascripts directory can be referenced here using a relative path. // // It 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 

Answer 1

I managed to do this work with Vue.js.

I first added the el property to the object passed to the Vue constructor, and I started getting an error saying that the body element was not defined. Obviously, the body element is always present in the html file, therefore, although it was a problem when Vue instances were created. So I just wrapped everything in 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 it works great!

Since I use turbolinks, I also included the page:change event. And, in my opinion, index.html.erb I have access to the Vue instance. So this makes this case work, and it’s good for this particular question, however I now have another problem working with .vue components, maybe I will open another question about it.

Please note that in my index.html.erb view, I have access to the Vue instance defined in the users.js file in the assets/javascript/ folder, but I do not have access to Vue or any of the js modules downloaded from using a browser from the views folder

Answer 2

For Rails 5.1+, it will come with yarn and webpack support.

Also, this port request in webpacker, Vue will be supported out of the box.

To get started with Vue on Rails,

• Add gem 'webpacker' to gemfile
• bundle install
• Run rails webpacker:install && rails webpacker:install:vue

Alternatively with Rails 5.1x, do rails new app --webpack=vue

You will be ready for Vue on Rails 5

Answer 3

Try using the Breakfast Gem . There is a section for installing Vue.js

Basically, after installing the gem, you can use npm to install Vue , Vuex and Vue Router quite easily.

And it supports the individual components of the Vue file.

Answer 4

Update: gem [vuejs][1] offers ships with vue 2.x and vue-router 2.x.

So, I created gem [vuejs][1] because I used vue.js for several projects + prototypes, and gem vuejs-rails did not seem to vuejs-rails my stone with the latest version of vue.js.

If you are like me looking for easy integration of vue.js with asset + pipeline, you want to use the latest vue.js, read on:

Add this line to your gemfile application:

  gem 'vuejs' 

In application.js

 //= require jquery //= require jquery_ujs //= require turbolinks //= require vue //= require vue-router //= require vue-resource //= require_tree . 

//= require vue-router and //= require vue-resource are optional.

Note that for vue and vue-router 2.x you need to require them instead

 //= require vue2 //= require vue-router2 

What is it. You can try writing javascript in one of the views to check it out.

Try the following:

 <div id="app"> <h1>Hi {{ message }}</h1> <input v-model="message"> </div> <!-- <span>Message is: {{ message }}</span> <br> <input type="text" v-model="message" placeholder="edit me"> --> <script type="text/javascript"> new Vue({ el: '#app', data: { message: 'Bryan' } })</script> 

source: https://github.com/ytbryan/vuejs