load and enable bootstrap framework

app/assets/app.js

@@ -6,7 +6,7 @@
  */
 
 // any CSS you import will output into a single css file (app.css in this case)
-import './styles/app.css';
+import './styles/app.scss';
 
 // start the Stimulus application
-import './bootstrap';
+import './stimulus/bootstrap';

app/assets/stimulus/controllers/hello_controller.js

@@ -11,6 +11,6 @@ import { Controller } from '@hotwired/stimulus';
  */
 export default class extends Controller {
     connect() {
-        this.element.textContent = 'Hello Stimulus! Edit me in assets/controllers/hello_controller.js';
+        this.element.textContent = 'Hello Stimulus! Edit me in assets/stimulus/controllers/hello_controller.js';
     }
 }

app/assets/styles/_variables.scss

@@ -0,0 +1 @@
+$h1-font-size: 3.5rem; //bigger

app/assets/styles/app.css

@@ -1,3 +0,0 @@
-body {
-    background-color: lightgray;
-}

app/assets/styles/app.scss

@@ -0,0 +1,16 @@
+// override bootstrap variables
+@import "_variables";
+
+// import Bootstrap 5 styles
+@import "~bootstrap/scss/bootstrap";
+
+
+body {
+    //background-color: lightgray;
+    //padding: 3em;
+    div#boum {
+      //background-color: white;
+      padding: 1em;
+      border: 1px solid grey;
+   }
+}

app/assets/vue/components/App.vue

@@ -0,0 +1,21 @@
+<template>
+   <div id="boum">
+      <div>hello <b>{{ username }}</b></div>
+      <div><b>{{ age }}</b> ans</div>
+      <input v-model="username">
+   </div>
+</template>
+
+<script>
+export default {
+   name: 'app',
+   props: ['dataset'],
+   data() {
+      return {
+         user: this.dataset.user,
+         username: this.dataset.user.username,
+         age: this.dataset.user.age,
+      }
+   }
+}
+</script>

app/assets/vue/index.js

@@ -0,0 +1,16 @@
+import { createApp } from 'vue'
+import App from './components/App.vue'
+
+const div = document.querySelector('div#app');
+console.log(div);
+
+const vue = createApp({
+    template: `<app :dataset="this.dataset" ></app>`,
+    data() {
+        return {
+            dataset: JSON.parse(div.dataset.app),
+        }
+    },
+})
+.component('app', App)
+.mount('#app');

app/config/packages/twig.yaml

@@ -1,5 +1,6 @@
 twig:
     default_path: '%kernel.project_dir%/templates'
+    form_themes: ['bootstrap_5_layout.html.twig']
 
 when@test:
     twig:

app/package.json

@@ -5,6 +5,7 @@
         "@hotwired/stimulus": "^3.0.0",
         "@symfony/stimulus-bridge": "^3.2.0",
         "@symfony/webpack-encore": "^4.0.0",
+        "bootstrap": "^5.2.1",
         "core-js": "^3.23.0",
         "regenerator-runtime": "^0.13.9",
         "webpack": "^5.74.0",
@@ -21,6 +22,11 @@
     },
     "dependencies": {
         "sass": "^1.55.0",
-        "sass-loader": "^13.0.2"
+        "sass-loader": "^13.0.2",
+        "vue": "^3.2.40",
+        "vue-cli": "^2.9.6",
+        "vue-loader": "^17.0.0",
+        "vue-resource": "^1.5.3",
+        "vue-template-compiler": "^2.7.10"
     }
 }

app/src/Controller/VueController.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace App\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Annotation\Route;
+
+class VueController extends AbstractController
+{
+    /**
+     * @Route("/vue", name="app_vue")
+     */
+    public function index(): Response
+    {
+        return $this->render('vue/index.html.twig', [
+            'controller_name' => 'VueController',
+            'data' => [
+               'user' => [
+                  'username' => 'Charles',
+                  'age' => 31
+               ]
+            ]
+        ]);
+    }
+}

app/templates/base.html.twig

@@ -7,10 +7,12 @@
         {# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
         {% block stylesheets %}
             {{ encore_entry_link_tags('app') }}
+            {{ encore_entry_link_tags('vue') }}
         {% endblock %}
 
         {% block javascripts %}
             {{ encore_entry_script_tags('app') }}
+            {{ encore_entry_script_tags('vue') }}
         {% endblock %}
     </head>
     <body>

app/templates/vue/index.html.twig

@@ -0,0 +1,13 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}{{'My VueJS template'}}{% endblock %}
+
+{% block body %}
+<div class="container">
+    <h1>{{'My VueJS template'}}</h1>
+
+    <div id="app" data-app="{{ data | json_encode() | escape('html_attr') }}"></div>
+
+
+</div>{{ dump() }}
+{% endblock %}

app/webpack.config.js

@@ -22,8 +22,11 @@ Encore
      */
     .addEntry('app', './assets/app.js')
 
+    // start VueJS application
+    .addEntry('vue', './assets/vue/index.js')
+
     // enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
-    .enableStimulusBridge('./assets/controllers.json')
+    .enableStimulusBridge('./assets/stimulus/controllers.json')
 
     // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
     .splitEntryChunks()
@@ -57,7 +60,10 @@ Encore
     })
 
     // enables Sass/SCSS support
-    //.enableSassLoader()
+    .enableSassLoader()
+
+    // enable VueJS support
+    .enableVueLoader()
 
     // uncomment if you use TypeScript
     //.enableTypeScriptLoader()