Vue.rb

Lets you write Vue.js code in Ruby!!!

class ReverseMessage < Vue
  data :message, "Reverse this message"

  def reverse_message
    self.message = message.reverse
  end
end

ReverseMessage.new('#app')

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverse_message">Reverse Message</button>
</div>

Installation (Ruby on Rails)

Install vue.js through yarn

$ yarn add vue

Add the following gems in your Gemfile

  gem 'opal-rails'
  gem 'vue.rb', git: 'https://github.com/merongivian/vue.rb'

and run bundle exec install

Require both Javascript and Ruby files in application.js.rb

# Javascript to Ruby compiler
require 'opal'

# require javascript before ruby code
require 'vue/dist/vue.js'
require 'vue.rb'

Adding Vue code

Make sure your vue code loads after the page is loaded

# config/initializers/assets.rb

Rails.application.config.assets.precompile += %w(my_vue_code.js.rb) # should be in app/assets/javascripts

<!-- application.html.erb -->

<!DOCTYPE html>
<html>
  <head>...</head>

  <body>
    <%= yield %>
  </body>

  <%= javascript_include_tag 'my_vue_code' %>
</html>

More examples

check the examples section

Credits

This code is mostly a copy of arika's example. I just merely refactor it a bit and put it into a gem 😊

Contributing

This is not a complete implementation of the API, so if something is missing please do help with PR's