Vuejs Gem

Vue for your favourite Ruby on Rails projects

Requirement

Installation

Add this line to your application's Gemfile:

gem 'vuejs'

And then execute:

$ bundle

Or install it yourself as:

$ gem install vuejs

Webpacker

Vue component generator

rails generate vue <NAME>

Note: vuejs gem creates vue components with seperation of concern by default.

To generate a single-file component, please use --single option. eg. rails g vue component_name --single

Vue component destroyer

rails destroy vue <NAME>

Vue viewer

Vue viewer allows you to browse your vue component easily. Simply type in http://localhost:3000/vue/

At routes.rb

mount Vuejs::engine, to: 'vue'

Vuex support - coming soon

rails g vue <NAME> --vuex

This will add vuex using yarn. And generate a vue component with vuex support

Add webpacker helpers - coming soon

rails g vue <NAME> --helpers

Asset Pipeline

The ruby gem vuejs ships with the following goodies for assets pipeline:

  • vue (v2.1.10)
  • vuex (v2.1.1)
  • vue-router (v2.1.3)
  • vue-validator2 (v2.1.7) + vue-validator3 (v3.0.0-alpha.2)
  • axios (v0.15.3)

It also ships with the following legacy goodies

  • vue (v1.0.28)
  • vuex (v1.0.1)
  • vue-router (v0.7.13)
  • vue-resource (v1.2.0)
  • vue-validator (v1.4.4)

Usage

For 2.x Vue & vue-router or Vue-validator

//= require vue2
//= require vue-router2
//= require vue-validator2
//= require vuex2
//= require axios

Some Solution for assets pipeline

Sprockets::FileNotFound: couldn't find file 'vue-validator'

Sprockets::FileNotFound: couldn't find file 'vue-validator' with type 'application/javascript'

vue-validator has been changed to vue-validator2 and vue-validator3. Use //= require vue-validator2 or //= require vue-validator3 instead.

Sprockets::FileNotFound: couldn't find file 'vuex'

vuex has been updated to vuex2. Therefore use //= require vuex2 to resolve the error Sprockets::FileNotFound: couldn't find file 'vuex'.

You are running Vue in development mode.

  You are running Vue in development mode.
  Make sure to turn on production mode when deploying for production.
  See more tips at https://vuejs.org/guide/deployment.html

Try to use //= require vue2.min to remove the warning statement from console.

For 1.x

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

Contributing and License

Bug reports and pull requests are welcome on GitHub at https://github.com/ytbryan/vuejs. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct. The gem is available as open source under the terms of the MIT License.

Book

Richard LaFranchi and I are writing a book on Vue on rails. If you are interested to be one of the early reviewers of our drafts, please email me.

Contact

📮 Bryan Lim [email protected]

If you are using vue.js via this rubygem, do let me know so that I can list your project/company on this repo. Thank you!