Login

r/vuejs

Introducing HareUI - vue port of HeroUI
▲ 32 r/vuejs

Introducing HareUI - vue port of HeroUI

⚠️ Warning product heavily develop by LLM and still in experimental state

It's been a while since vue 3 release and there are very few ui library design as good as react. Right now Nuxt UI are the only one very close to what modern UI should look like. At the time, HeroUI (NextUI previously NextUI) has good quality design and it also open source so I decided to port it.

Right now, all oss components is implemented and the look is pretty identical to HeroUI. The project still need monitor for bug fixes before go stable.

Try it out at: hareui.alexzvn.me

u/alexzvn — 12 days ago
▲ 5 r/vuejs+1 crossposts

I open-sourced the color and gradient picker from our design editor (React + Vue)

I needed a picker for Orshot's template editor that wouldn't break on real CSS. The one we used threw on valid values and had no room for brand or saved colors, so I built my own

- Takes any CSS color or gradient string and returns one, untouched parts stay exactly as written

- Linear, radial, conic and repeating gradients

- hex, rgb, hsl, oklch, eyedropper, Cmd+V to paste any color

- Swatch groups (brand, saved, recent), keyboard and screen reader support

- Zero-dep core, ~14 KB gzipped, MIT

GitHub: https://github.com/rishimohan/colorshot

Live demos: https://orshot.com/open-source/colorshot

Feedback on the API or how dragging feels would help a lot

orshot.com
u/thezinx — 10 days ago
▲ 8 r/vuejs

v-for and :key, Is key unique per page or control?

Let say i have 

items = [
  {
    id:1, 
    children:[{id:1, name:'test11'},{id:2, name:'test12'}]
  },
  {
    id:2, 
    children:[{id:1, name:'test21'},{id:2, name:'test22'}]
  },
]
<div v-for="it in items" :key="it.id">
  <div v-for="ch in it.children" :key="cn.id">
    {{ch.name}}
  </div>
</div>

will that work or i need to make :key unique per page and not per scope?

reddit.com
u/gevorgter — 10 days ago
▲ 0 r/vuejs+1 crossposts

I built an MCP server so you can ask Claude/Cursor what changed in Vue & Nuxt releases

I run VueDigest, a free site that curates Vue & Nuxt articles, GitHub releases and conferences.

I kept asking my AI assistant things like "does the new Nuxt UI release have breaking changes?" and getting outdated answers, so I added an MCP server.

What you can ask:

  • "What changed in Nuxt UI 4.11? Any breaking changes?"
  • "Show me recent articles about Pinia Colada"
  • "Which Vue conferences are coming up?"

Tools: search-articles, list-topics, latest-releases, get-release-notes, list-conferences, get-weekly-digest. Answers link back to the original sources.

Setup (free, no API key), checkout https://vuedigest.com/developers for setup instructions.

It's built with the Nuxt MCP Toolkit, and each tool is a single file reusing the site's server utils.

I'd like to know which questions you'd ask it, and what tool is missing.

u/mokkapps — 14 days ago
▲ 6 r/vuejs

I made a Vue directive that turns your real component into its own skeleton loader (CSS only, nothing moves)

I got tired of building a second, hand-made skeleton for every component and keeping it in sync, so I wrote `v-skeleton`:

<UserCard v-skeleton="loading" :user="user" />

While loading, every line of text becomes a bar, images and buttons become blocks, and borders and spacing stay. It never touches the DOM or any sizes, only a class and a few CSS variables, so nothing on the page shifts. It also waits 200ms before showing (no flash on fast requests) and works with SSR/Nuxt.

How it works, briefly: text is hidden with `-webkit-text-fill-color` (not `color`, which would also erase every currentColor border), and the bars are a `repeating-linear-gradient` mask sized with the `lh` unit, plus a border ring with `mask-composite` so table borders survive.

Live demo (Skeletonize page, tick "loading"): https://navidjaberi.github.io/vue-smart-loading-kit/
GitHub: https://github.com/navidjaberi/vue-smart-loading-kit

Known limits: the last line of a wrapped paragraph gets a full-width bar, and it needs browsers from late 2023 (:has, lh, mask-composite).

I'd really like feedback, especially layouts where it looks wrong. What do you use for skeletons today?

I wrote up how it works (and what testing it caught) here: https://dev.to/navidjaberi/i-built-a-vue-directive-that-turns-your-real-component-into-its-own-skeleton-3853

u/navid-jaberi — 12 days ago