vueonrails 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/README.md +70 -0
- data/app/controllers/vue_controller.rb +2 -0
- data/app/helpers/syntax_helper.rb +28 -0
- data/app/views/vue/index.html.erb +1 -0
- data/config/routes.rb +5 -0
- data/lib/generators/generator_templates/packs/index.css +4 -0
- data/lib/generators/generator_templates/packs/index.js +30 -0
- data/lib/generators/generator_templates/packs/index.vue +13 -0
- data/lib/generators/generator_templates/packs/pack.js.erb +18 -0
- data/lib/generators/generator_templates/sfc/single-file-component.vue +45 -0
- data/lib/generators/generator_templates/tests/unit.test.js.erb +17 -0
- data/lib/generators/generator_templates/turbolinks/turbolinks-pack.js.erb +23 -0
- data/lib/generators/options/click.rb +10 -0
- data/lib/generators/options/form.rb +19 -0
- data/lib/generators/options/list.rb +32 -0
- data/lib/generators/options/modal.rb +26 -0
- data/lib/generators/options/seperate.rb +5 -0
- data/lib/generators/options/single.rb +3 -0
- data/lib/generators/options/table.rb +10 -0
- data/lib/generators/options/test.rb +2 -0
- data/lib/generators/options/turbolinks-seperate.rb +5 -0
- data/lib/generators/options/turbolinks-single.rb +3 -0
- data/lib/generators/options/vuex.rb +10 -0
- data/lib/generators/vue/USAGE +17 -0
- data/lib/generators/vue/vue_generator.rb +60 -0
- data/lib/install/Procfile +2 -0
- data/lib/install/config/alias.js +9 -0
- data/lib/install/setup.rb +78 -0
- data/lib/install/spv.rb +20 -0
- data/lib/install/test.rb +46 -0
- data/lib/install/turbolinks.rb +3 -0
- data/lib/install/ui.rb +4 -0
- data/lib/install/vuex.rb +12 -0
- data/lib/tasks/assets.rake +12 -0
- data/lib/tasks/info.rake +21 -0
- data/lib/tasks/vue.rake +27 -0
- data/lib/vueonrails.rb +13 -0
- data/lib/vueonrails/post_message.rb +4 -0
- data/lib/vueonrails/version.rb +3 -0
- data/vendor/assets/javascripts/axios.js +1545 -0
- data/vendor/assets/javascripts/axios.map +1 -0
- data/vendor/assets/javascripts/element-ui.js +12 -0
- data/vendor/assets/javascripts/vue-resource.js +1531 -0
- data/vendor/assets/javascripts/vue-router.js +2709 -0
- data/vendor/assets/javascripts/vue-router2.js +2284 -0
- data/vendor/assets/javascripts/vue-validator.js +910 -0
- data/vendor/assets/javascripts/vue-validator2.js +2615 -0
- data/vendor/assets/javascripts/vue-validator3.js +2054 -0
- data/vendor/assets/javascripts/vue.js +10237 -0
- data/vendor/assets/javascripts/vue.min.js +9 -0
- data/vendor/assets/javascripts/vue2.js +8568 -0
- data/vendor/assets/javascripts/vue2.min.js +8 -0
- data/vendor/assets/javascripts/vueonrails.js +39 -0
- data/vendor/assets/javascripts/vuex.js +722 -0
- data/vendor/assets/javascripts/vuex2.js +805 -0
- data/vendor/assets/stylesheets/element-ui.css +1 -0
- metadata +128 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA256:
|
3
|
+
metadata.gz: fca55cc783008efe3aa7a536b250238566075ca33fca7d3212a9bec8f79eed63
|
4
|
+
data.tar.gz: 6bb87bc9edc75b27701d4d1f603d7ff579965000ffcf81d8e2c5db0def45e4cf
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: fbe0bf9a3d1e771891e1deed60f6a3640658e6408b2aa0ceec5f8a1d43135d67ec4e3a8572801ffd4cb24d0d24337c4f736b791af197b0347b7931354b1d7c28
|
7
|
+
data.tar.gz: c4c1dd1a0a1c4f07953a9130802d29a4ed7d222107c2f0690d6fd47b76a4993fdbe8016109383f906a81bb64020bdbb71e43e3ecd5b649e349a535bfab6bebe8
|
data/README.md
ADDED
@@ -0,0 +1,70 @@
|
|
1
|
+
# Welcome to Vue on Rails Gem 💎
|
2
|
+
|
3
|
+
> Vue for your favourite Ruby on Rails projects
|
4
|
+
|
5
|
+
The Vue on Rails gem makes it easy to build your Rails with Vue application.
|
6
|
+
|
7
|
+
It ships out-of-the-box configuration, component generators and solutions to make life easy for both Vue and Rails.
|
8
|
+
|
9
|
+
---
|
10
|
+
|
11
|
+
## Getting Started
|
12
|
+
|
13
|
+
To create an empty Vue on Rails project, please run the following Rails command with an application template
|
14
|
+
|
15
|
+
```
|
16
|
+
rails new app -m http://vueonrails.com/vue
|
17
|
+
```
|
18
|
+
|
19
|
+
To browse the application template, it's here http://vueonrails.com/vue
|
20
|
+
|
21
|
+
|
22
|
+
## Manual Installation
|
23
|
+
|
24
|
+
Add this line to your application's Gemfile and run `bundle`
|
25
|
+
|
26
|
+
```ruby
|
27
|
+
gem 'vueonrails'
|
28
|
+
```
|
29
|
+
|
30
|
+
and run `rails vue:setup`
|
31
|
+
|
32
|
+
You can scaffold a Vue component by reading along the [Vue on Rails Handbook](/docs)
|
33
|
+
|
34
|
+
---
|
35
|
+
|
36
|
+
## Getting Help & Contributing Back
|
37
|
+
|
38
|
+
- [Official Rails documentation](https://guides.rubyonrails.org)
|
39
|
+
- [Official Vue documentation](https://vuejs.org/v2/guide/)
|
40
|
+
- [Official Vue Curated components](https://curated.vuejs.org)
|
41
|
+
- [Vuecomponents.com](https://vuecomponents.com)
|
42
|
+
- [Vuetoolbox.com](http://www.vuetoolbox.com)
|
43
|
+
- [Github search for vue stuffs](https://github.com/search?o=desc&q=vue&s=stars&type=Repositories)
|
44
|
+
- [Stackoverflow.com](https://stackoverflow.com/questions/tagged/vue.js+ruby-on-rails)
|
45
|
+
|
46
|
+
|
47
|
+
- On stackoverflow.com, tag your Vue on Rails questions with Vue & Rails and we will try to answer you.
|
48
|
+
|
49
|
+
- And it is likely that I missed some great online materials. If you think there is a more worthy resource, please edit this readme via a pull request.
|
50
|
+
|
51
|
+
- Find a bug? [Submit an issue](https://github.com/ytbryan/vueonrails/issues) on our tracker.
|
52
|
+
|
53
|
+
- Find something wrong? [Send a pull request](https://github.com/ytbryan/vueonrails/pulls).
|
54
|
+
|
55
|
+
---
|
56
|
+
|
57
|
+
## Contact
|
58
|
+
|
59
|
+
📮 Bryan Lim ytbryan@gmail.com
|
60
|
+
|
61
|
+
> If you are using Vue.js via this rubygem, please let me know so that I can list your project/company on this repo. Thank you!
|
62
|
+
|
63
|
+
Richard LaFranchi and I are writing a book [Vue on Rails](http://vueonrails.com). If you are interested to be one of the early reviewers of our drafts, please email me.
|
64
|
+
|
65
|
+
---
|
66
|
+
|
67
|
+
## MIT License
|
68
|
+
|
69
|
+
Bug reports and pull requests are welcome on GitHub at https://github.com/ytbryan/vueonrails. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
|
70
|
+
The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
|
@@ -0,0 +1,28 @@
|
|
1
|
+
module SyntaxHelper
|
2
|
+
def specific_page_vue
|
3
|
+
return " #{controller_name} #{action_name} "
|
4
|
+
end
|
5
|
+
|
6
|
+
def vue_include_tag(version)
|
7
|
+
javascript_include_tag "https://cdnjs.cloudflare.com/ajax/libs/vue/#{version}/vue.js" if Rails.env.development?
|
8
|
+
end
|
9
|
+
|
10
|
+
def rails_version
|
11
|
+
"<p>#{Rails.version}</p>".html_safe
|
12
|
+
end
|
13
|
+
|
14
|
+
def vue_on_rails_version
|
15
|
+
"<p>#{VueOnRails::VERSION}</p>".html_safe
|
16
|
+
end
|
17
|
+
|
18
|
+
def vue_component(identifier, variable=nil)
|
19
|
+
concat("<div id=\"#{identifier}\" refs=\"#{identifier}\">".html_safe)
|
20
|
+
concat("</div>".html_safe)
|
21
|
+
if(variable != nil)
|
22
|
+
variable.each {|key, value|
|
23
|
+
concat("<div id=\"vueonrails-#{key}\" data-#{key}=\'#{value}\'>".html_safe)
|
24
|
+
concat("</div>".html_safe)
|
25
|
+
}; nil
|
26
|
+
end
|
27
|
+
end
|
28
|
+
end
|
@@ -0,0 +1 @@
|
|
1
|
+
<%= vue_component params[:name], nil %>
|
data/config/routes.rb
ADDED
@@ -0,0 +1,30 @@
|
|
1
|
+
// Generated by Vue on Rails gem ~> github.com/ytbryan/vueonrails
|
2
|
+
// To generate component part like this, please run `rails generate vue something`
|
3
|
+
// To display this Vue component, add `require('./<%= name %>')` to app/javascript/packs/application.js
|
4
|
+
|
5
|
+
export default {
|
6
|
+
// props: {},
|
7
|
+
data: function () {
|
8
|
+
return {
|
9
|
+
message: "Hello <%= name %>!",
|
10
|
+
items: []
|
11
|
+
};
|
12
|
+
},
|
13
|
+
watch: {
|
14
|
+
onCreated: function (response) {
|
15
|
+
this.items = response.data
|
16
|
+
}
|
17
|
+
},
|
18
|
+
methods: {
|
19
|
+
//uncomment the <button @click="onClick"> at your <%= name %>.vue
|
20
|
+
onClick: function () {
|
21
|
+
console.log("clicked")
|
22
|
+
}
|
23
|
+
},
|
24
|
+
computed: {},
|
25
|
+
// components: {},
|
26
|
+
// mixins: [],
|
27
|
+
// directives: {},
|
28
|
+
// filters: {},
|
29
|
+
// asyncComputed: {}, // yarn add vue-async-computed
|
30
|
+
};
|
@@ -0,0 +1,13 @@
|
|
1
|
+
<!-- Generated by Vue on Rails gem ~> github.com/ytbryan/vueonrails -->
|
2
|
+
<!-- To find the corresponding pack, go to app/javascript/packs/<%= name %>.js -->
|
3
|
+
<!-- To generate component part like this, please run `rails generate vue something --seperate` -->
|
4
|
+
|
5
|
+
<template>
|
6
|
+
<div id="<%= name %>">
|
7
|
+
<p>{{ message }}</p>
|
8
|
+
<!-- <button @click="onClick">click this</button> -->
|
9
|
+
</div>
|
10
|
+
</template>
|
11
|
+
|
12
|
+
<script src="./<%= name %>.js"></script>
|
13
|
+
<style scoped src="./<%= name %>.css"></style>
|
@@ -0,0 +1,18 @@
|
|
1
|
+
// Generated by Vue on Rails gem ~> github.com/ytbryan/vueonrails
|
2
|
+
// To display this Vue component on Rails View, add `require('./<%= name %>')` to app/javascript/application.js
|
3
|
+
// To generate another component part, please run `rails generate vue something`
|
4
|
+
|
5
|
+
import Vue from 'vue'
|
6
|
+
<% if options['seperate'] -%>
|
7
|
+
import App from '../parts/<%= name %>/<%= name %>.vue'
|
8
|
+
<% else -%>
|
9
|
+
import App from '../parts/<%= name %>.vue'
|
10
|
+
<% end -%>
|
11
|
+
|
12
|
+
document.addEventListener('DOMContentLoaded', () => {
|
13
|
+
document.body.appendChild(document.createElement('<%= name %>'))
|
14
|
+
const <%= name %> = new Vue({
|
15
|
+
render: h => h(App)
|
16
|
+
}).$mount('<%= name %>')
|
17
|
+
console.log({<%= name %>})
|
18
|
+
})
|
@@ -0,0 +1,45 @@
|
|
1
|
+
<!-- Generated by Vue on Rails gem ~> github.com/ytbryan/vueonrails -->
|
2
|
+
<!-- To find the corresponding pack, go to app/javascript/packs/<%= name %>.js -->
|
3
|
+
<!-- To generate component part like this, please run `rails generate vue something` -->
|
4
|
+
|
5
|
+
<template>
|
6
|
+
<div id="<%= name %>">
|
7
|
+
<p>{{ message }}</p>
|
8
|
+
<!-- <button @click="onClick">click this</button> -->
|
9
|
+
</div>
|
10
|
+
</template>
|
11
|
+
|
12
|
+
<script>
|
13
|
+
export default {
|
14
|
+
// props: {},
|
15
|
+
data: function() {
|
16
|
+
return {
|
17
|
+
message: "Hello <%= name %>!"
|
18
|
+
};
|
19
|
+
},
|
20
|
+
watch: {
|
21
|
+
onCreated: function(response) {
|
22
|
+
this.items = response.data;
|
23
|
+
}
|
24
|
+
},
|
25
|
+
methods: {
|
26
|
+
//uncomment the <button @click="onClick"> at your template
|
27
|
+
onClick: function() {
|
28
|
+
console.log("clicked");
|
29
|
+
}
|
30
|
+
},
|
31
|
+
computed: {}
|
32
|
+
// components: {},
|
33
|
+
// mixins: [],
|
34
|
+
// directives: {},
|
35
|
+
// filters: {},
|
36
|
+
// asyncComputed: {},
|
37
|
+
};
|
38
|
+
</script>
|
39
|
+
|
40
|
+
<style scoped>
|
41
|
+
p {
|
42
|
+
font-size: 2em;
|
43
|
+
text-align: center;
|
44
|
+
}
|
45
|
+
</style>
|
@@ -0,0 +1,17 @@
|
|
1
|
+
// Generated by Vue on Rails gem ~> github.com/ytbryan/vueonrails
|
2
|
+
// To generate component part with test, please run `rails generate vue something --test`
|
3
|
+
|
4
|
+
import { shallowMount } from '@vue/test-utils'
|
5
|
+
<% if options['seperate'] -%>
|
6
|
+
import App from '@/<%= name %>/<%= name %>.vue'
|
7
|
+
<% else -%>
|
8
|
+
import App from '@/<%= name %>.vue'
|
9
|
+
<% end -%>
|
10
|
+
|
11
|
+
describe('<%= name %>.vue', () => {
|
12
|
+
it('render hello <%= name %>', () => {
|
13
|
+
const message = "Hello <%= name %>!"
|
14
|
+
const wrapper = shallowMount(App)
|
15
|
+
expect(wrapper.find('#<%= name %>').text()).toBe(message)
|
16
|
+
})
|
17
|
+
})
|
@@ -0,0 +1,23 @@
|
|
1
|
+
// Generated by Vue on Rails gem ~> github.com/ytbryan/vueonrails
|
2
|
+
// To display this Vue component, add `require('./<%= name %>')` to app/javascript/packs/application.js
|
3
|
+
// To generate component part like this, please run `rails generate vue something`
|
4
|
+
|
5
|
+
import TurbolinksAdapter from 'vue-turbolinks';
|
6
|
+
import Vue from 'vue.esm'
|
7
|
+
<% if options['seperate'] -%>
|
8
|
+
import App from '../parts/<%= name %>/<%= name %>.vue'
|
9
|
+
<% else -%>
|
10
|
+
import App from '../parts/<%= name %>.vue'
|
11
|
+
<% end -%>
|
12
|
+
|
13
|
+
Vue.use(TurbolinksAdapter)
|
14
|
+
document.addEventListener('turbolinks:load', () => {
|
15
|
+
//isView helps to show certain of Specific-page Vue approach.
|
16
|
+
//You can change ### to 'pages#index' or you can remove it if you are not using it
|
17
|
+
if(isView("###")){
|
18
|
+
const <%= name %> = new Vue({
|
19
|
+
render: h => h(App)
|
20
|
+
}).$mount('#<%= name %>')
|
21
|
+
console.log({<%= name %>})
|
22
|
+
}
|
23
|
+
})
|
@@ -0,0 +1,10 @@
|
|
1
|
+
click = <<-eos
|
2
|
+
<button @click="onClick()">click</button>
|
3
|
+
eos
|
4
|
+
|
5
|
+
say "Inserted click example into component"
|
6
|
+
insert_into_file "#{PARTS_PATH}/#{name}.vue",
|
7
|
+
click, after: "<p>{{ message }}</p>\n"
|
8
|
+
|
9
|
+
insert_into_file "#{PARTS_PATH}/#{name}.vue",
|
10
|
+
" alert('click');\n", after: "console.log(\"clicked\")\n"
|
@@ -0,0 +1,19 @@
|
|
1
|
+
say "Inserted form example into component"
|
2
|
+
insert_into_file "#{PACKS_PATH}/#{name}.js" ,
|
3
|
+
"import FormFor from 'vue-form-for'\n",
|
4
|
+
after: "import Vue from 'vue'\n"
|
5
|
+
|
6
|
+
insert_into_file "#{PACKS_PATH}/#{name}.js",
|
7
|
+
"Vue.use(FormFor)\n",
|
8
|
+
before: "document.addEventListener"
|
9
|
+
|
10
|
+
form = <<-eos
|
11
|
+
<form-for model="#{name}">
|
12
|
+
<text-field/>
|
13
|
+
<submit-tag/>
|
14
|
+
</form-for>
|
15
|
+
eos
|
16
|
+
|
17
|
+
insert_into_file "#{PARTS_PATH}/#{name}.vue",
|
18
|
+
form,
|
19
|
+
after: "<p>{{ message }}</p>\n"
|
@@ -0,0 +1,32 @@
|
|
1
|
+
list = <<-eos
|
2
|
+
<button @click="add()">add</button>
|
3
|
+
<button @click="remove()">remove</button>
|
4
|
+
<ul>
|
5
|
+
<li v-for="(item, index) in items" :key="index">
|
6
|
+
{{item}}
|
7
|
+
</li>
|
8
|
+
</ul>
|
9
|
+
eos
|
10
|
+
|
11
|
+
array = <<-eos
|
12
|
+
items: [],
|
13
|
+
eos
|
14
|
+
|
15
|
+
addandremove = <<-eos
|
16
|
+
remove: function(){
|
17
|
+
this.items.pop()
|
18
|
+
},
|
19
|
+
add: function(){
|
20
|
+
this.items.push(this.message)
|
21
|
+
},
|
22
|
+
eos
|
23
|
+
|
24
|
+
say "Inserted list example into component"
|
25
|
+
insert_into_file "#{PARTS_PATH}/#{name}.vue",
|
26
|
+
list, after: "<p>{{ message }}</p>\n"
|
27
|
+
|
28
|
+
insert_into_file "#{PARTS_PATH}/#{name}.vue",
|
29
|
+
addandremove, after: "methods: {\n"
|
30
|
+
|
31
|
+
insert_into_file "#{PARTS_PATH}/#{name}.vue",
|
32
|
+
array, after: "return {\n"
|
@@ -0,0 +1,26 @@
|
|
1
|
+
run "yarn add vue-js-modal"
|
2
|
+
|
3
|
+
say "Inserted vue-js-modal example into component"
|
4
|
+
insert_into_file "#{PACKS_PATH}/#{name}.js" ,
|
5
|
+
"import VModal from 'vue-js-modal'\n",
|
6
|
+
after: "import Vue from 'vue'\n"
|
7
|
+
|
8
|
+
insert_into_file "#{PACKS_PATH}/#{name}.js",
|
9
|
+
"Vue.use(VModal)\n",
|
10
|
+
before: "document.addEventListener"
|
11
|
+
|
12
|
+
modal = <<-eos
|
13
|
+
<button @click="onClick">click this</button>
|
14
|
+
<modal name="hello-world">
|
15
|
+
<div style="padding: 30px;">
|
16
|
+
{{ message }}
|
17
|
+
</div>
|
18
|
+
<v-dialog/>
|
19
|
+
</modal>
|
20
|
+
eos
|
21
|
+
|
22
|
+
insert_into_file "#{PARTS_PATH}/#{name}.vue",
|
23
|
+
modal, after: "<p>{{ message }}</p>\n"
|
24
|
+
|
25
|
+
insert_into_file "#{PARTS_PATH}/#{name}.vue",
|
26
|
+
" this.$modal.show('hello-world');\n", after: "console.log(\"clicked\")\n"
|
@@ -0,0 +1,5 @@
|
|
1
|
+
say "Generated a vue component with seperation of concern"
|
2
|
+
template "packs/pack.js.erb", "#{PACKS_PATH}/#{name}.js"
|
3
|
+
template "packs/index.vue", "#{PARTS_PATH}/#{name}/#{name}.vue"
|
4
|
+
template "packs/index.js", "#{PARTS_PATH}/#{name}/#{name}.js"
|
5
|
+
copy_file "packs/index.css", "#{PARTS_PATH}/#{name}/#{name}.css"
|
@@ -0,0 +1,10 @@
|
|
1
|
+
run "yarn add vuetable-2"
|
2
|
+
|
3
|
+
say "Inserted table example into component"
|
4
|
+
insert_into_file "#{PACKS_PATH}/#{name}.js" ,
|
5
|
+
"import Vuetable from 'vuetable-2/src/components/Vuetable'\n",
|
6
|
+
after: "import Vue from 'vue'\n"
|
7
|
+
|
8
|
+
insert_into_file "#{PACKS_PATH}/#{name}.js",
|
9
|
+
"Vue.use(Vuetable)\n",
|
10
|
+
before: "document.addEventListener"
|
@@ -0,0 +1,5 @@
|
|
1
|
+
say "Adding turbolinks to a single file component"
|
2
|
+
template "turbolinks/turbolinks-pack.js.erb", "#{PACKS_PATH}/#{name}.js"
|
3
|
+
template "packs/index.vue", "#{PARTS_PATH}/#{name}/#{name}.vue"
|
4
|
+
template "packs/index.js", "#{PARTS_PATH}/#{name}/#{name}.js"
|
5
|
+
copy_file "packs/index.css", "#{PARTS_PATH}/#{name}/#{name}.css"
|
@@ -0,0 +1,10 @@
|
|
1
|
+
run "yarn add vuex"
|
2
|
+
|
3
|
+
say "Added Vuex"
|
4
|
+
insert_into_file "#{PACKS_PATH}/#{name}.js" ,
|
5
|
+
"import Vuex from 'vuex'\n",
|
6
|
+
after: "import Vue from 'vue'\n"
|
7
|
+
|
8
|
+
insert_into_file "#{PACKS_PATH}/#{name}.js",
|
9
|
+
"Vue.use(Vuex)\n",
|
10
|
+
before: "document.addEventListener"
|
@@ -0,0 +1,17 @@
|
|
1
|
+
Description:
|
2
|
+
This generator scaffold a javascript pack and vue component that may be embedded into your Rails view.
|
3
|
+
|
4
|
+
Example:
|
5
|
+
rails generate vue <component>
|
6
|
+
|
7
|
+
This will create:
|
8
|
+
app/javascript/parts/component.vue
|
9
|
+
app/javascript/packs/component.js
|
10
|
+
|
11
|
+
rails g vue <component> --seperate
|
12
|
+
|
13
|
+
This will create:
|
14
|
+
app/javascript/parts/component/component.vue
|
15
|
+
app/javascript/parts/component/component.css
|
16
|
+
app/javascript/parts/component/component.js
|
17
|
+
app/javascript/packs/component.js
|