first home page

assets/app.js

@@ -3,6 +3,8 @@ import { createApp } from 'vue';
 import App from './js/App.vue';
 import Graf from './js/Graf.vue';
 import Dyma from './js/Dyma.vue';
+import Home from './js/Home.vue';
 createApp(App).mount('#vue-app');
 createApp(Graf).mount('#vue-grafikart');
-createApp(Dyma).mount('#vue-dyma');
+createApp(Dyma).mount('#vue-dyma');
+createApp(Home).mount('#vue-home');

assets/controllers.json

@@ -1,4 +1,11 @@
 {
-    "controllers": [],
+    "controllers": {
+        "@symfony/ux-vue": {
+            "vue": {
+                "enabled": true,
+                "fetch": "eager"
+            }
+        }
+    },
     "entrypoints": []
 }

assets/js/Home.vue

@@ -0,0 +1,15 @@
+
+<script setup>
+
+</script>
+
+<template>
+    <div class="container">
+        <div class="row">
+            <div class="col-12 text-center">
+                <h1>PHP HUB</h1>
+                <p>All you need about dev</p>
+            </div>
+        </div>
+    </div>
+</template>

composer.json

@@ -37,6 +37,7 @@
         "symfony/string": "6.2.*",
         "symfony/translation": "6.2.*",
         "symfony/twig-bundle": "6.2.*",
+        "symfony/ux-vue": "^2.7",
         "symfony/validator": "6.2.*",
         "symfony/web-link": "6.2.*",
         "symfony/webpack-encore-bundle": "^1.16",

config/bundles.php

@@ -13,4 +13,5 @@
     Symfony\Bundle\MakerBundle\MakerBundle::class => ['dev' => true],
     Sensio\Bundle\FrameworkExtraBundle\SensioFrameworkExtraBundle::class => ['all' => true],
     Symfony\WebpackEncoreBundle\WebpackEncoreBundle::class => ['all' => true],
+    Symfony\UX\Vue\VueBundle::class => ['all' => true],
 ];

package.json

@@ -4,12 +4,13 @@
         "@babel/preset-env": "^7.16.0",
         "@hotwired/stimulus": "^3.0.0",
         "@symfony/stimulus-bridge": "^3.2.0",
+        "@symfony/ux-vue": "file:vendor/symfony/ux-vue/assets",
         "@symfony/webpack-encore": "^4.0.0",
         "core-js": "^3.23.0",
         "regenerator-runtime": "^0.13.9",
         "ts-loader": "^9.4.2",
         "typescript": "^4.9.4",
-        "vue": "^3",
+        "vue": "^3.0",
         "vue-loader": "^17.0.1",
         "vue-template-compiler": "^2.7.14",
         "webpack": "^5.74.0",

src/Controller/DefaultController.php

@@ -9,6 +9,17 @@
 
 class DefaultController extends AbstractController
 {
+    #[Route('/', name: 'app_home')]
+    public function home(): Response
+    {
+        $services = array();
+        $services[] = array("id" => 1, "title" => "FirstCode", "code" => "<?php example", "creator" => "Eric Mega", "release" => "02/03/2023");
+        $services[] = array("id" => 2, "title" => "MediaManager", "code" => "public function newIllustration()", "creator" => "Steelwix", "release" => "02/03/2023");
+        $services[] = array("id" => 3, "title" => "MessageGenerator", "code" => "getHappyMessage()", "creator" => "odmgidia", "release" => "02/03/2023");
+        $services[] = array("id" => 4, "title" => "DateCompare", "code" => "compareWithToday()", "creator" => "Steelwix", "release" => "02/03/2023");
+        $name = "Steelwix";
+        return $this->render('default/main.html.twig', ['name' => $name]);
+    }
     #[Route('/default', name: 'app_default')]
     public function index(): Response
     {

symfony.lock

@@ -239,6 +239,9 @@
             "templates/base.html.twig"
         ]
     },
+    "symfony/ux-vue": {
+        "version": "v2.7.1"
+    },
     "symfony/validator": {
         "version": "6.2",
         "recipe": {

templates/_partials/_nav.html.twig

@@ -0,0 +1,22 @@
+<nav class="navbar navbar-expand-lg navbar-dark navbar-color">
+	<div class="container-fluid">
+		<a class="navbar-brand overwatch-text" href="{{ path('app_home') }}">PHPHUB</a>
+		<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+			<span class="navbar-toggler-icon"></span>
+		</button>
+		<div class="collapse navbar-collapse" id="navbarSupportedContent">
+			<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+				<li class="nav-item">
+					<a class="nav-link" aria-current="page" href="{{ path('app_home') }}">Home</a>
+				</li>
+				<li class="nav-item">
+					<a class="nav-link" href="">Login</a>
+				</li>
+				<li class="nav-item">
+					<a class="nav-link" href="">Register</a>
+				</li>
+
+			</ul>
+		</div>
+	</div>
+</nav>

templates/base.html.twig

@@ -29,6 +29,8 @@
 			{{ encore_entry_script_tags('app') }}
 		{% endblock %}
 	</head>
-	<body class="bg-dark text-light"> {% block body %}{% endblock %}
-		</body>
-	</html>
+	<body class="bg-dark text-light">
+		{% include "_partials/_nav.html.twig" %}
+		{% block body %}{% endblock %}
+	</body>
+</html>

templates/default/main.html.twig

@@ -0,0 +1,10 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}PHP HUB
+{% endblock %}
+
+{% block body %}
+	<div
+		id="vue-home">{# L'appli Vue.js vivra ici #}
+	</div>
+{% endblock %}