How SSR-friendly is ark?

[finleyjb]

I’m having a bit of difficulty telling how SSR-friendly ark is by looking at the docs. I’m specifically planning on using ark in a nuxt/Vue app.

Does ark support SSR in this framework?

[ImMortaL0P]

Yes — Ark ships a first-party Nuxt starter template (templates/nuxt/) in the repo, so SSR + hydration in Nuxt/Vue is an officially supported, tested path, not just "should work in theory."

Some context worth having going in, though: searching the issue tracker turns up a real history of hydration-mismatch bugs specifically in the Vue/Nuxt package — Field.Input/Field.Textarea causing hydration errors, Menu.Separator hydration mismatches, Combobox.Positioner positioning issues in Nuxt 3, menu-inside-portal-with-submenu hydration mismatches. All of these are closed/fixed now, but the pattern tells you where the sharp edges tend to show up: Field components and portaled/positioned content (menus, comboboxes) are where hydration mismatches have historically appeared, more than the simpler components.

Practical takeaway:

• Use the templates/nuxt/ starter as your baseline setup — it reflects what's actually verified to work.
• Pin to a recent version rather than an older pin, since several of these were fixed relatively recently.
• If you do hit a hydration warning, it's most likely to be in a Field.* component or something rendered through a Portal (Menu, Combobox, Popover) — check the closed issues above first, your case may already be fixed or have a documented workaround.

There's also internal guidance (.claude/docs/framework_patterns.md) that every framework binding — Vue included — is expected to render exclusively through the ark factory (ark.div, etc.) rather than native elements, specifically because that's what keeps element creation SSR-safe across frameworks.

[finleyjb]

This makes sense as the current answer, but ideally you’d want to use a nuxt module. I added a feature request for it.