vueonrails 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: fca55cc783008efe3aa7a536b250238566075ca33fca7d3212a9bec8f79eed63
+  data.tar.gz: 6bb87bc9edc75b27701d4d1f603d7ff579965000ffcf81d8e2c5db0def45e4cf
+SHA512:
+  metadata.gz: fbe0bf9a3d1e771891e1deed60f6a3640658e6408b2aa0ceec5f8a1d43135d67ec4e3a8572801ffd4cb24d0d24337c4f736b791af197b0347b7931354b1d7c28
+  data.tar.gz: c4c1dd1a0a1c4f07953a9130802d29a4ed7d222107c2f0690d6fd47b76a4993fdbe8016109383f906a81bb64020bdbb71e43e3ecd5b649e349a535bfab6bebe8

data/README.md

@@ -0,0 +1,70 @@
+# Welcome to Vue on Rails Gem 💎
+
+> Vue for your favourite Ruby on Rails projects
+
+The Vue on Rails gem makes it easy to build your Rails with Vue application. 
+
+It ships out-of-the-box configuration, component generators and solutions to make life easy for both Vue and Rails. 
+
+---
+
+## Getting Started
+
+To create an empty Vue on Rails project, please run the following Rails command with an application template
+
+```
+rails new app -m http://vueonrails.com/vue
+```
+
+To browse the application template, it's here http://vueonrails.com/vue 
+
+
+## Manual Installation
+
+Add this line to your application's Gemfile and run `bundle`
+
+```ruby
+gem 'vueonrails'
+```
+
+and run `rails vue:setup`
+
+You can scaffold a Vue component by reading along the [Vue on Rails Handbook](/docs)
+
+---
+
+## Getting Help & Contributing Back 
+
+- [Official Rails documentation](https://guides.rubyonrails.org)
+- [Official Vue documentation](https://vuejs.org/v2/guide/)
+- [Official Vue Curated components](https://curated.vuejs.org)
+- [Vuecomponents.com](https://vuecomponents.com)
+- [Vuetoolbox.com](http://www.vuetoolbox.com)
+- [Github search for vue stuffs](https://github.com/search?o=desc&q=vue&s=stars&type=Repositories)
+- [Stackoverflow.com](https://stackoverflow.com/questions/tagged/vue.js+ruby-on-rails)
+
+
+- On stackoverflow.com, tag your Vue on Rails questions with Vue & Rails and we will try to answer you. 
+
+- 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.
+
+- Find a bug? [Submit an issue](https://github.com/ytbryan/vueonrails/issues) on our tracker.
+
+- Find something wrong? [Send a pull request](https://github.com/ytbryan/vueonrails/pulls). 
+
+---
+
+## Contact
+
+📮 Bryan Lim ytbryan@gmail.com
+
+> 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!
+
+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.
+
+---
+
+## MIT License
+
+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.
+The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).

data/app/controllers/vue_controller.rb

@@ -0,0 +1,2 @@
+class VueController < ApplicationController
+end

data/app/helpers/syntax_helper.rb

@@ -0,0 +1,28 @@
+module SyntaxHelper
+  def specific_page_vue
+    return " #{controller_name} #{action_name} "
+  end
+
+  def vue_include_tag(version)
+    javascript_include_tag "https://cdnjs.cloudflare.com/ajax/libs/vue/#{version}/vue.js" if Rails.env.development?
+  end
+
+  def rails_version
+    "<p>#{Rails.version}</p>".html_safe
+  end
+
+  def vue_on_rails_version
+     "<p>#{VueOnRails::VERSION}</p>".html_safe
+  end
+  
+  def vue_component(identifier, variable=nil)
+    concat("<div id=\"#{identifier}\" refs=\"#{identifier}\">".html_safe)
+    concat("</div>".html_safe)
+    if(variable != nil)
+      variable.each {|key, value| 
+        concat("<div id=\"vueonrails-#{key}\" data-#{key}=\'#{value}\'>".html_safe)
+        concat("</div>".html_safe)
+      }; nil
+    end
+  end
+end

data/app/views/vue/index.html.erb

@@ -0,0 +1 @@
+<%= vue_component params[:name], nil %>

data/config/routes.rb

@@ -0,0 +1,5 @@
+Rails.application.routes.draw do
+  if Rails.env.development?
+    get 'vue/(:name)', to: "vue#index"
+  end
+end

data/lib/generators/generator_templates/packs/index.css

@@ -0,0 +1,4 @@
+p {
+  font-size: 2em;
+  text-align: center;
+}

data/lib/generators/generator_templates/packs/index.js

@@ -0,0 +1,30 @@
+// Generated by Vue on Rails gem ~> github.com/ytbryan/vueonrails
+// To generate component part like this, please run `rails generate vue something` 
+// To display this Vue component, add `require('./<%= name %>')` to app/javascript/packs/application.js 
+
+export default {
+  // props: {},
+  data: function () {
+    return {
+      message: "Hello <%= name %>!",
+      items: []
+    };
+  },
+  watch: {
+    onCreated: function (response) {
+      this.items = response.data
+    }
+  },
+  methods: {
+    //uncomment the <button  @click="onClick"> at your <%= name %>.vue 
+    onClick: function () {
+      console.log("clicked")
+    }
+  },
+  computed: {},
+  // components: {},
+  // mixins: [], 
+  // directives: {}, 
+  // filters: {},
+  // asyncComputed: {}, // yarn add vue-async-computed
+};

data/lib/generators/generator_templates/packs/index.vue

@@ -0,0 +1,13 @@
+<!-- Generated by Vue on Rails gem ~> github.com/ytbryan/vueonrails -->
+<!-- To find the corresponding pack, go to app/javascript/packs/<%= name %>.js -->
+<!-- To generate component part like this, please run `rails generate vue something --seperate` -->
+
+<template>
+  <div id="<%= name %>">
+    <p>{{ message }}</p>
+    <!-- <button @click="onClick">click this</button> -->
+  </div>
+</template>
+
+<script src="./<%= name %>.js"></script>
+<style scoped src="./<%= name %>.css"></style>

data/lib/generators/generator_templates/packs/pack.js.erb

@@ -0,0 +1,18 @@
+// Generated by Vue on Rails gem ~> github.com/ytbryan/vueonrails
+// To display this Vue component on Rails View, add `require('./<%= name %>')` to app/javascript/application.js
+// To generate another component part, please run `rails generate vue something`
+
+import Vue from 'vue'
+<% if options['seperate'] -%>
+import App from '../parts/<%= name %>/<%= name %>.vue'
+<% else -%>
+import App from '../parts/<%= name %>.vue'
+<% end -%>
+
+document.addEventListener('DOMContentLoaded', () => {
+  document.body.appendChild(document.createElement('<%= name %>'))
+  const <%= name %> = new Vue({
+    render: h => h(App)
+  }).$mount('<%= name %>')
+  console.log({<%= name %>})
+})

data/lib/generators/generator_templates/sfc/single-file-component.vue

@@ -0,0 +1,45 @@
+<!-- Generated by Vue on Rails gem ~> github.com/ytbryan/vueonrails -->
+<!-- To find the corresponding pack, go to app/javascript/packs/<%= name %>.js -->
+<!-- To generate component part like this, please run `rails generate vue something` -->
+
+<template> 
+  <div id="<%= name %>">
+    <p>{{ message }}</p>
+    <!-- <button @click="onClick">click this</button> -->
+  </div>
+</template>
+
+<script>
+export default {
+  // props: {},
+  data: function() {
+    return {
+      message: "Hello <%= name %>!"
+    };
+  },
+  watch: {
+    onCreated: function(response) {
+      this.items = response.data;
+    }
+  },
+  methods: {
+    //uncomment the <button  @click="onClick"> at your template
+    onClick: function() {
+      console.log("clicked");
+    }
+  },
+  computed: {}
+  // components: {},
+  // mixins: [],
+  // directives: {},
+  // filters: {},
+  // asyncComputed: {},
+};
+</script>
+
+<style scoped>
+p {
+  font-size: 2em;
+  text-align: center;
+}
+</style>

data/lib/generators/generator_templates/tests/unit.test.js.erb

@@ -0,0 +1,17 @@
+// Generated by Vue on Rails gem ~> github.com/ytbryan/vueonrails 
+// To generate component part with test, please run `rails generate vue something --test`
+
+import { shallowMount } from '@vue/test-utils'
+<% if options['seperate'] -%>
+import App from '@/<%= name %>/<%= name %>.vue'
+<% else -%>
+import App from '@/<%= name %>.vue'
+<% end -%>
+
+describe('<%= name %>.vue', () => {
+  it('render hello <%= name %>', () => {
+    const message = "Hello <%= name %>!"
+    const wrapper = shallowMount(App)
+    expect(wrapper.find('#<%= name %>').text()).toBe(message)
+  })
+})

data/lib/generators/generator_templates/turbolinks/turbolinks-pack.js.erb

@@ -0,0 +1,23 @@
+// Generated by Vue on Rails gem ~> github.com/ytbryan/vueonrails
+// To display this Vue component, add `require('./<%= name %>')` to app/javascript/packs/application.js  
+// To generate component part like this, please run `rails generate vue something`
+
+import TurbolinksAdapter from 'vue-turbolinks';
+import Vue from 'vue.esm'
+<% if options['seperate'] -%>
+import App from '../parts/<%= name %>/<%= name %>.vue'
+<% else -%>
+import App from '../parts/<%= name %>.vue'
+<% end -%>
+
+Vue.use(TurbolinksAdapter)
+document.addEventListener('turbolinks:load', () => {
+  //isView helps to show certain of Specific-page Vue approach. 
+  //You can change ### to 'pages#index' or you can remove it if you are not using it 
+  if(isView("###")){
+    const <%= name %> = new Vue({
+      render: h => h(App)
+    }).$mount('#<%= name %>')
+    console.log({<%= name %>})
+  }  
+})

data/lib/generators/options/click.rb

@@ -0,0 +1,10 @@
+click = <<-eos
+<button @click="onClick()">click</button>
+eos
+
+say "Inserted click example into component"
+insert_into_file "#{PARTS_PATH}/#{name}.vue",
+click, after: "<p>{{ message }}</p>\n"
+
+insert_into_file "#{PARTS_PATH}/#{name}.vue",
+"      alert('click');\n", after: "console.log(\"clicked\")\n"

data/lib/generators/options/form.rb

@@ -0,0 +1,19 @@
+say "Inserted form example into component"
+insert_into_file "#{PACKS_PATH}/#{name}.js" ,
+"import FormFor from 'vue-form-for'\n",
+after: "import Vue from 'vue'\n"
+
+insert_into_file "#{PACKS_PATH}/#{name}.js",
+"Vue.use(FormFor)\n",
+before: "document.addEventListener"
+
+form = <<-eos
+    <form-for model="#{name}">
+      <text-field/>
+      <submit-tag/>
+    </form-for>
+eos
+
+insert_into_file "#{PARTS_PATH}/#{name}.vue",
+form,
+after: "<p>{{ message }}</p>\n"

data/lib/generators/options/list.rb

@@ -0,0 +1,32 @@
+list = <<-eos
+    <button @click="add()">add</button>
+    <button @click="remove()">remove</button>
+    <ul>
+      <li v-for="(item, index) in items" :key="index">
+        {{item}}
+      </li>
+    </ul>
+eos
+
+array = <<-eos
+      items: [],
+eos
+
+addandremove = <<-eos
+    remove: function(){
+      this.items.pop()
+    },
+    add: function(){
+      this.items.push(this.message)
+    },
+eos
+
+say "Inserted list example into component"
+insert_into_file "#{PARTS_PATH}/#{name}.vue",
+list, after: "<p>{{ message }}</p>\n"
+
+insert_into_file "#{PARTS_PATH}/#{name}.vue",
+addandremove, after: "methods: {\n"
+
+insert_into_file "#{PARTS_PATH}/#{name}.vue",
+array, after: "return {\n"

data/lib/generators/options/modal.rb

@@ -0,0 +1,26 @@
+run "yarn add vue-js-modal"
+
+say "Inserted vue-js-modal example into component"
+insert_into_file "#{PACKS_PATH}/#{name}.js" ,
+"import VModal from 'vue-js-modal'\n",
+after: "import Vue from 'vue'\n"
+
+insert_into_file "#{PACKS_PATH}/#{name}.js",
+"Vue.use(VModal)\n",
+before: "document.addEventListener"
+
+modal = <<-eos
+    <button @click="onClick">click this</button>
+    <modal name="hello-world">
+      <div style="padding: 30px;">
+        {{ message }}
+      </div>
+      <v-dialog/>
+    </modal>
+eos
+
+insert_into_file "#{PARTS_PATH}/#{name}.vue",
+modal, after: "<p>{{ message }}</p>\n"
+
+insert_into_file "#{PARTS_PATH}/#{name}.vue",
+"      this.$modal.show('hello-world');\n", after: "console.log(\"clicked\")\n"

data/lib/generators/options/seperate.rb

@@ -0,0 +1,5 @@
+say "Generated a vue component with seperation of concern"
+template "packs/pack.js.erb", "#{PACKS_PATH}/#{name}.js"      
+template "packs/index.vue", "#{PARTS_PATH}/#{name}/#{name}.vue"    
+template "packs/index.js", "#{PARTS_PATH}/#{name}/#{name}.js"
+copy_file "packs/index.css", "#{PARTS_PATH}/#{name}/#{name}.css"

data/lib/generators/options/single.rb

@@ -0,0 +1,3 @@
+say "Generated a single file component"
+template "packs/pack.js.erb", "#{PACKS_PATH}/#{name}.js" 
+template "sfc/single-file-component.vue", "#{PARTS_PATH}/#{name}.vue"    

data/lib/generators/options/table.rb

@@ -0,0 +1,10 @@
+run "yarn add vuetable-2"
+
+say "Inserted table example into component"
+insert_into_file "#{PACKS_PATH}/#{name}.js" ,
+"import Vuetable from 'vuetable-2/src/components/Vuetable'\n",
+after: "import Vue from 'vue'\n"
+
+insert_into_file "#{PACKS_PATH}/#{name}.js",
+"Vue.use(Vuetable)\n",
+before: "document.addEventListener"

data/lib/generators/options/test.rb

@@ -0,0 +1,2 @@
+    say "Included Jest test"
+    template "tests/unit.test.js.erb", "#{TESTS_PATH}/#{name}.test.js"      

data/lib/generators/options/turbolinks-seperate.rb

@@ -0,0 +1,5 @@
+say "Adding turbolinks to a single file component"
+template "turbolinks/turbolinks-pack.js.erb", "#{PACKS_PATH}/#{name}.js"      
+template "packs/index.vue", "#{PARTS_PATH}/#{name}/#{name}.vue"    
+template "packs/index.js", "#{PARTS_PATH}/#{name}/#{name}.js"
+copy_file "packs/index.css", "#{PARTS_PATH}/#{name}/#{name}.css"

data/lib/generators/options/turbolinks-single.rb

@@ -0,0 +1,3 @@
+say "Added turbolinks to a single file component"
+template "turbolinks/turbolinks-pack.js.erb", "#{PACKS_PATH}/#{name}.js"      
+template "sfc/single-file-component.vue", "#{PARTS_PATH}/#{name}.vue"    

data/lib/generators/options/vuex.rb

@@ -0,0 +1,10 @@
+run "yarn add vuex"
+
+say "Added Vuex"
+insert_into_file "#{PACKS_PATH}/#{name}.js" ,
+"import Vuex from 'vuex'\n",
+after: "import Vue from 'vue'\n"
+
+insert_into_file "#{PACKS_PATH}/#{name}.js",
+"Vue.use(Vuex)\n",
+before: "document.addEventListener"

data/lib/generators/vue/USAGE

@@ -0,0 +1,17 @@
+Description:
+    This generator scaffold a javascript pack and vue component that may be embedded into your Rails view.
+
+Example:
+    rails generate vue <component>
+
+    This will create:
+        app/javascript/parts/component.vue
+        app/javascript/packs/component.js
+
+    rails g vue <component> --seperate
+    
+    This will create:
+        app/javascript/parts/component/component.vue
+        app/javascript/parts/component/component.css
+        app/javascript/parts/component/component.js
+        app/javascript/packs/component.js