hello world with viewJS

app/assets/app.js

@@ -13,3 +13,7 @@ import './styles/app.scss';
 
 // start the Stimulus application
 import './bootstrap';
+
+// start VueJS application
+import './vue';
+

app/assets/components/App.vue

@@ -0,0 +1,18 @@
+<template>
+    <div class="card">
+        <div class="card-header">
+            <h4>
+                Hello {{ name }}
+            </h4>
+        </div>
+        <div class="card-body">
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: ['name']
+    }
+    console.log(app);
+</script>

app/assets/vue.js

@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import App from './components/App.vue'
+
+new Vue({
+    render(h) {
+        return h(App, {
+            props: {
+                name: this.$el.getAttribute('data-name'),
+            },
+        })
+    },
+}).$mount('#app');

app/package-lock.json

@@ -1113,9 +1113,9 @@
             }
         },
         "@symfony/webpack-encore": {
-            "version": "1.1.0",
+            "version": "1.1.1",
-            "resolved": "https://registry.npmjs.org/@symfony/webpack-encore/-/webpack-encore-1.1.0.tgz",
+            "resolved": "https://registry.npmjs.org/@symfony/webpack-encore/-/webpack-encore-1.1.1.tgz",
-            "integrity": "sha512-5LvIt1itMTc6wvD57moXJN+FqHclJPzjZeuBWeacnSBDgh614rynhPyM9voIK6c8erbHjv+tAMTpWLIN/qzuzQ==",
+            "integrity": "sha512-8wBpS8fq8Cni2K3/s5WrLO/45+OLhizniBR7aGJdM5Va1C/N4wfg6Jv1l3volW9+NcnjFyN/a+n+1JQosdbZxw==",
             "dev": true,
             "requires": {
                 "@babel/core": "^7.7.0",
@@ -1208,9 +1208,9 @@
             "dev": true
         },
         "@types/node": {
-            "version": "14.14.28",
+            "version": "14.14.30",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.28.tgz",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.30.tgz",
-            "integrity": "sha512-lg55ArB+ZiHHbBBttLpzD07akz0QPrZgUODNakeC09i62dnrywr9mFErHuaPlB6I7z+sEbK+IYmplahvplCj2g==",
+            "integrity": "sha512-gUWhy8s45fQp4PqqKecsnOkdW0kt1IaKjgOIR3HPokkzTmQj9ji2wWFID5THu1MKrtO+d4s2lVrlEhXUsPXSvg==",
             "dev": true
         },
         "@types/q": {
@@ -1295,6 +1295,81 @@
                 }
             }
         },
