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

Author: t-richard

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/images/vue.png

@@ -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/components/PackageList.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/assets/vue/controllers/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/_PackageSearch.vue

@@ -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/code_snippets/_vue.html.twig

@@ -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": "*",
         "symfony/validator": "6.0.*",
         "symfony/webpack-encore-bundle": "^1.14",
         "symfony/yaml": "6.0.*",
@@ -78,6 +79,16 @@
         "symfony/polyfill-php74": "*",
         "symfony/polyfill-php80": "*"
     },
+    "repositories": [{
+        "type": "path",
+        "url": "../src/Vue",
+        "options": {
+            "versions": {
+                "symfony/ux-vue": "1.0"
+            }
+        }
+    }
+    ],
     "scripts": {
         "auto-scripts": {
             "cache:clear": "symfony-cmd",