hello world with viewJS

app/assets/app.js

@@ -13,3 +13,7 @@ import './styles/app.scss';
 
 // start the Stimulus application
 import './bootstrap';
+
+// start VueJS application
+import './vue';
+

app/assets/components/App.vue

@@ -0,0 +1,18 @@
+<template>
+    <div class="card">
+        <div class="card-header">
+            <h4>
+                Hello {{ name }}
+            </h4>
+        </div>
+        <div class="card-body">
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: ['name']
+    }
+    console.log(app);
+</script>

app/assets/vue.js

@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import App from './components/App.vue'
+
+new Vue({
+    render(h) {
+        return h(App, {
+            props: {
+                name: this.$el.getAttribute('data-name'),
+            },
+        })
+    },
+}).$mount('#app');