fix(vue): svg attrs

chakra-ui · Jan 7, 2025 · 9cce2ba · 9cce2ba
1 parent 2e4ae72
commit 9cce2ba
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/.changeset/few-dragons-develop.md b/.changeset/few-dragons-develop.md
@@ -0,0 +1,5 @@
+---
+"@zag-js/vue": patch
+---
+
+Fix issue where svg `viewBox` attribute handling between client and server
diff --git a/examples/nuxt-ts/nuxt.config.ts b/examples/nuxt-ts/nuxt.config.ts
@@ -1,4 +1,5 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
+  compatibilityDate: "2025-01-07",
 })
diff --git a/packages/frameworks/vue/src/normalize-props.ts b/packages/frameworks/vue/src/normalize-props.ts
@@ -30,13 +30,15 @@ const propMap: Record<string, string> = {
   defaultChecked: "checked",
 }
 
+const preserveKeys =
+  "viewBox,className,preserveAspectRatio,fillRule,clipPath,clipRule,strokeWidth,strokeLinecap,strokeLinejoin,strokeDasharray,strokeDashoffset,strokeMiterlimit".split(
+    ",",
+  )
+
 function toVueProp(prop: string) {
   if (prop in propMap) return propMap[prop]
-
-  if (prop.startsWith("on")) {
-    return `on${toCase(prop.substr(2))}`
-  }
-
+  if (prop.startsWith("on")) return `on${toCase(prop.substr(2))}`
+  if (preserveKeys.includes(prop)) return prop
   return prop.toLowerCase()
 }