+        "@vue/component-compiler-utils": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.2.0.tgz",
+            "integrity": "sha512-lejBLa7xAMsfiZfNp7Kv51zOzifnb29FwdnMLa96z26kXErPFioSf9BMcePVIQ6/Gc6/mC0UrPpxAWIHyae0vw==",
+            "requires": {
+                "consolidate": "^0.15.1",
+                "hash-sum": "^1.0.2",
+                "lru-cache": "^4.1.2",
+                "merge-source-map": "^1.1.0",
+                "postcss": "^7.0.14",
+                "postcss-selector-parser": "^6.0.2",
+                "prettier": "^1.18.2",
+                "source-map": "~0.6.1",
+                "vue-template-es2015-compiler": "^1.9.0"
+            },
+            "dependencies": {
+                "chalk": {
+                    "version": "2.4.2",
+                    "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+                    "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+                    "requires": {
+                        "ansi-styles": "^3.2.1",
+                        "escape-string-regexp": "^1.0.5",
+                        "supports-color": "^5.3.0"
+                    },
+                    "dependencies": {
+                        "supports-color": {
+                            "version": "5.5.0",
+                            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+                            "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+                            "requires": {
+                                "has-flag": "^3.0.0"
+                            }
+                        }
+                    }
+                },
+                "lru-cache": {
+                    "version": "4.1.5",
+                    "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
+                    "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
+                    "requires": {
+                        "pseudomap": "^1.0.2",
+                        "yallist": "^2.1.2"
+                    }
+                },
+                "postcss": {
+                    "version": "7.0.35",
+                    "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+                    "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+                    "requires": {
+                        "chalk": "^2.4.2",
+                        "source-map": "^0.6.1",
+                        "supports-color": "^6.1.0"
+                    }
+                },
+                "source-map": {
+                    "version": "0.6.1",
+                    "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+                    "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+                },
+                "supports-color": {
+                    "version": "6.1.0",
+                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+                    "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+                    "requires": {
+                        "has-flag": "^3.0.0"
+                    }
+                },
+                "yallist": {
+                    "version": "2.1.2",
+                    "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+                    "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
+                }
+            }
+        },
         "@webassemblyjs/ast": {
             "version": "1.11.0",
             "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.0.tgz",
@@ -1556,7 +1631,6 @@
             "version": "3.2.1",
             "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
             "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-            "dev": true,
             "requires": {
                 "color-convert": "^1.9.0"
             }
@@ -1714,8 +1788,7 @@
         "big.js": {
             "version": "5.2.2",
             "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
-            "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+            "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ=="
-            "dev": true
         },
         "binary-extensions": {
             "version": "2.2.0",
@@ -1723,6 +1796,11 @@
             "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
             "dev": true
         },
+        "bluebird": {
+            "version": "3.7.2",
+            "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
+            "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
+        },
         "body-parser": {
             "version": "1.19.0",
             "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
@@ -1932,9 +2010,9 @@
             }
         },
         "caniuse-lite": {
-            "version": "1.0.30001187",
+            "version": "1.0.30001189",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001187.tgz",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001189.tgz",
-            "integrity": "sha512-w7/EP1JRZ9552CyrThUnay2RkZ1DXxKe/Q2swTC4+LElLh9RRYrL1Z+27LlakB8kzY0fSmHw9mc7XYDUKAKWMA==",
+            "integrity": "sha512-BSfxClP/UWCD0RX1h1L+vLDexNSJY7SfOtbJtW10bcnatfj3BcoietUFYNwWreOCk+SNvGUaNapGqUNPiGAiSA==",
             "dev": true
         },
         "chalk": {
@@ -2084,7 +2162,6 @@
             "version": "1.9.3",
             "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
             "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-            "dev": true,
             "requires": {
                 "color-name": "1.1.3"
             }
@@ -2092,8 +2169,7 @@
         "color-name": {
             "version": "1.1.3",
             "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-            "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+            "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
-            "dev": true
         },
         "color-string": {
             "version": "1.5.4",
@@ -2185,6 +2261,14 @@
             "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==",
             "dev": true
         },
+        "consolidate": {
+            "version": "0.15.1",
+            "resolved": "https://registry.npmjs.org/consolidate/-/consolidate-0.15.1.tgz",
+            "integrity": "sha512-DW46nrsMJgy9kqAbPt5rKaCr7uFtpo4mSUvLHIUbJEjm0vo+aY5QLwBUq3FK4tRnJr/X0Psc0C4jf/h+HtXSMw==",
+            "requires": {
+                "bluebird": "^3.1.1"
+            }
+        },
         "content-disposition": {
             "version": "0.5.3",
             "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
@@ -2483,8 +2567,7 @@
         "cssesc": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-            "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+            "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
-            "dev": true
         },
         "cssnano": {
             "version": "4.1.10",
@@ -2756,6 +2839,11 @@
                 "type": "^1.0.1"
             }
         },
+        "de-indent": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
+            "integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0="
+        },
         "debug": {
             "version": "4.3.1",
             "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
@@ -2938,16 +3026,15 @@
             "dev": true
         },
         "electron-to-chromium": {
-            "version": "1.3.668",
+            "version": "1.3.669",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.668.tgz",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.669.tgz",
-            "integrity": "sha512-TJzc4pxcplsWWS2hP01qQtwMIS+/3VLm4tkhsXbFwx3IIroXyidalrwcaJH+cNcrAdzSJ5xv0oeyGMS7d0i3kg==",
+            "integrity": "sha512-VNj10fmGC6SbE7s4tKG7y2OopVXYoTIfjE1MetflPd77KmeRuHtkl+HYsfF00BGg5hyaorTUn6lTToEHaciOSw==",
             "dev": true
         },
         "emojis-list": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
