Skip to content
Ruby bindings for Vue.js
Ruby Shell
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin
examples
lib fix compilation errors Jun 10, 2019
.gitignore
.travis.yml
Gemfile
README.md
Rakefile
vue.rb.gemspec

README.md

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

You can’t perform that action at this time.