42 lines
1.0 KiB
Vue
42 lines
1.0 KiB
Vue
<script setup>
|
|
import Vue3WordCloud from 'vue3-word-cloud'
|
|
|
|
// Example word list — you can make this a prop if you like
|
|
const props = defineProps({
|
|
words: {
|
|
type: Array,
|
|
default: () => [
|
|
['SSE', 20],
|
|
['No-Build-Step', 21],
|
|
['Fat Morph', 20],
|
|
['Hypermedia', 19],
|
|
['HTMX', 13],
|
|
['Idiomorph', 12],
|
|
['Architecture Description Record', 14],
|
|
['HATEOAS', 18],
|
|
['Templating', 12],
|
|
['Declarative vs. Imperative', 10],
|
|
['Alien Signals', 12],
|
|
['Plug-ins', 17],
|
|
['Brotli Compression', 20],
|
|
['Comforms to Specification', 21],
|
|
['Web Components', 14],
|
|
['Pro Version', 10],
|
|
['Locality of Behavior', 11],
|
|
['SDKs', 22],
|
|
['Web Sockets', 10],
|
|
['Attributes And Actions', 22],
|
|
['Datastar', 30],
|
|
],
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<Vue3WordCloud
|
|
style="width: 100%; height: 100%"
|
|
:words="words"
|
|
:color="([, w]) => (w > 20 ? 'DeepPink' : w > 10 ? 'RoyalBlue' : 'Gray')"
|
|
font-family="Arial"
|
|
/>
|
|
</template> |