by hfalucas
A light replacement for built-in and <input> elements allowing them to automatically grow to fit the content.</p> </p><div class="mt-5 rounded-xl border border-fuchsia-100 bg-fuchsia-50/60 p-4"><p class="flex items-center gap-1.5 font-mono text-[11px] tracking-widest text-fuchsia-700 uppercase"><svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9zM19 15l.9 2.1L22 18l-2.1.9L19 21l-.9-2.1L16 18l2.1-.9z"/></svg>AI summary</p><p class="mt-2 font-semibold">Content adjuster</p><p class="mt-1 text-sm leading-relaxed text-zinc-700">Automatically adjusts textarea and input elements to fit their content</p></div><dl class="mt-6 flex flex-wrap gap-x-8 gap-y-4"><div title="5" class="block"><dt class="flex items-center gap-1.5 font-mono text-[11px] tracking-widest text-zinc-500 uppercase group-hover:text-fuchsia-700"><svg class="size-3.5 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>stars</dt><dd class="mt-0.5 font-display text-2xl font-bold tabular-nums">5</dd></div><div title="1" class="block"><dt class="flex items-center gap-1.5 font-mono text-[11px] tracking-widest text-zinc-500 uppercase group-hover:text-fuchsia-700"><svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="6" cy="5" r="2"/><circle cx="18" cy="5" r="2"/><circle cx="12" cy="19" r="2"/><path d="M6 7v1a3 3 0 0 0 3 3h6a3 3 0 0 0 3-3V7M12 11v6"/></svg>forks</dt><dd class="mt-0.5 font-display text-2xl font-bold tabular-nums">1</dd></div><div title="1" class="block"><dt class="flex items-center gap-1.5 font-mono text-[11px] tracking-widest text-zinc-500 uppercase group-hover:text-fuchsia-700"><svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>watching</dt><dd class="mt-0.5 font-display text-2xl font-bold tabular-nums">1</dd></div><a href="#backlinks" title="Awesome lists that link here" class="block group"><dt class="flex items-center gap-1.5 font-mono text-[11px] tracking-widest text-zinc-500 uppercase group-hover:text-fuchsia-700"><svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7"/><path d="M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7"/></svg>awesome list</dt><dd class="mt-0.5 font-display text-2xl font-bold tabular-nums">1</dd></a></dl><div class="mt-6 flex flex-wrap items-center gap-2"><a href="https://github.com/hfalucas/vue-autosizer" class="inline-flex items-center gap-2 rounded-full bg-zinc-900 px-4 py-2 text-sm font-medium text-white hover:bg-zinc-700"><svg class="size-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .5a11.5 11.5 0 0 0-3.64 22.41c.58.1.79-.25.79-.56v-2c-3.2.7-3.88-1.37-3.88-1.37-.52-1.33-1.28-1.69-1.28-1.69-1.05-.72.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.29 1.19-3.1-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.17 1.18a11 11 0 0 1 5.77 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.11 3.05.74.81 1.19 1.84 1.19 3.1 0 4.42-2.69 5.39-5.26 5.68.41.36.78 1.06.78 2.14v3.17c0 .31.21.67.8.56A11.5 11.5 0 0 0 12 .5z"></path></svg>View on GitHub</a><button type="button" onclick="document.getElementById('embed-badge').showModal()" class="inline-flex items-center gap-2 rounded-full border border-zinc-200 py-1.5 pr-4 pl-2 text-sm font-medium text-zinc-700 transition-colors hover:border-zinc-300 hover:text-zinc-900" title="Show the badge in your README"><img src="/shield/hfalucas/vue-autosizer/links.svg" alt="Awesome Lists badge" class="h-5">Embed badge</button><dialog id="embed-badge" aria-labelledby="embed-badge-title" class="m-auto w-[calc(100%-2rem)] rounded-2xl bg-white p-6 text-zinc-900 shadow-2xl backdrop:bg-black/50 backdrop:backdrop-blur-sm max-w-2xl"><div class="flex items-start justify-between gap-4"><h2 id="embed-badge-title" class="font-display text-xl font-bold">Embed the badge</h2><form method="dialog"><button class="-m-1 rounded-full p-1 text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900" aria-label="Close"><svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"></path></svg></button></form></div><p class="mt-1 text-sm text-zinc-600">Show how many awesome lists link to your project. The count updates automatically.</p><img src="/shield/hfalucas/vue-autosizer/links.svg" alt="Awesome Lists badge" class="mt-4 h-5"><div class="mt-5"><div class="flex items-center justify-between"><span class="font-mono text-xs tracking-wide text-zinc-500 uppercase">Markdown</span><button type="button" data-copy="embed-md" class="rounded-full px-3 py-1 font-mono text-xs text-fuchsia-700 hover:bg-fuchsia-50">Copy</button></div><pre id="embed-md" class="mt-1 overflow-x-auto rounded-lg bg-zinc-100 p-3 font-mono text-xs whitespace-pre-wrap break-all text-zinc-800">[](https://awesome.facts.dev/awesome/hfalucas/vue-autosizer)</pre></div><div class="mt-5"><div class="flex items-center justify-between"><span class="font-mono text-xs tracking-wide text-zinc-500 uppercase">HTML</span><button type="button" data-copy="embed-html" class="rounded-full px-3 py-1 font-mono text-xs text-fuchsia-700 hover:bg-fuchsia-50">Copy</button></div><pre id="embed-html" class="mt-1 overflow-x-auto rounded-lg bg-zinc-100 p-3 font-mono text-xs whitespace-pre-wrap break-all text-zinc-800"><a href="https://awesome.facts.dev/awesome/hfalucas/vue-autosizer"><img src="https://awesome.facts.dev/shield/hfalucas/vue-autosizer/links.svg" alt="Awesome Lists Badge" /></a></pre></div><div class="mt-5"><div class="flex items-center justify-between"><span class="font-mono text-xs tracking-wide text-zinc-500 uppercase">Image URL</span><button type="button" data-copy="embed-url" class="rounded-full px-3 py-1 font-mono text-xs text-fuchsia-700 hover:bg-fuchsia-50">Copy</button></div><pre id="embed-url" class="mt-1 overflow-x-auto rounded-lg bg-zinc-100 p-3 font-mono text-xs whitespace-pre-wrap break-all text-zinc-800">https://awesome.facts.dev/shield/hfalucas/vue-autosizer/links.svg</pre></div></dialog></div></div></header><section id="related" class="mt-16 scroll-mt-20"><h2 class="font-display text-2xl font-bold tracking-tight">Similar projects</h2><p class="mt-1 text-sm text-zinc-500">Found by comparing what the projects do, not just their names.</p><ul class="mt-5 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3"><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/hfalucas/vue-simplebar" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/7132610?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">hfalucas/</span><span class="font-semibold">vue-simplebar</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>9</span></div><p class="mt-3 text-sm font-semibold">Custom scrollbar</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">A Vue.js wrapper for adding custom scrollbars to web applications with convenient event helpers and options.</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/darrenjennings/vue-autosuggest" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/5770711?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">darrenjennings/</span><span class="font-semibold">vue-autosuggest</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>621</span></div><p class="mt-3 text-sm font-semibold">Autocomplete</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">A Vue.js component for autocompletion with full control over rendering and styling</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/jayeshlab/vue-resize-text" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/36194663?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">jayeshlab/</span><span class="font-semibold">vue-resize-text</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>71</span></div><p class="mt-3 text-sm font-semibold">Text Resizer</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">A Vue.js directive to automatically adjust text size based on element width</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/akryum/vue-resize" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/2798204?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">akryum/</span><span class="font-semibold">vue-resize</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>508</span></div><p class="mt-3 text-sm font-semibold">Size detector</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">A Vue.js component to detect changes in DOM element sizes.</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/madimetjashika/vuetify-google-autocomplete" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/6643245?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">madimetjashika/</span><span class="font-semibold">vuetify-google-autocomplete</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>97</span></div><p class="mt-3 text-sm font-semibold">Auto-suggest</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">Autocomplete component using Google Places API</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/bosnaufal/vue-autocomplete" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/12091318?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">bosnaufal/</span><span class="font-semibold">vue-autocomplete</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>206</span></div><p class="mt-3 text-sm font-semibold">Autocomplete component</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">Provides an autocomplete component for Vue.Js that fetches data from a specified URL and returns suggestions based on user input.</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/ieski/autocomplete" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/88244?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">ieski/</span><span class="font-semibold">autocomplete</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>9</span></div><p class="mt-3 text-sm font-semibold">Autocomplete component</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">A Vue.js 2 component for providing autocomplete functionality to input fields.</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/iliyazelenko/vue-cool-select" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/13103045?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">iliyazelenko/</span><span class="font-semibold">vue-cool-select</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>244</span></div><p class="mt-3 text-sm font-semibold">Select component</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">A customizable, highly configurable select component with various features such as autocomplete and theme support</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/f-loat/vue-simplemde" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/16759376?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">f-loat/</span><span class="font-semibold">vue-simplemde</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>770</span></div><p class="mt-3 text-sm font-semibold">Markdown Editor</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">A Vue.js component that integrates the SimpleMDE editor with Markdown support</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/outluch/vue-model-autoset" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/1479468?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">outluch/</span><span class="font-semibold">vue-model-autoset</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>17</span></div><p class="mt-3 text-sm font-semibold">V-model fixer</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">A Vue.js plugin to work around limitations in dynamically added properties with v-model directive</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/kazanexpress/vue-simple-suggest" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/36857287?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">kazanexpress/</span><span class="font-semibold">vue-simple-suggest</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>461</span></div><p class="mt-3 text-sm font-semibold">Autocomplete component</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">An autocomplete component for Vue.js with rich features and customization options</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/hosein2398/textra" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/17067774?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">hosein2398/</span><span class="font-semibold">textra</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>30</span></div><p class="mt-3 text-sm font-semibold">Text slider</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">A Vue.js add-on to animate text on the screen by sliding it between different positions and orientations.</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/paliari/v-autocomplete" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/2801041?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">paliari/</span><span class="font-semibold">v-autocomplete</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>351</span></div><p class="mt-3 text-sm font-semibold">Autocomplete component</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">A Vue.js component for displaying a searchable list of items</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/seregpie/vueresizesensor" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/1217953?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">seregpie/</span><span class="font-semibold">vueresizesensor</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>6</span></div><p class="mt-3 text-sm font-semibold">Resize listener</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">A Vue component that listens to window resize events and triggers a callback with the new width and height</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/hc200ok/vue2-text-annotation" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/11552575?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">hc200ok/</span><span class="font-semibold">vue2-text-annotation</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>7</span></div><p class="mt-3 text-sm font-semibold">Text annotation component</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">A Vue.js component for annotating and masking text data</p></li></ul></section><section id="backlinks" class="mt-16 scroll-mt-20"><h2 class="font-display text-2xl font-bold tracking-tight">Featured in 1 awesome list</h2><p class="mt-1 text-sm text-zinc-500">Each link jumps to the spot where the list mentions vue-autosizer.</p><ul class="mt-5 grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3"><li class="flex min-w-0 items-center gap-2 rounded-xl border border-zinc-200 px-3 py-2.5 text-sm transition-colors hover:border-fuchsia-600"><a href="/awesome/vuejs/awesome-vue#hfalucas/vue-autosizer" class="group inline-flex min-w-0 items-center gap-2 flex-1"><img src="https://avatars.githubusercontent.com/u/6128107?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">vuejs/</span><span class="font-semibold">awesome-vue</span></span></a></li></ul></section></main></div><footer class="border-t border-zinc-200 bg-zinc-50"><div class="mx-auto flex max-w-6xl flex-col gap-4 px-4 py-8 text-sm sm:flex-row sm:items-start sm:justify-between"><div><a href="/" class="flex items-center gap-2 font-display text-lg font-bold tracking-tight"><img loading="lazy" src="/favicon.png" width="22" height="22" alt=""><span>Awesome <span class="text-fuchsia-600">Lists</span></span></a><p class="mt-2 text-zinc-500">Awesome links for awesome devs. © 2026 awesome.facts.dev</p><p class="mt-2 font-mono text-xs text-zinc-500">press <kbd class="rounded border border-zinc-300 px-1">/</kbd> to search</p></div><ul class="flex flex-wrap gap-x-5 gap-y-2"><li><a href="/about" class="text-zinc-600 hover:text-fuchsia-700">About</a></li><li><a href="/search" class="text-zinc-600 hover:text-fuchsia-700">Search</a></li><li><a href="https://www.facts.dev" class="text-zinc-600 hover:text-fuchsia-700">facts.dev</a></li><li><a href="https://news.facts.dev" class="text-zinc-600 hover:text-fuchsia-700">Smart News</a></li><li><a href="https://bluefacts.app/" class="text-zinc-600 hover:text-fuchsia-700">BlueFacts</a></li><li><a href="https://freeappy.com" class="text-zinc-600 hover:text-fuchsia-700">FreeAppy games</a></li></ul></div></footer><dialog id="add-project" aria-labelledby="add-project-title" class="m-auto w-[calc(100%-2rem)] rounded-2xl bg-white p-6 text-zinc-900 shadow-2xl backdrop:bg-black/50 backdrop:backdrop-blur-sm max-w-md"><div class="flex items-start justify-between gap-4"><h2 id="add-project-title" class="font-display text-xl font-bold">Add a GitHub project</h2><form method="dialog"><button class="-m-1 rounded-full p-1 text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900" aria-label="Close"><svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"></path></svg></button></form></div><p class="mt-1 text-sm text-zinc-600">Missing a project or an awesome list? Paste its GitHub URL and we fetch it right away.</p><form class="mt-4"><label for="project-url" class="font-mono text-xs tracking-wide text-zinc-500 uppercase">Project URL</label><input id="project-url" type="url" required placeholder="https://github.com/owner/repo" class="mt-1 w-full rounded-lg border border-zinc-200 bg-white px-3 py-2 text-zinc-900 placeholder:text-zinc-400 focus:border-fuchsia-600 focus:outline-none"><p data-error class="mt-2 text-sm text-red-700" aria-live="polite"></p><div class="mt-4 flex justify-end gap-2 text-sm"><button type="button" data-close class="rounded-full px-4 py-1.5 text-zinc-600 hover:bg-zinc-100">Cancel</button><button type="submit" class="rounded-full bg-zinc-900 px-4 py-1.5 font-medium text-white disabled:opacity-50">Add project</button></div></form></dialog><script type="module" src="/_astro/Layout.astro_astro_type_script_index_0_lang.CNPGAtk_.js"></script></body></html>
