Rails::Vue::Helpers

VueHelpers is a small gem developed by Unagi for Ruby on Rails applications. It has built-in helpers with Vue.js compatibility in order to use some of the most common Rails helpers with Vue.js directives.

The gem extends the implementation of Rails' link_to, content_tag and check_box_tag in order to support Vue.js directives.

Add this line to your application's Gemfile:

gem 'rails-vue-helpers'

And then execute:

$ bundle install

Or install it yourself as:

$ gem install rails-vue-helpers

This gem extends some of the most commons Rails helpers, so the original helpers can be used in the same way as before without any modification.

However, if you'd like to add some Vue directives, you should consider this gem syntax. The following options apply for all the helpers the gem provides, which at the present time are: link_to, content_tag and check_box_tag.

All the options are received as values of the vue key. This key is another option such as class or id, which are officially supported by Rails helpers. So, a full example could be the next one:

<%= link_to users_path,
  class: 'btn btn-primary',
  vue: {
    bind: {class: "disabledUsersLink && 'disabled'"},
    on:   {click: "handleExportCookie('#{request.uuid}')"}
  },
  title: 'This action will redirect you to users list' do
%>
  Go to users list
<% end %>

v-bind is used for one-way data binding. Whenever you need to add one or more v-bind directives on a tag, you could use the binding key inside the vue hash. Its value must be a hash: each key is an attribute binding, whereas its value is the associated binding evaluation.

<%= link_to 'Users list', users_path,
  class: 'btn btn-primary',
  vue: {
    bind: {
      class: "disabledUsersLink && 'disabled'",
      title: 'usersLinkTitle'
    }
  }
%>

v-bind is used for events handling. If you need to use one or more v-on directives on a tag, you must use the on key inside the vue hash. Its value must be a hash: each key is an event name, whereas its value is the action it will perform when the event is listened.

<%= link_to 'Users list', users_path,
  class: 'btn btn-primary',
  vue: {
    on: {
      click:     "handleExportCookie('#{request.uuid}')"},
      mouseover: 'displayHint'
    }
  }
%>

v-model directive is used for two-way data binding. This feature is available using the model key of the vue hash. Its value must be a string, which represents the evaluation of the v-model.

<%= check_box_tag "customers_id[]",
  customer.id,
  false,
  class: 'customers_id',
  vue: {
    model: 'selectedUsers'
  }
%>

Vue has a lot of directives, so the gem implements the directives key to support all of them. Directives like v-show, v-if or v-for, and even custom components directives can be used with this. In order to use it, you must set the directives key inside the vue hash. Its value must be a hash: each key is a directive, whereas its value is the associated data.

<%= content_tag :span, '10% discount',
  class: 'text-bold',
  vue: {
    directives: {
      show: 'showCouponsForm'
    }
  }
%>

Components properties are available through the props key of the vue hash. Its value must be a hash: each key is a prop, and its value is property data.

<%= content_tag :select2, '',
  vue: {
    props: {
      ajax:              '/users/autocomplete',
      placeholder:       'Search...',
      name:              'filter[user_id]'
    }
  }
%>

To install this gem onto your local machine, run bundle exec rake install. To release a new version, update the version number in version.rb, and then run bundle exec rake release, which will create a git tag for the version, push git commits and tags, and push the .gem file to rubygems.org.

Bug reports and pull requests are welcome on GitHub at https://github.com/unagisoftware/rails-vue-helpers.

The gem is available as open source under the terms of the MIT License.