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.
Files changed (58) hide show
  1. checksums.yaml +7 -0
  2. data/README.md +70 -0
  3. data/app/controllers/vue_controller.rb +2 -0
  4. data/app/helpers/syntax_helper.rb +28 -0
  5. data/app/views/vue/index.html.erb +1 -0
  6. data/config/routes.rb +5 -0
  7. data/lib/generators/generator_templates/packs/index.css +4 -0
  8. data/lib/generators/generator_templates/packs/index.js +30 -0
  9. data/lib/generators/generator_templates/packs/index.vue +13 -0
  10. data/lib/generators/generator_templates/packs/pack.js.erb +18 -0
  11. data/lib/generators/generator_templates/sfc/single-file-component.vue +45 -0
  12. data/lib/generators/generator_templates/tests/unit.test.js.erb +17 -0
  13. data/lib/generators/generator_templates/turbolinks/turbolinks-pack.js.erb +23 -0
  14. data/lib/generators/options/click.rb +10 -0
  15. data/lib/generators/options/form.rb +19 -0
  16. data/lib/generators/options/list.rb +32 -0
  17. data/lib/generators/options/modal.rb +26 -0
  18. data/lib/generators/options/seperate.rb +5 -0
  19. data/lib/generators/options/single.rb +3 -0
  20. data/lib/generators/options/table.rb +10 -0
  21. data/lib/generators/options/test.rb +2 -0
  22. data/lib/generators/options/turbolinks-seperate.rb +5 -0
  23. data/lib/generators/options/turbolinks-single.rb +3 -0
  24. data/lib/generators/options/vuex.rb +10 -0
  25. data/lib/generators/vue/USAGE +17 -0
  26. data/lib/generators/vue/vue_generator.rb +60 -0
  27. data/lib/install/Procfile +2 -0
  28. data/lib/install/config/alias.js +9 -0
  29. data/lib/install/setup.rb +78 -0
  30. data/lib/install/spv.rb +20 -0
  31. data/lib/install/test.rb +46 -0
  32. data/lib/install/turbolinks.rb +3 -0
  33. data/lib/install/ui.rb +4 -0
  34. data/lib/install/vuex.rb +12 -0
  35. data/lib/tasks/assets.rake +12 -0
  36. data/lib/tasks/info.rake +21 -0
  37. data/lib/tasks/vue.rake +27 -0
  38. data/lib/vueonrails.rb +13 -0
  39. data/lib/vueonrails/post_message.rb +4 -0
  40. data/lib/vueonrails/version.rb +3 -0
  41. data/vendor/assets/javascripts/axios.js +1545 -0
  42. data/vendor/assets/javascripts/axios.map +1 -0
  43. data/vendor/assets/javascripts/element-ui.js +12 -0
  44. data/vendor/assets/javascripts/vue-resource.js +1531 -0
  45. data/vendor/assets/javascripts/vue-router.js +2709 -0
  46. data/vendor/assets/javascripts/vue-router2.js +2284 -0
  47. data/vendor/assets/javascripts/vue-validator.js +910 -0
  48. data/vendor/assets/javascripts/vue-validator2.js +2615 -0
  49. data/vendor/assets/javascripts/vue-validator3.js +2054 -0
  50. data/vendor/assets/javascripts/vue.js +10237 -0
  51. data/vendor/assets/javascripts/vue.min.js +9 -0
  52. data/vendor/assets/javascripts/vue2.js +8568 -0
  53. data/vendor/assets/javascripts/vue2.min.js +8 -0
  54. data/vendor/assets/javascripts/vueonrails.js +39 -0
  55. data/vendor/assets/javascripts/vuex.js +722 -0
  56. data/vendor/assets/javascripts/vuex2.js +805 -0
  57. data/vendor/assets/stylesheets/element-ui.css +1 -0
  58. 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,2 @@
1
+ class VueController < ApplicationController
2
+ end
@@ -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,5 @@
1
+ Rails.application.routes.draw do
2
+ if Rails.env.development?
3
+ get 'vue/(:name)', to: "vue#index"
4
+ end
5
+ end
@@ -0,0 +1,4 @@
1
+ p {
2
+ font-size: 2em;
3
+ text-align: center;
4
+ }
@@ -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,3 @@
1
+ say "Generated a single file component"
2
+ template "packs/pack.js.erb", "#{PACKS_PATH}/#{name}.js"
3
+ template "sfc/single-file-component.vue", "#{PARTS_PATH}/#{name}.vue"
@@ -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,2 @@
1
+ say "Included Jest test"
2
+ template "tests/unit.test.js.erb", "#{TESTS_PATH}/#{name}.test.js"
@@ -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,3 @@
1
+ say "Added turbolinks to a single file component"
2
+ template "turbolinks/turbolinks-pack.js.erb", "#{PACKS_PATH}/#{name}.js"
3
+ template "sfc/single-file-component.vue", "#{PARTS_PATH}/#{name}.vue"
@@ -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