https://github.com/kikyous/rails-vue-loader

Vue.js single file component loader for rails
https://github.com/kikyous/rails-vue-loader

rails sprockets transformer vue

Last synced: 1 day ago
JSON representation

Vue.js single file component loader for rails

• Host: GitHub
• URL: https://github.com/kikyous/rails-vue-loader
• Owner: kikyous
• License: mit
• Created: 2016-10-24T08:53:24.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-04-21T03:02:25.000Z (over 6 years ago)
• Last Synced: 2024-10-15T19:41:02.420Z (about 1 month ago)
• Topics: rails, sprockets, transformer, vue
• Language: Ruby
• Homepage:
• Size: 27.3 KB
• Stars: 97
• Watchers: 6
• Forks: 26
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: MIT-LICENSE

Awesome Lists containing this project

README

        
# rails-vue-loader

[![Gem](https://img.shields.io/gem/v/rails-vue-loader.svg)](https://rubygems.org/gems/rails-vue-loader)

[![Gem](https://img.shields.io/gem/dt/rails-vue-loader.svg)](https://rubygems.org/gems/rails-vue-loader)

rails-vue-loader(formerly sprockets-vue) -- a [Sprockets](https://github.com/rails/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

```coffee

#= require index

new Vue(

  el: '#search',

  components: {

    'index': VComponents.index

  }

)

```

* app/assets/javascripts/index.vue *(stored into VComponents.index when required)*

```vue

//= require components/card

module.exports = {

  data: ->

    search: ''

    members: []

  components:

    card: VComponents['components/card']

  methods:

    clear: ->

      this.search = ''

}

  


    


      

      

      

    

    

  


.search{

  .icon-input{

    width: 100%;

  }

}

```

* application.scss

```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

* [multi file component](https://github.com/kikyous/sprockets-vue/wiki/multi-file-component)