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/composer.json

@@ -12,6 +12,7 @@
         "doctrine/doctrine-migrations-bundle": "^3.2",
         "doctrine/orm": "^2.13",
         "egulias/email-validator": "^3.2",
+        "sensio/framework-extra-bundle": "^6.2",
         "symfony/asset": "^5.4",
         "symfony/console": "5.4.*",
         "symfony/dotenv": "5.4.*",

app/composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "7c032aacdd51f5ad5ecb242caba97cf6",
+    "content-hash": "03cff0d8812e3e106effbb2da3b9eafd",
     "packages": [
         {
             "name": "doctrine/annotations",
@@ -2024,6 +2024,84 @@
             },
             "time": "2021-05-03T11:20:27+00:00"
         },
+        {
+            "name": "sensio/framework-extra-bundle",
+            "version": "v6.2.8",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/sensiolabs/SensioFrameworkExtraBundle.git",
+                "reference": "bb962f8aed09e60b0942545f6e4842ffeee4aafd"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/sensiolabs/SensioFrameworkExtraBundle/zipball/bb962f8aed09e60b0942545f6e4842ffeee4aafd",
+                "reference": "bb962f8aed09e60b0942545f6e4842ffeee4aafd",
+                "shasum": ""
+            },
+            "require": {
+                "doctrine/annotations": "^1.0",
+                "php": ">=7.2.5",
+                "symfony/config": "^4.4|^5.0|^6.0",
+                "symfony/dependency-injection": "^4.4|^5.0|^6.0",
+                "symfony/framework-bundle": "^4.4|^5.0|^6.0",
+                "symfony/http-kernel": "^4.4|^5.0|^6.0"
+            },
+            "conflict": {
+                "doctrine/doctrine-cache-bundle": "<1.3.1",
+                "doctrine/persistence": "<1.3"
+            },
+            "require-dev": {
+                "doctrine/dbal": "^2.10|^3.0",
+                "doctrine/doctrine-bundle": "^1.11|^2.0",
+                "doctrine/orm": "^2.5",
+                "symfony/browser-kit": "^4.4|^5.0|^6.0",
+                "symfony/doctrine-bridge": "^4.4|^5.0|^6.0",
+                "symfony/dom-crawler": "^4.4|^5.0|^6.0",
+                "symfony/expression-language": "^4.4|^5.0|^6.0",
+                "symfony/finder": "^4.4|^5.0|^6.0",
+                "symfony/monolog-bridge": "^4.0|^5.0|^6.0",
+                "symfony/monolog-bundle": "^3.2",
+                "symfony/phpunit-bridge": "^4.4.9|^5.0.9|^6.0",
+                "symfony/security-bundle": "^4.4|^5.0|^6.0",
+                "symfony/twig-bundle": "^4.4|^5.0|^6.0",
+                "symfony/yaml": "^4.4|^5.0|^6.0",
+                "twig/twig": "^1.34|^2.4|^3.0"
+            },
+            "type": "symfony-bundle",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "6.1.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Sensio\\Bundle\\FrameworkExtraBundle\\": "src/"
+                },
+                "exclude-from-classmap": [
+                    "/tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com"
+                }
+            ],
+            "description": "This bundle provides a way to configure your controllers with annotations",
+            "keywords": [
+                "annotations",
+                "controllers"
+            ],
+            "support": {
+                "issues": "https://github.com/sensiolabs/SensioFrameworkExtraBundle/issues",
+                "source": "https://github.com/sensiolabs/SensioFrameworkExtraBundle/tree/v6.2.8"
+            },
+            "time": "2022-09-05T16:44:56+00:00"
+        },
         {
             "name": "symfony/asset",
             "version": "v5.4.13",

app/config/bundles.php

@@ -9,4 +9,5 @@ return [
     Symfony\Bundle\TwigBundle\TwigBundle::class => ['all' => true],
     Symfony\Bundle\WebProfilerBundle\WebProfilerBundle::class => ['dev' => true, 'test' => true],
     Symfony\WebpackEncoreBundle\WebpackEncoreBundle::class => ['all' => true],
+    Sensio\Bundle\FrameworkExtraBundle\SensioFrameworkExtraBundle::class => ['all' => true],
 ];

app/config/packages/sensio_framework_extra.yaml

@@ -0,0 +1,3 @@
+sensio_framework_extra:
+    router:
+        annotations: false

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/symfony.lock

@@ -38,6 +38,18 @@
             "migrations/.gitignore"
         ]
     },
+    "sensio/framework-extra-bundle": {
+        "version": "6.2",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "5.2",
+            "ref": "fb7e19da7f013d0d422fa9bce16f5c510e27609b"
+        },
+        "files": [
+            "config/packages/sensio_framework_extra.yaml"
+        ]
+    },
     "symfony/console": {
         "version": "5.4",
         "recipe": {

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()