I Built a JSON-to-Vue Form Generator Using Naive UI — Here’s How It Works

🎯 The Problem

If you’ve built Vue apps (especially with Naive-UI), you’ve probably written something like this dozens of times:

data() {
  return {
    first_name: '',
    last_name: '',
    email: '',
  }
}

Then wrapped each property with `<input>` or `<n-form-item>`, added labels, validation, and accessibility attributes manually.  

It’s repetitive, error-prone, and breaks your flow when you just want to prototype a form quickly.

---

## ⚡ The Solution

With JSON-to-Vue, you can paste your target JSON response — for example:

json
{
"first_name": "John",
"last_name": "Doe",
"email": "[e-mail]",
"password": "password123",
"confirm_password": "password123"
}

And instantly generate a complete, accessible Vue form using Naive UI components:

html
<template>
    <n-form ref="formRef" @submit.prevent="handleSubmit" :model="formData" :rules="rules">
        <n-form-item path="first_name">
            <template #label>
                <label for="first_name">First Name</label>
            </template>
            <n-input id="first_name" v-model:value="formData.first_name" type="password" aria-required="true" />
        </n-form-item>
        <n-form-item path="last_name">
            <template #label>
                <label for="last_name">Last Name</label>
            </template>
            <n-input id="last_name" v-model:value="formData.last_name"  />
        </n-form-item>
        <n-form-item path="email">
            <template #label>
                <label for="email">Email</label>
            </template>
            <n-input id="email" v-model:value="formData.email" type="email" autocomplete="email"  />
        </n-form-item>
        <n-form-item path="password">
            <template #label>
                <label for="password">Password</label>
            </template>
            <n-input id="password" v-model:value="formData.password" type="password"  />
        </n-form-item>
        <n-form-item path="confirm_password">
            <template #label>
                <label for="confirm_password">Confirm Password</label>
            </template>
            <n-input id="confirm_password" v-model:value="formData.confirm_password" type="password"  />
        </n-form-item>
        <n-form-item>
            <n-button attr-type="submit" type="primary">Submit</n-button>
        </n-form-item>
    </n-form>
</template>


✅ Generated instantly.
✅ Copy-paste ready.
✅ Fully accessible and Naive UI–compatible.

## 🧩 Under the Hood

Here’s the high-level idea:

Parse the JSON structure.

Infer input types (e.g., detect emails, passwords, booleans).

Generate the <template> and <script> sections dynamically.

Apply accessibility features (aria-required, autocomplete, etc.).

Support rule generation for form validation.


## 🛠️ Key Features

⚙️ Generate Vue form components directly from JSON

🧠 Smart field type detection (email, password, text, etc.)

🧑‍🦽 Accessibility built-in

🎨 Built entirely with Naive UI

💾 Copy to clipboard (and soon download as .vue file)

🧰 Fine-tune each input via a settings panel

## 💬 Community Feedback

I shared an early version of this app on Reddit and got around 375 users on day one.
The feedback was awesome — people loved the idea but pointed out bugs and accessibility gaps.

After addressing those, I’m now focused on expanding support and getting more feedback from the Vue community.

## 🚀 Try It Yourself

🔗 Live App: https://jsontovue.com/

You can generate your first Vue + Naive UI form in under 30 seconds.

If you run into any issues or have suggestions, I’d love your feedback — you can leave a comment here

## 🧭 What’s Next

I’m currently exploring:

Supporting other frameworks like Nuxt and Shadcn

Auto-generating validation rules

Exporting to React and Svelte

If that sounds interesting, follow me for updates or drop a comment below with your ideas.

Thanks for reading! ❤️
If you think this tool could help other Vue developers, please share it or give this post a 🦄