vuejs hello world component

src/Bundle/ChillMainBundle/Resources/public/modules/vue/components/App.vue

@@ -0,0 +1,25 @@
+<template>
+   <div id="app">
+      <!-- la balise contacts corresponds au composant contacts passé ci-dessous -->
+      <contacts></contacts>
+   </div>
+</template>
+
+<script>
+   //  importe dans contacts les datas d'une requête rest GET en json
+   import contacts from './Contacts.vue'
+
+   export default {
+      name: 'app',
+      components: {
+        // passe l'objet contacts comme composant
+         contacts,
+      }
+   }
+</script>
+
+<style>
+   #app {}
+   .container {}
+   .componentItem{}
+</style>

src/Bundle/ChillMainBundle/Resources/public/modules/vue/components/Contacts.vue

@@ -0,0 +1,59 @@
+<template>
+    <div>
+        <table>
+            <tr v-for="contact in contacts">
+                <td>{{contact.firstname}}</td>
+                <td>{{contact.lastname}}</td>
+            </tr>
+        </table>
+        <button @click="addContact">Add</button>
+        <label>#contacts {{counter}}</label>
+    </div>
+</template>
+
+<script>
+    // la balise script dans ce fichier vue, est un peu comme une classe Contacts
+    // namespace components/Contacts
+    import Vue from 'vue'
+    import VueResource from 'vue-resource'
+
+    // injection de dépendance pour dealer du REST json
+    Vue.use(VueResource)
+
+    export default{
+        // initialise les données
+        data () {
+            return {
+                // constructeur du tableau-objet vide 'contacts' qui est passé à App.vue
+                contacts: []
+            }
+        },
+        // Rest GET json
+        http: {
+            root: 'http://localhost:3000'
+        },
+        // méthodes
+        methods: {
+            addContact(){
+                this.contacts.push({"firstname":"Lisa", "lastname":"Simpson", "age":"10"})
+            }
+        },
+        // traitements
+        computed:{
+            counter(){
+                return this.contacts.length
+            }
+        },
+        // on dirait un setter
+        mounted() {
+            this.$resource('contacts').get().then((response) => {
+                this.contacts = response.data
+            }, (response) => {
+                console.log('erreur', response);
+            })
+        }
+    }
+</script>
+
+<style>
+</style>

src/Bundle/ChillMainBundle/Resources/public/modules/vue/index.js

@@ -1 +1,7 @@
 import Vue from 'vue'
+import App from './components/App.vue'
+
+new Vue({
+       el: '#app',
+   render: h => h(App)
+})

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/show.html.twig

@@ -23,5 +23,10 @@ usagers:
 
     {{ dump() }}
 
+    <h3>TESTS AREA vuejs:</h3>
+    {% verbatim %}
+        <div id="app" data-name="{{ app.user.username }}"></div>
+    {% endverbatim %}
+    {{ encore_entry_script_tags('vuejs') }}
 
 {% endblock %}