Vue.rb

Ruby bindings for Vue.js

Generate Convert Improve

Install / Use

/learn @merongivian/Vue.rb

About this skill

Quality Score

0/100

README

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 :blush:

Contributing

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

Related Skills

node-connect

353.1k

Diagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps

frontend-design

111.6k

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

openai-whisper-api

353.1k

Transcribe audio via OpenAI Audio Transcriptions API (Whisper).

qqbot-media

353.1k

QQBot 富媒体收发能力。使用 <qqmedia> 标签，系统根据文件扩展名自动识别类型（图片/语音/视频/文件）。