add VueJS in Chamilo

Author: aragonc

assets/js/VueConfig.js

@@ -0,0 +1,3 @@
+export const VueConfig = {
+    delimiters: ['[[', ']]']
+};

assets/js/app.js

@@ -17,11 +17,6 @@ const legacyIndex = Routing.generate('legacy_index');
 const mainUrl = Routing.generate('web.main');
 const webAjax = Routing.generate('web.ajax');
 
-/*console.log(homePublicUrl);
-console.log(legacyIndex);
-console.log(mainUrl);
-console.log(webAjax);*/
-
 var ajax_url = webAjax + 'chat.ajax.php';
 var online_button = '<img src="' + homePublicUrl + 'img/statusonline.png">';
 var offline_button = '<img src="' + homePublicUrl + 'img/statusoffline.png">';
@@ -31,7 +26,36 @@ var disconnect_lang = '{{ "ChatDisconnected"|get_lang }}';*/
 var connect_lang = 'ChatConnected';
 var disconnect_lang = 'ChatDisconnected';
 
+// Import Vue and Components
+import Vue from 'vue';
+import {VueConfig} from './VueConfig';
+import Example from './components/Example'
+
+
 $(function() {
+    // Create App Aplication Vue
+    new Vue(
+        Object.assign(VueConfig, {
+            el: '#app_header',
+            components: {Example},
+            data() {
+                return {
+                    chamilo: ''
+                }
+            },
+            methods: {
+                getConsole() {
+                    console.log("Hello Vuejs");
+                }
+            }, created() {
+                this.chamilo = "Hello Chamilo";
+                this.getConsole();
+                console.log(this.chamilo);
+            }
+        })
+    );
+
+
     var webCidReq = '&cidReq=' + $('body').attr('data-course-code');
     window.webCidReq = webCidReq;
 

assets/js/components/Example.vue

@@ -0,0 +1,12 @@
+<template>
+   <div>
+       <p>This is an example of a new components in VueJs</p>
+   </div>
+</template>
+<script>
+   export default {
+       name: "example"
+   }
+</script>
+<style scoped>
+</style>

src/ThemeBundle/Resources/views/Layout/header.html.twig

@@ -66,7 +66,7 @@ $(function () {
     });
 });
 </script>
-<header class="app-header navbar">
+<header id="app_header" class="app-header navbar">
     <button class="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
         <span class="navbar-toggler-icon"></span>
     </button>
@@ -85,6 +85,9 @@ $(function () {
                 {{ "Course catalog"|trans }}
             </a>
         </li>
+        <li>
+            [[ chamilo ]]
+        </li>
         <form class="form-inline my-2 my-lg-0">
             <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
             <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

webpack.config.js

@@ -31,7 +31,7 @@ Encore
     // .enableVersioning(Encore.isProduction())
 
     .enableSassLoader()
-
+    .enableVueLoader()
     .autoProvidejQuery()
 ;