Skip to content
Vue.js single file component loader for rails
Branch: master
Clone or download
Latest commit b942134 Apr 21, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib change name Aug 24, 2017
test
.gitignore add gitignore Oct 28, 2016
Gemfile
MIT-LICENSE update Oct 24, 2016
README.md Update README.md Apr 21, 2018
Rakefile
rails-vue-loader.gemspec

README.md

rails-vue-loader

Gem Gem

rails-vue-loader(formerly sprockets-vue) -- a Sprockets transformer that converts .vue file into js object.

feature

following tag is supported in .vue file

  • script (coffeescript and js)
  • template (currently html only)
  • style (scss, sass and css)

install

add gem 'rails-vue-loader' to Gemfile, and run bundle, currently works with sprockets 3.

example

  • app/assets/javascripts/application.coffee
#= require index

new Vue(
  el: '#search',
  components: {
    'index': VComponents.index
  }
)
  • app/assets/javascripts/index.vue (stored into VComponents.index when required)
//= require components/card
<script lang="coffee">
module.exports = {
  data: ->
    search: ''
    members: []
  components:
    card: VComponents['components/card']
  methods:
    clear: ->
      this.search = ''
}
</script>

<template>
  <div class="container">
    <div class='search icon-input'>
      <span class="search-icon glyphicon glyphicon-search"></span>
      <input class="form-control" type="text" v-model='search'>
      <span @click='clear' class="clear-icon glyphicon glyphicon-remove"></span>
    </div>
    <card v-for="m in members" :m='m'></card>
  </div>
</template>

<style lang="scss">
.search{
  .icon-input{
    width: 100%;
  }
}
</style>
  • application.scss
//=require index

you can include .vue file in css file, it's style block will be automatic processed. you can also use require_tree to include all .vue file.😘 scoped will not be supported.

advanced

You can’t perform that action at this time.