Fix encore dev server command

* Use encore utilities to load correct js and css assets
* Disable vuetify due to errors in webpack console
* Disable translateHtml in document.js and vendor.js because they use
  pinia and when these scripts are loaded is not available yet.
  hey should be called on a vue router hook after vue app is loaded

.editorconfig

@@ -13,3 +13,6 @@ indent_style = space
 indent_size = 4
 max_line_length = 120
 ij_php_space_after_type_cast = true
+
+[*.vue]
+indent_size = 2

README.md

@@ -133,6 +133,12 @@ Load the (your-domain)/main/install/index.php URL to start the installer (which
 If the installer is pure-HTML and doesn't appear with a clean layout, that's because you didn't follow these instructions carefully.
 Go back to the beginning of this section and try again.
 
+If you want hot reloading for assets use the command `yarn run encore dev-server`. This will refresh automatically
+your assets when you modify then under `assets/vue`. Access your chamilo instance as usual (this will server asset
+files from a custom server on http://localhost:8080. Do not access this url directly since
+[Encore](https://symfony.com/doc/current/frontend.html#webpack-encore) is in charge of change url assets as needed
+on chamilo).
+
 ### Supporting PHP 7.4 and 8.1 in parallel
 
 You might want to support PHP 8.1 (for Chamilo 2) and PHP 7.4 (for all other things) on the same server simultaneously. On Ubuntu, you could do it this way:

assets/js/document.js

@@ -2,5 +2,5 @@
 
 import translateHtml from './translatehtml.js';
 document.addEventListener('DOMContentLoaded', function () {
-  translateHtml();
+  // translateHtml();
 });

assets/js/vendor.js

@@ -24,5 +24,5 @@ require('./annotation.js');
 require('./editor.js');
 import translateHtml from './translatehtml.js';
 document.addEventListener('DOMContentLoaded', function () {
-  translateHtml();
+  // translateHtml();
 });

src/CoreBundle/Resources/views/Index/vue.html.twig

@@ -2,6 +2,5 @@
 
 {%- block content %}
     {% include '@ChamiloCore/Layout/vue_setup.html.twig' %}
-    {#    {{ encore_entry_script_tags('vue') }}#}
-    <script src="{{ url('index') ~ 'build/vue.js' }}"></script>
+    {{ encore_entry_script_tags('vue') }}
 {% endblock %}

src/CoreBundle/Resources/views/Layout/head.html.twig

@@ -28,19 +28,18 @@
         {% if theme is defined %}
             {#    <link rel="stylesheet" href="{{ url('index') ~ 'build/css/themes/'~ theme ~'/default.css' }}"/> #}
         {% endif %}
-        {#    {{ encore_entry_link_tags('vue') }} #}
-        <link rel="stylesheet" href="{{ url('index') ~ 'build/vue.css' }}" />
-        <link rel="stylesheet" href="{{ url('index') ~ 'build/css/app.css' }}" />
+            {{ encore_entry_link_tags('vue') }}
+            {{ encore_entry_link_tags('css/app') }}
+{#        <link rel="stylesheet" href="{{ url('index') ~ 'build/vue.css' }}" />#}
+{#        <link rel="stylesheet" href="{{ url('index') ~ 'build/css/app.css' }}" />#}
         {# <link rel="stylesheet" href="{{ url('index') ~ 'build/css/print.css' }}" media="print" /> #}
     {% endblock %}
     {# app.js is generated using the file webpack.config.js and using yarn read /assets/README.md for more info #}
     {# <script src="{{ url('index') ~ 'build/libs/ckeditor/ckeditor.js' }}"></script> #}
-    <script src="{{ url('index') ~ 'build/runtime.js' }}"></script>
-    <script src="{{ url('index') ~ 'build/app.js' }}"></script>
-    {# {{ encore_entry_script_tags('app') }} #}
+    {{ encore_entry_script_tags('app') }}
     {# Add third party js libraries that can't be loaded using webpack #}
     {# <script src="{{ asset('libs/readmore-js/readmore.js') }}"></script> #}
-    <script src="{{ url('index') ~ 'build/libs/js-cookie/src/js.cookie.js' }}"></script>
+    {# <script src="{{ url('index') ~ 'build/libs/js-cookie/src/js.cookie.js' }}"></script> #}
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     {# Check chamilo_js key in assetic.yml #}
     {% block javascripts %}

webpack.config.js

@@ -155,7 +155,7 @@ Encore
 ;
 
 //Encore.addPlugin(new VueLoaderPlugin);
-Encore.addPlugin(new VuetifyLoaderPlugin());
+// Encore.addPlugin(new VuetifyLoaderPlugin());
 Encore.addPlugin(new CopyPlugin({
         patterns: [
             {