wc

quasar/web_components/src/components/Greeting.ce.vue

@@ -0,0 +1,39 @@
+<template>
+  <section class="card">
+    <p class="title">Hello {{ safeName }}</p>
+    <p class="subtitle">This is a Vue 3 custom element.</p>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{ name?: string }>();
+
+const safeName = computed(() => (props.name && props.name.trim()) || 'there');
+</script>
+
+<style scoped>
+.card {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.75rem;
+  padding: 0.75rem 1rem;
+  font-family: Inter, system-ui, -apple-system, sans-serif;
+  background: #ffffff;
+  color: #111827;
+}
+
+.title {
+  margin: 0;
+  font-weight: 700;
+}
+
+.subtitle {
+  margin: 0;
+  color: #4b5563;
+  font-size: 0.875rem;
+}
+</style>