ISSUE-345: vue.js fix

Author: tatevikg1

README.md

@@ -39,7 +39,23 @@ This project adheres to a [Contributor Code of Conduct](CODE_OF_CONDUCT.md).
 By participating in this project and its community, you are expected to uphold
 this code.
 
-## Command to running this project for local testing
-
+## Commands for running this project for local testing
+```bash
+# Start the Symfony local server
 symfony local:server:start
-yarn encore dev
+```
+
+```bash
+# Compile and watch assets (including Vue.js components)
+yarn encore dev --watch
+```
+
+## Vue.js Integration
+This project uses Vue.js for interactive UI components. Vue components are located in the `assets/vue/` directory and are mounted to specific DOM elements:
+
+- `App.vue` is mounted to the element with ID `vue-app`
+
+To add new Vue components:
+1. Create the component in the `assets/vue/` directory
+2. Import and mount it in `assets/app.js`
+3. Add a mount point in the appropriate template

assets/app.js

@@ -1,4 +1,15 @@
 import { createApp } from 'vue';
 import App from './vue/App.vue';
+import MyWidget from './vue/MyWidget.vue';
 
-createApp(App).mount('#vue-app');
+// Mount the main app if the element exists
+const appElement = document.getElementById('vue-app');
+if (appElement) {
+    createApp(App).mount('#vue-app');
+}
+
+// Mount the widget if the element exists
+const widgetElement = document.getElementById('my-widget');
+if (widgetElement) {
+    createApp(MyWidget).mount('#my-widget');
+}

assets/vue/MyWidget.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <h2>Hello from MyWidget</h2>
+    <p>{{ message }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MyWidget',
+  data() {
+    return {
+      message: 'This is a reusable component!'
+    }
+  }
+}
+</script>

config/packages/twig.yaml

@@ -2,3 +2,4 @@ twig:
     debug: '%kernel.debug%'
     strict_variables: '%kernel.debug%'
     default_path: '%kernel.application_dir%/templates'
+    auto_reload: true

templates/security/login.html.twig

@@ -25,4 +25,5 @@
             <button type="submit" class="btn btn-primary btn-block">Sign in</button>
         </form>
     </div>
+    <div id="my-widget"></div>
 {% endblock %}