minor #439 [Vue] UX Vue.js example for ux.symfony.com (t-richard)

This PR was merged into the 2.x branch.

Discussion
----------

[Vue] UX Vue.js example for ux.symfony.com

| Q             | A
| ------------- | ---
| Bug fix?      | no
| New feature?  | not really
| Tickets       | None
| License       | MIT

This adds the Vue.js component to ux.symfony.com

Some highlights from this PR:
* Samples are the same as the react ones, just written in Vue.js 3
* Used the Vue composition API since it's Vue 3 only and it's the new recommended syntax
* Used a composer local repository to link to the UX Vue.js component while it's not published on packagist, making this PR usable as is locally
* Changed the gradient for React to use a color closer to the "React blue"
* Used a similar gradient with the "Vue.js green"
* Fixed failing test on the Live component page

<details>
<summary>Pages screenshots</summary>

### Homepage

![image](https://user-images.githubusercontent.com/22999032/185811101-eab0b617-cf89-4380-afa4-6e742eae4d1c.png)

### Vue.js page

![image](https://user-images.githubusercontent.com/22999032/185811086-5bdd940c-a1a5-453f-a093-519ee210e245.png)

### Vue.js page with a search

![image](https://user-images.githubusercontent.com/22999032/185811119-2da0c9fa-1885-44e6-873f-9fc5c91e3bfd.png)

### Vue.js page with an empty search

![image](https://user-images.githubusercontent.com/22999032/185811129-571b2eb1-f758-41ff-9d21-fdfdafd2e63d.png)

</details>

Commits
-------

ec1b233 [Vue] UX Vue.js example for ux.symfony.com

ux.symfony.com/assets/app.js

@@ -1,5 +1,5 @@
 import { registerReactControllerComponents } from '@symfony/ux-react';
-
+import {registerVueControllerComponents} from "@symfony/ux-vue";
 
 // any CSS you import will output into a single css file (app.css in this case)
 import './styles/app.scss';
@@ -14,3 +14,4 @@ import Tab from 'bootstrap/js/dist/tab';
 
 // initialize symfony/ux-react
 registerReactControllerComponents(require.context('./react/controllers', true, /\.(j|t)sx?$/));
+registerVueControllerComponents(require.context('./vue/controllers', true, /\.vue?$/));

ux.symfony.com/assets/controllers.json

@@ -84,6 +84,12 @@
                 "enabled": true,
                 "fetch": "eager"
             }
+        },
+        "@symfony/ux-vue": {
+            "vue": {
+                "enabled": true,
+                "fetch": "eager"
+            }
         }
     },
     "entrypoints": []

ux.symfony.com/assets/vue/components/PackageList.vue

@@ -0,0 +1,35 @@
+<template>
+    <div v-if="packages.length === 0" class="alert alert-info">Sad trombone... we haven't built any components that
+        match this search yet!
+    </div>
+
+    <div v-else class="row">
+        <a
+            v-for="uxPackage in packages"
+            :href="uxPackage.url"
+            class="col-12 col-md-4 col-lg-3 mb-2"
+        >
+            <div class="components-container p-2">
+                <div class="d-flex">
+                    <div
+                        class="live-component-img d-flex justify-content-center align-items-center"
+                        :style="{background: uxPackage.gradient}">
+                        <img width="17" height="17"
+                             :src="uxPackage.imageUrl"
+                             :alt="`Image for the ${uxPackage.humanName} UX package`"
+                        />
+                    </div>
+                    <h4 class="ubuntu-title ps-2 align-self-center">
+                        {{ uxPackage.humanName }}
+                    </h4>
+                </div>
+            </div>
+        </a>
+    </div>
+</template>
+
+<script setup>
+defineProps({
+    packages: Array,
+});
+</script>

ux.symfony.com/assets/vue/controllers/PackageSearch.vue

@@ -0,0 +1,31 @@
+<template>
+    <div>
+        <input
+            v-model="search"
+            class="form-control"
+            type="search"
+            placeholder="This search is built in Vue!"
+        />
+
+        <div class="mt-3">
+            <PackageList :packages="filteredPackages" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue';
+import PackageList from "../components/PackageList";
+
+const props = defineProps({
+    packages: Array,
+});
+
+const search = ref('');
+
+const filteredPackages = computed(() => {
+    return props.packages.filter(
+        uxPackage => uxPackage.humanName.toLowerCase().includes(search.value.toLowerCase())
+    );
+});
+</script>

ux.symfony.com/code_snippets/_PackageSearch.vue

@@ -0,0 +1,28 @@
+<template>
+    <div>
+        <input v-model="search" />
+
+        <div class="row">
+            <a v-for="uxPackage in filteredPackages" :href="uxPackage.url">
+                <img :src="uxPackage.imageUrl" />
+                <h4>{{ uxPackage.humanName }}</h4>
+            </a>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue';
+
+const props = defineProps({
+    packages: Array,
+});
+
+const search = ref('');
+
+const filteredPackages = computed(() => {
+    return props.packages.filter(
+        uxPackage => uxPackage.humanName.includes(search.value)
+    );
+});
+</script>

ux.symfony.com/code_snippets/_vue.html.twig

@@ -0,0 +1,11 @@
+{#
+    "PackageSearch" mounts assets/vue/controllers/PackageSearch.vue.
+
+    "packagesData" is dynamic data, which becomes the "packages" prop!
+#}
+
+<div {{ vue_component('PackageSearch', {
+    packages: packagesData
+}) }}>
+    Loading... <i class="fas fa-cog fa-spin fa-3x"></i>
+</div>

ux.symfony.com/composer.json

@@ -41,6 +41,7 @@
         "symfony/ux-turbo-mercure": "2.x-dev",
         "symfony/ux-twig-component": "2.x-dev",
         "symfony/ux-typed": "2.x-dev",
+        "symfony/ux-vue": "2.x-dev",
         "symfony/validator": "6.0.*",
         "symfony/webpack-encore-bundle": "^1.14",
         "symfony/yaml": "6.0.*",