ISSUE-345: vue.js fix

Author: tatevikg1

assets/app.js

@@ -1,15 +1,9 @@
 import { createApp } from 'vue';
 import App from './vue/App.vue';
-import MyWidget from './vue/MyWidget.vue';
 
 // 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/App.vue

@@ -1,11 +1,26 @@
 <template>
   <div>
-    <h1>Hello from Vue!</h1>
+    <h2>Hello from Vue</h2>
+    <p>{{ message }}</p>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'App'
+  name: 'App',
+  data() {
+    return {
+      message: 'This is a reusable component!'
+    }
+  },
+  created() {
+    console.log('App component created');
+  },
+  mounted() {
+    console.log('App component mounted');
+  },
+  updated() {
+    console.log('App component updated');
+  }
 }
 </script>

assets/vue/MyWidget.vue

@@ -12,7 +12,7 @@
     "webpack-notifier": "^1.15.0"
   },
   "dependencies": {
-    "vue": "3"
+    "vue": "^3.5.16"
   },
   "scripts": {
     "prepare": "husky install"

package.json

@@ -19,6 +19,7 @@
 {# Optionally include Bootstrap JS if you use interactive components #}
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
-{{ encore_entry_script_tags('app') }}
+<script src="{{ asset('build/runtime.js') }}"></script>
+<script src="{{ asset('build/app.js') }}"></script>
 </body>
 </html>

templates/base.html.twig

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

templates/security/login.html.twig

@@ -3,12 +3,8 @@ const Encore = require('@symfony/webpack-encore');
 Encore
     .setOutputPath('public/build/')
     .setPublicPath('/build')
-    .enableVueLoader()
     .addEntry('app', './assets/app.js')
-    .cleanupOutputBeforeBuild()
-    .enableBuildNotifications()
-    .enableSourceMaps(!Encore.isProduction())
-    .enableVersioning(Encore.isProduction())
+    .enableVueLoader()
     .enableSingleRuntimeChunk()
 ;
 

webpack.config.js

@@ -2835,7 +2835,7 @@ vue-template-compiler@^2.7.14:
     de-indent "^1.0.2"
     he "^1.2.0"
 
-vue@3:
+vue@^3.5.16:
   version "3.5.16"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.5.16.tgz#f0cde88c2688354f00ff2d77eb295c26440f8c7a"
   integrity sha512-rjOV2ecxMd5SiAmof2xzh2WxntRcigkX/He4YFJ6WdRvVUrbt6DxC1Iujh10XLl8xCDRDtGKMeO3D+pRQ1PP9w==