├── .gitignore
├── Gemfile
├── Gemfile.lock
├── MIT-LICENSE
├── README.md
├── Rakefile
├── circle.yml
├── lib
├── generators
│ └── vue_melt
│ │ ├── source
│ │ ├── application.js
│ │ ├── components
│ │ │ └── Hello.vue
│ │ ├── options
│ │ │ └── users.js
│ │ └── store
│ │ │ ├── actions.js
│ │ │ ├── getters.js
│ │ │ ├── index.js
│ │ │ ├── mutation-types.js
│ │ │ └── mutations.js
│ │ └── vue_melt_generator.rb
├── rails_vue_melt.rb
└── rails_vue_melt
│ └── version.rb
├── rails_vue_melt.gemspec
└── spec
├── fixtures
├── application.html.erb
└── environment.js
└── vue_melt_generator_spec.rb
/.gitignore:
--------------------------------------------------------------------------------
1 | .bundle/
2 | log/*.log
3 | pkg/
4 |
5 | node_modules/
6 | package.json
7 | yarn.lock
8 |
--------------------------------------------------------------------------------
/Gemfile:
--------------------------------------------------------------------------------
1 | source 'https://rubygems.org'
2 |
3 | # Declare your gem's dependencies in rails_vue_melt.gemspec.
4 | # Bundler will treat runtime dependencies like base dependencies, and
5 | # development dependencies will be added by default to the :development group.
6 | gemspec
7 |
8 | # Declare any dependencies that are still in development here instead of in
9 | # your gemspec. These might include edge Rails or gems from your path or
10 | # Git. Remember to move these dependencies to your gemspec before releasing
11 | # your gem to rubygems.org.
12 |
13 | # To use a debugger
14 | # gem 'byebug', group: [:development, :test]
15 |
--------------------------------------------------------------------------------
/Gemfile.lock:
--------------------------------------------------------------------------------
1 | PATH
2 | remote: .
3 | specs:
4 | rails_vue_melt (0.2.0)
5 | rails (~> 5.1)
6 | webpacker (~> 3.0)
7 |
8 | GEM
9 | remote: https://rubygems.org/
10 | specs:
11 | actioncable (5.1.2)
12 | actionpack (= 5.1.2)
13 | nio4r (~> 2.0)
14 | websocket-driver (~> 0.6.1)
15 | actionmailer (5.1.2)
16 | actionpack (= 5.1.2)
17 | actionview (= 5.1.2)
18 | activejob (= 5.1.2)
19 | mail (~> 2.5, >= 2.5.4)
20 | rails-dom-testing (~> 2.0)
21 | actionpack (5.1.2)
22 | actionview (= 5.1.2)
23 | activesupport (= 5.1.2)
24 | rack (~> 2.0)
25 | rack-test (~> 0.6.3)
26 | rails-dom-testing (~> 2.0)
27 | rails-html-sanitizer (~> 1.0, >= 1.0.2)
28 | actionview (5.1.2)
29 | activesupport (= 5.1.2)
30 | builder (~> 3.1)
31 | erubi (~> 1.4)
32 | rails-dom-testing (~> 2.0)
33 | rails-html-sanitizer (~> 1.0, >= 1.0.3)
34 | activejob (5.1.2)
35 | activesupport (= 5.1.2)
36 | globalid (>= 0.3.6)
37 | activemodel (5.1.2)
38 | activesupport (= 5.1.2)
39 | activerecord (5.1.2)
40 | activemodel (= 5.1.2)
41 | activesupport (= 5.1.2)
42 | arel (~> 8.0)
43 | activesupport (5.1.2)
44 | concurrent-ruby (~> 1.0, >= 1.0.2)
45 | i18n (~> 0.7)
46 | minitest (~> 5.1)
47 | tzinfo (~> 1.1)
48 | arel (8.0.0)
49 | builder (3.2.3)
50 | concurrent-ruby (1.0.5)
51 | diff-lcs (1.3)
52 | erubi (1.6.1)
53 | generator_spec (0.9.4)
54 | activesupport (>= 3.0.0)
55 | railties (>= 3.0.0)
56 | globalid (0.4.0)
57 | activesupport (>= 4.2.0)
58 | i18n (0.8.6)
59 | loofah (2.0.3)
60 | nokogiri (>= 1.5.9)
61 | mail (2.6.6)
62 | mime-types (>= 1.16, < 4)
63 | method_source (0.8.2)
64 | mime-types (3.1)
65 | mime-types-data (~> 3.2015)
66 | mime-types-data (3.2016.0521)
67 | mini_portile2 (2.2.0)
68 | minitest (5.10.3)
69 | nio4r (2.1.0)
70 | nokogiri (1.8.0)
71 | mini_portile2 (~> 2.2.0)
72 | rack (2.0.3)
73 | rack-proxy (0.6.2)
74 | rack
75 | rack-test (0.6.3)
76 | rack (>= 1.0)
77 | rails (5.1.2)
78 | actioncable (= 5.1.2)
79 | actionmailer (= 5.1.2)
80 | actionpack (= 5.1.2)
81 | actionview (= 5.1.2)
82 | activejob (= 5.1.2)
83 | activemodel (= 5.1.2)
84 | activerecord (= 5.1.2)
85 | activesupport (= 5.1.2)
86 | bundler (>= 1.3.0, < 2.0)
87 | railties (= 5.1.2)
88 | sprockets-rails (>= 2.0.0)
89 | rails-dom-testing (2.0.3)
90 | activesupport (>= 4.2.0)
91 | nokogiri (>= 1.6)
92 | rails-html-sanitizer (1.0.3)
93 | loofah (~> 2.0)
94 | railties (5.1.2)
95 | actionpack (= 5.1.2)
96 | activesupport (= 5.1.2)
97 | method_source
98 | rake (>= 0.8.7)
99 | thor (>= 0.18.1, < 2.0)
100 | rake (12.0.0)
101 | rspec (3.6.0)
102 | rspec-core (~> 3.6.0)
103 | rspec-expectations (~> 3.6.0)
104 | rspec-mocks (~> 3.6.0)
105 | rspec-core (3.6.0)
106 | rspec-support (~> 3.6.0)
107 | rspec-expectations (3.6.0)
108 | diff-lcs (>= 1.2.0, < 2.0)
109 | rspec-support (~> 3.6.0)
110 | rspec-mocks (3.6.0)
111 | diff-lcs (>= 1.2.0, < 2.0)
112 | rspec-support (~> 3.6.0)
113 | rspec-support (3.6.0)
114 | sprockets (3.7.1)
115 | concurrent-ruby (~> 1.0)
116 | rack (> 1, < 3)
117 | sprockets-rails (3.2.1)
118 | actionpack (>= 4.0)
119 | activesupport (>= 4.0)
120 | sprockets (>= 3.0.0)
121 | thor (0.19.4)
122 | thread_safe (0.3.6)
123 | tzinfo (1.2.3)
124 | thread_safe (~> 0.1)
125 | webpacker (3.0.1)
126 | activesupport (>= 4.2)
127 | rack-proxy (>= 0.6.1)
128 | railties (>= 4.2)
129 | websocket-driver (0.6.5)
130 | websocket-extensions (>= 0.1.0)
131 | websocket-extensions (0.1.2)
132 |
133 | PLATFORMS
134 | ruby
135 |
136 | DEPENDENCIES
137 | generator_spec
138 | rails_vue_melt!
139 | rspec
140 |
141 | BUNDLED WITH
142 | 1.14.2
143 |
--------------------------------------------------------------------------------
/MIT-LICENSE:
--------------------------------------------------------------------------------
1 | Copyright 2017 midnightSuyama
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining
4 | a copy of this software and associated documentation files (the
5 | "Software"), to deal in the Software without restriction, including
6 | without limitation the rights to use, copy, modify, merge, publish,
7 | distribute, sublicense, and/or sell copies of the Software, and to
8 | permit persons to whom the Software is furnished to do so, subject to
9 | the following conditions:
10 |
11 | The above copyright notice and this permission notice shall be
12 | included in all copies or substantial portions of the Software.
13 |
14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # RailsVueMelt
2 |
3 | [](http://badge.fury.io/rb/rails_vue_melt)
4 | [](https://circleci.com/gh/midnightSuyama/rails_vue_melt)
5 |
6 | Rails view with webpack=vue optimizer
7 |
8 | ## Installation
9 |
10 | Add this line to your application's Gemfile:
11 |
12 | ```ruby
13 | gem 'rails_vue_melt'
14 | ```
15 |
16 | And then execute:
17 |
18 | $ bundle
19 |
20 | Or install it yourself as:
21 |
22 | $ gem install rails_vue_melt
23 |
24 | ## Usage
25 |
26 | $ rails new APP_PATH --webpack=vue
27 | ...
28 | $ rails generate vue_melt
29 |
30 | ### Generate
31 |
32 | #### create `app/javascript/packs/vue_melt`
33 |
34 | * application.js
35 | * options/
36 | * users.js
37 | * components/
38 | * Hello.vue
39 | * store/
40 | * index.js
41 | * getters.js
42 | * actions.js
43 | * mutations.js
44 | * mutation-types.js
45 |
46 | #### insert `app/views/layouts/application.html.erb`
47 |
48 | ```html
49 | <%= javascript_pack_tag 'vue_melt/application' %>
50 |
51 | ```
52 |
53 | #### insert `config/webpack/environment.js`
54 |
55 | ```javascript
56 | environment.loaders.get('vue').options.extractCSS = false
57 | ```
58 |
59 | #### install packages
60 |
61 | * [vuex](https://www.npmjs.com/package/vuex)
62 | * [vue-assign-model](https://www.npmjs.com/package/vue-assign-model)
63 | * [lodash.clonedeep](https://www.npmjs.com/package/lodash.clonedeep)
64 |
65 | ### Example
66 |
67 | ```erb
68 |
69 |
70 |
71 |
72 |
User Name: {{ user.name }}
73 |
74 |
75 |
76 | ```
77 |
78 | Add `data-vue` attribute, the value is file name in `app/javascript/packs/vue_melt/options`. Vue instance is mounted at `turbolinks:load` event and unmounted at `turbolinks:visit` event.
79 |
80 | Before Vue rendering, `value`, `checked` or `selected` attributes of elements with `v-model` is automatically assigned to Vue model. Therefore, `form_with` and so on using Active Model can use data binding easily.
81 |
82 | #### accepts_nested_attributes_for
83 |
84 | JSON of `data-vue-model` is assigned to Vue model. Also, `v-model` with prefix `_` is not assigned for `v-for` scope.
85 |
86 | ```erb
87 |
88 |
89 |