-            "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+            "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q=="
-            "dev": true
         },
         "encodeurl": {
             "version": "1.0.2",
@@ -3090,8 +3177,7 @@
         "escape-string-regexp": {
             "version": "1.0.5",
             "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-            "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+            "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
-            "dev": true
         },
         "eslint-scope": {
             "version": "5.1.1",
@@ -3573,8 +3659,7 @@
         "has-flag": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-            "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+            "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
-            "dev": true
         },
         "has-symbols": {
             "version": "1.0.1",
@@ -3582,6 +3667,16 @@
             "integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==",
             "dev": true
         },
+        "hash-sum": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
+            "integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ="
+        },
+        "he": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+            "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
+        },
         "hex-color-regex": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
@@ -3791,8 +3886,7 @@
         "indexes-of": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
-            "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
+            "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc="
-            "dev": true
         },
         "infer-owner": {
             "version": "1.0.4",
@@ -4315,6 +4409,21 @@
             "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=",
             "dev": true
         },
+        "merge-source-map": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/merge-source-map/-/merge-source-map-1.1.0.tgz",
+            "integrity": "sha512-Qkcp7P2ygktpMPh2mCQZaf3jhN6D3Z/qVZHSdWvQ+2Ef5HgRAPBO57A77+ENm0CPx2+1Ce/MYKi3ymqdfuqibw==",
+            "requires": {
+                "source-map": "^0.6.1"
+            },
+            "dependencies": {
+                "source-map": {
+                    "version": "0.6.1",
+                    "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+                    "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+                }
+            }
+        },
         "merge-stream": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -4412,8 +4521,7 @@
         "minimist": {
             "version": "1.2.5",
             "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-            "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+            "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
-            "dev": true
         },
         "minipass": {
             "version": "3.1.3",
@@ -6642,7 +6750,6 @@
             "version": "6.0.4",
             "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz",
             "integrity": "sha512-gjMeXBempyInaBqpp8gODmwZ52WaYsVOsfr4L4lDQ7n3ncD6mEyySiDtgzCT+NYC0mmeOLvtsF8iaEf0YT6dBw==",
-            "dev": true,
             "requires": {
                 "cssesc": "^3.0.0",
                 "indexes-of": "^1.0.1",
@@ -6785,6 +6892,12 @@
             "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
             "dev": true
         },
+        "prettier": {
+            "version": "1.19.1",
+            "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
+            "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==",
+            "optional": true
+        },
         "pretty-error": {
             "version": "3.0.3",
             "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-3.0.3.tgz",
@@ -6817,6 +6930,11 @@
                 "ipaddr.js": "1.9.1"
             }
         },
