WIP Add vuejs to rails

.browserslistrc

@@ -0,0 +1 @@
+defaults

.gitignore

@@ -89,3 +89,10 @@ yarn-debug.log*
 /storage/*
 !/storage/.keep
 
+
+/public/packs
+/public/packs-test
+/node_modules
+/yarn-error.log
+yarn-debug.log*
+.yarn-integrity

Gemfile

@@ -1,7 +1,7 @@
 source 'https://rubygems.org'
 git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 
-ruby '2.6.3'
+ruby '2.7.0'
 
 # Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
 gem 'rails', '~> 6.0.2', '>= 6.0.2.1'
@@ -25,6 +25,9 @@ gem 'jbuilder', '~> 2.7'
 # Use Active Storage variant
 # gem 'image_processing', '~> 1.2'
 
+# get all the niceties of @vue/cli
+gem 'vue_cli-rails', '~> 0.3.1'
+
 # Reduces boot times through caching; required in config/boot.rb
 gem 'bootsnap', '>= 1.4.2', require: false
 

Gemfile.lock

@@ -62,8 +62,8 @@ GEM
     bootsnap (1.4.5)
       msgpack (~> 1.0)
     builder (3.2.4)
-    byebug (11.0.1)
-    capybara (3.30.0)
+    byebug (11.1.1)
+    capybara (3.31.0)
       addressable
       mini_mime (>= 0.1.3)
       nokogiri (~> 1.8)
@@ -73,12 +73,12 @@ GEM
       xpath (~> 3.2)
     childprocess (3.0.0)
     concurrent-ruby (1.1.5)
-    crass (1.0.5)
+    crass (1.0.6)
     erubi (1.9.0)
-    ffi (1.11.3)
+    ffi (1.12.1)
     globalid (0.4.2)
       activesupport (>= 4.2.0)
-    i18n (1.7.0)
+    i18n (1.8.2)
       concurrent-ruby (~> 1.0)
     jbuilder (2.9.1)
       activesupport (>= 4.2.0)
@@ -97,15 +97,15 @@ GEM
     mimemagic (0.3.3)
     mini_mime (1.0.2)
     mini_portile2 (2.4.0)
-    minitest (5.13.0)
+    minitest (5.14.0)
     msgpack (1.3.1)
     nio4r (2.5.2)
     nokogiri (1.10.7)
       mini_portile2 (~> 2.4.0)
-    public_suffix (4.0.2)
+    public_suffix (4.0.3)
     puma (4.3.1)
       nio4r (~> 2.0)
-    rack (2.0.8)
+    rack (2.1.1)
     rack-proxy (0.6.5)
       rack
     rack-test (1.1.0)
@@ -142,7 +142,7 @@ GEM
       ffi (~> 1.0)
     regexp_parser (1.6.0)
     ruby_dep (1.5.0)
-    rubyzip (2.0.0)
+    rubyzip (2.1.0)
     sass-rails (6.0.0)
       sassc-rails (~> 2.1, >= 2.1.1)
     sassc (2.2.1)
@@ -176,6 +176,10 @@ GEM
     turbolinks-source (5.2.0)
     tzinfo (1.2.6)
       thread_safe (~> 0.1)
+    vue_cli-rails (0.3.1)
+      activesupport (>= 4.2)
+      rack-proxy (>= 0.6)
+      railties (>= 4.2)
     web-console (4.0.1)
       actionview (>= 6.0.0)
       activemodel (>= 6.0.0)
@@ -214,12 +218,13 @@ DEPENDENCIES
   sqlite3 (~> 1.4)
   turbolinks (~> 5)
   tzinfo-data
+  vue_cli-rails (~> 0.3.1)
   web-console (>= 3.3.0)
   webdrivers
   webpacker (~> 4.0)
 
 RUBY VERSION
-   ruby 2.6.3p62
+   ruby 2.7.0p0
 
 BUNDLED WITH
-   1.17.2
+   2.1.2

app/assets/vue/components/HelloWorld.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="hello">
+    <h2>Hello {{ msg }}</h2>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String,
+  },
+};
+</script>
+
+<style scoped>
+h2 {
+  color: blue;
+}
+</style>

app/assets/vue/components/layouts/App.vue

@@ -0,0 +1,21 @@
+<template>
+  <div id="app">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App',
+};
+</script>
+
+<style>
+#app {
+  box-sizing: border-box;
+}
+
+#app * {
+  box-sizing: border-box;
+}
+</style>

app/assets/vue/components/layouts/index.js

@@ -0,0 +1,9 @@
+import Vue from 'vue';
+
+import App from './App.vue';
+
+Vue.config.productionTip = false;
+
+export default Component => new Vue({
+  render: h => h(App, { scopedSlots: { default: () => h(Component) } }),
+}).$mount('#app');

app/assets/vue/entry_points/bar.js

@@ -0,0 +1,9 @@
+import Vue from 'vue';
+
+import Bar from '../views/Bar.vue';
+
+Vue.config.productionTip = false;
+
+new Vue({
+  render: h => h(Bar),
+}).$mount('#app');

app/assets/vue/entry_points/foo.js

@@ -0,0 +1,4 @@
+import launch from '../components/layouts';
+import Foo from '../views/Foo.vue';
+
+launch(Foo);

app/assets/vue/views/Bar.vue

@@ -0,0 +1,17 @@
+<template>
+  <div id="bar">
+    <h1>Bar</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Bar',
+};
+</script>
+
+<style>
+#bar {
+  color: blue;
+}
+</style>

app/assets/vue/views/Foo.vue

@@ -0,0 +1,21 @@
+<template>
+  <div id="app">
+    <h1>Foo</h1>
+    <HelloWorld msg="Vue!"></HelloWorld>
+  </div>
+</template>
+
+<script>
+import HelloWorld from '../components/HelloWorld.vue';
+
+export default {
+  name: 'Foo',
+  components: { HelloWorld },
+};
+</script>
+
+<style scoped>
+h1 {
+  color: red;
+}
+</style>

app/controllers/vue_demo_controller.rb

@@ -0,0 +1,11 @@
+class VueDemoController < ApplicationController
+  layout 'vue_demo'
+
+  def bar
+    render_vue 'bar'
+  end
+
+  def baz
+    render html: vue_entry('foo')
+  end
+end

app/javascript/app.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <p>{{ message }}</p>
+    <button v-on:click="addOne">Add One</button>
+    {{counter}}
+    <app-hello></app-hello>
+
+  </div>
+</template>
+
+<script>
+import hello_component from './components/hello_component.vue'
+// import avatartanda from './components/avatartanda.vue'
+export default {
+
+  data() {
+    return {
+      message: "Hello Vue!",
+      counter: 0
+    }
+  },
+  components:{
+    'app-hello': hello_component,
+    // 'app-a-t': avatartanda,
+  },
+  methods:{
+    addOne: function(){ 
+          alert(this.message)
+          this.counter += 1;
+
+    }
+  }
+}
+</script>
+
+<style scoped>
+p {
+  font-size: 2em;
+  text-align: center;
+}
+</style>

app/javascript/components/hello_component.vue

@@ -0,0 +1,18 @@
+<template>
+    <div>
+        <h1>I am {{title}} component</h1>        
+        <v-btn color="success">Success</v-btn>
+        <v-btn color="error">Error</v-btn>
+        <v-btn color="warning">Warning</v-btn>
+        <v-btn color="info">Info</v-btn>        
+    </div>
+</template>
+<script>
+export default {
+    data(){
+        return{
+             title: 'hello',
+        } 
+    }
+}
+</script>

app/javascript/packs/hello_vue.js

@@ -0,0 +1,90 @@
+/* eslint no-console: 0 */
+// Run this example by adding <%= javascript_pack_tag 'hello_vue' %> (and
+// <%= stylesheet_pack_tag 'hello_vue' %> if you have styles in your component)
+// to the head of your layout file,
+// like app/views/layouts/application.html.erb.
+// All it does is render <div>Hello Vue</div> at the bottom of the page.
+
+// import Vue from 'vue'
+// import App from '../app.vue'
+// import vuetify from './vuetify'
+
+// // export default new Vuetify({ })
+// Vue.use(vuetify)
+// document.addEventListener('DOMContentLoaded', () => {
+//   // NOTE:   { vuetify } === { vuetify: vuetify }
+//   const app = new Vue({
+//     el: '#app',
+//     vuetify: new Vuetify(),
+//     render: h => h(App)
+//   }).$mount()
+//   document.body.appendChild(app.$el)
+
+//   console.log(app)
+// })
+
+// src/main.js
+
+import Vue from 'vue'
+// import vuetify from '@/plugins/vuetify' // path to vuetify export
+import App from '../app.vue'
+
+const app = new Vue({
+   el: '#app',
+  //  vuetify: new Vuetify(),
+    render: h => h(App)
+  }).$mount()
+  // document.body.appendChild(app.$el)
+
+// The above code uses Vue without the compiler, which means you cannot
+// use Vue to target elements in your existing html templates. You would
+// need to always use single file components.
+// To be able to target elements in your existing html/erb templates,
+// comment out the above code and uncomment the below
+// Add <%= javascript_pack_tag 'hello_vue' %> to your layout
+// Then add this markup to your html template:
+//
+// <div id='hello'>
+//   {{message}}
+//   <app></app>
+// </div>
+
+
+// import Vue from 'vue/dist/vue.esm'
+// import App from '../app.vue'
+//
+// document.addEventListener('DOMContentLoaded', () => {
+//   const app = new Vue({
+//     el: '#hello',
+//     data: {
+//       message: "Can you say hello?"
+//     },
+//     components: { App }
+//   })
+// })
+//
+//
+//
+// If the project is using turbolinks, install 'vue-turbolinks':
+//
+// yarn add vue-turbolinks
+//
+// Then uncomment the code block below:
+//
+// import TurbolinksAdapter from 'vue-turbolinks'
+// import Vue from 'vue/dist/vue.esm'
+// import App from '../app.vue'
+//
+// Vue.use(TurbolinksAdapter)
+//
+// document.addEventListener('turbolinks:load', () => {
+//   const app = new Vue({
+//     el: '#hello',
+//     data: () => {
+//       return {
+//         message: "Can you say hello?"
+//       }
+//     },
+//     components: { App }
+//   })
+// })

app/javascript/packs/vuetify.js

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import Vuetify from 'vuetify/lib'
+
+Vue.use(Vuetify)
+
+const opts = {}
+
+export default new Vuetify(opts)