ISSUE-345: add vue.js

tatevikg1 · tatevikg1 · commit 8b07cb79d21f · 2025-06-11T20:50:18.000+04:00
diff --git a/.gitignore b/.gitignore
@@ -15,3 +15,4 @@
 /vendor/
 .phpunit.result.cache
 .env
+/node_modules
diff --git a/README.md b/README.md
@@ -42,3 +42,4 @@ this code.
 ## Command to running this project for local testing
 
 symfony local:server:start
+yarn encore dev
diff --git a/assets/app.js b/assets/app.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './vue/App.vue';
+
+createApp(App).mount('#vue-app');
diff --git a/assets/vue/App.vue b/assets/vue/App.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <h1>Hello from Vue!</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App'
+}
+</script>
diff --git a/composer.json b/composer.json
@@ -31,7 +31,8 @@
     "require": {
         "php": "^8.1",
         "phplist/core": "dev-ISSUE-345",
-        "symfony/twig-bundle": "^6.4"
+        "symfony/twig-bundle": "^6.4",
+        "symfony/webpack-encore-bundle": "^2.2"
     },
     "require-dev": {
         "phpunit/phpunit": "^9.5",
diff --git a/package.json b/package.json
@@ -0,0 +1,16 @@
+{
+  "devDependencies": {
+    "@babel/core": "^7.27.4",
+    "@babel/preset-env": "^7.27.2",
+    "@symfony/webpack-encore": "^5.1.0",
+    "babel-loader": "^10.0.0",
+    "vue-loader": "^17.3.1",
+    "vue-template-compiler": "^2.7.14",
+    "webpack": "^5.99.9",
+    "webpack-cli": "^6.0.1",
+    "webpack-notifier": "^1.15.0"
+  },
+  "dependencies": {
+    "vue": "3"
+  }
+}
diff --git a/templates/base.html.twig b/templates/base.html.twig
@@ -9,6 +9,7 @@
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
 
     {# Add your own custom CSS later if needed #}
+    {{ encore_entry_link_tags('app') }}
 </head>
 <body>
 <main class="container mt-5">
@@ -18,5 +19,6 @@
 {# 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/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
+{{ encore_entry_script_tags('app') }}
 </body>
 </html>
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,15 @@
+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())
+    .enableSingleRuntimeChunk()
+;
+
+module.exports = Encore.getWebpackConfig();
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -42,3 +42,4 @@ this code.`
`42`	`42`	`## Command to running this project for local testing`
`43`	`43`
`44`	`44`	`symfony local:server:start`
	`45`	`+yarn encore dev`