+        "pseudomap": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
+            "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM="
+        },
         "punycode": {
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
@@ -7254,9 +7372,9 @@
             "dev": true
         },
         "sass": {
-            "version": "1.32.7",
+            "version": "1.32.8",
-            "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.7.tgz",
+            "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.8.tgz",
-            "integrity": "sha512-C8Z4bjqGWnsYa11o8hpKAuoyFdRhrSHcYjCr+XAWVPSIQqC8mp2f5Dx4em0dKYehPzg5XSekmCjqJnEZbIls9A==",
+            "integrity": "sha512-Sl6mIeGpzjIUZqvKnKETfMf0iDAswD9TNlv13A7aAF3XZlRPMq4VvJWBC2N2DXbp94MQVdNSFG6LfF/iOXrPHQ==",
             "dev": true,
             "requires": {
                 "chokidar": ">=2.0.0 <4.0.0"
@@ -8071,8 +8189,7 @@
         "uniq": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
-            "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=",
+            "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8="
-            "dev": true
         },
         "uniqs": {
             "version": "2.0.0",
@@ -8170,8 +8287,7 @@
         "util-deprecate": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-            "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
+            "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
-            "dev": true
         },
         "util.promisify": {
             "version": "1.0.1",
@@ -8242,6 +8358,91 @@
             "integrity": "sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==",
             "dev": true
         },
+        "vue": {
+            "version": "2.6.12",
+            "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
+            "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
+        },
+        "vue-hot-reload-api": {
+            "version": "2.3.4",
+            "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
+            "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog=="
+        },
+        "vue-loader": {
+            "version": "15.9.6",
+            "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.6.tgz",
+            "integrity": "sha512-j0cqiLzwbeImIC6nVIby2o/ABAWhlppyL/m5oJ67R5MloP0hj/DtFgb0Zmq3J9CG7AJ+AXIvHVnJAPBvrLyuDg==",
+            "requires": {
+                "@vue/component-compiler-utils": "^3.1.0",
+                "hash-sum": "^1.0.2",
+                "loader-utils": "^1.1.0",
+                "vue-hot-reload-api": "^2.3.0",
+                "vue-style-loader": "^4.1.0"
+            },
+            "dependencies": {
+                "json5": {
+                    "version": "1.0.1",
+                    "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+                    "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+                    "requires": {
+                        "minimist": "^1.2.0"
+                    }
+                },
+                "loader-utils": {
+                    "version": "1.4.0",
+                    "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
+                    "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+                    "requires": {
+                        "big.js": "^5.2.2",
+                        "emojis-list": "^3.0.0",
+                        "json5": "^1.0.1"
+                    }
+                }
+            }
+        },
+        "vue-style-loader": {
+            "version": "4.1.2",
+            "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
+            "integrity": "sha512-0ip8ge6Gzz/Bk0iHovU9XAUQaFt/G2B61bnWa2tCcqqdgfHs1lF9xXorFbE55Gmy92okFT+8bfmySuUOu13vxQ==",
+            "requires": {
+                "hash-sum": "^1.0.2",
+                "loader-utils": "^1.0.2"
+            },
+            "dependencies": {
+                "json5": {
+                    "version": "1.0.1",
+                    "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+                    "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+                    "requires": {
+                        "minimist": "^1.2.0"
+                    }
+                },
+                "loader-utils": {
+                    "version": "1.4.0",
+                    "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
+                    "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+                    "requires": {
+                        "big.js": "^5.2.2",
+                        "emojis-list": "^3.0.0",
+                        "json5": "^1.0.1"
+                    }
+                }
+            }
+        },
+        "vue-template-compiler": {
+            "version": "2.6.12",
+            "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.12.tgz",
+            "integrity": "sha512-OzzZ52zS41YUbkCBfdXShQTe69j1gQDZ9HIX8miuC9C3rBCk9wIRjLiZZLrmX9V+Ftq/YEyv1JaVr5Y/hNtByg==",
+            "requires": {
+                "de-indent": "^1.0.2",
+                "he": "^1.1.0"
+            }
+        },
+        "vue-template-es2015-compiler": {
+            "version": "1.9.1",
+            "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
+            "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw=="
+        },
         "watchpack": {
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.1.1.tgz",

app/package.json

@@ -1,10 +1,10 @@
 {
     "devDependencies": {
         "@symfony/stimulus-bridge": "^2.0.0",
-        "@symfony/webpack-encore": "^1.0.0",
+        "@symfony/webpack-encore": "^1.1.1",
         "core-js": "^3.0.0",
         "regenerator-runtime": "^0.13.2",
-        "sass": "^1.32.7",
+        "sass": "^1.32.8",
         "sass-loader": "^11.0.1",
         "stimulus": "^2.0.0",
         "webpack-notifier": "^1.6.0"
@@ -18,6 +18,9 @@
         "build": "encore production --progress"
     },
     "dependencies": {
+        "vue": "^2.6.12",
+        "vue-loader": "^15.9.6",
+        "vue-template-compiler": "^2.6.12",
         "yarn": "^1.22.10"
     }
 }

app/src/Controller/DefaultController.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Annotation\Route;
+
+/**
+ * Class DefaultController
+ *
+ * @package App\Controller
+ */
+class DefaultController extends AbstractController
+{
+    /**
+     * This render test template that uses vueJS
+     *
+     * @Route("/default", name="default")
+     */
+    public function app(): Response
+    {
+        return $this->render('default/app.html.twig');
+    }
+}

app/templates/default/app.html.twig

@@ -0,0 +1,18 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}{{'My VueJS template'}}{% endblock %}
+
+{% block body %}
+<div class="container">
+    <h1>{{'My VueJS template'}}</h1>
+
+    block vue
+    {% verbatim %}
+        <div id="app" data-name="{{ app.user.username }}"></div>
+    {% endverbatim %}
+    end
+
+    {{ encore_entry_script_tags('app') }}
+
+</div>
+{% endblock %}

app/webpack.config.js

@@ -58,6 +58,9 @@ Encore
     // enables Sass/SCSS support
     .enableSassLoader()
 
+    // enable VueJS support
+    .enableVueLoader()
+
     // uncomment if you use TypeScript
     //.enableTypeScriptLoader()