Vue 3 Composition API: Mastering defineProps Generation

JSON to Vue Props: Generating defineProps Types for Vue 3 Components

Vue 3's Composition API with <script setup> uses defineProps<{}>() to declare component props with full TypeScript type inference. When building a component that renders API data, you need the props interface to match your data shape exactly. Generating Vue props from JSON gives you the correct defineProps signature instantly, with optional props inferred from null values in your data.

Live Example: Product Listing Component

// Input JSON (API response)
{
  "id": "prod_441",
  "name": "Mechanical Keyboard",
  "price": 89.99,
  "in_stock": true,
  "category": "hardware",
  "thumbnail_url": "https://cdn.example.com/kb-441.jpg",
  "discount_pct": null
}

// Generated Vue 3 Component
<script setup lang="ts">
defineProps<{
  id: string;
  name: string;
  price: number;
  in_stock: boolean;
  category: string;
  thumbnail_url: string;
  discount_pct?: number;
}>();
</script>

<template>
  <div class="vue-card p-4 rounded-xl border border-slate-200 dark:border-slate-800">
    <h2 class="text-xl font-bold mb-2">Component</h2>
    <ul class="text-sm space-y-1">
      <li><strong>id:</strong> {{ id }}</li>
      <li><strong>name:</strong> {{ name }}</li>
      <li><strong>price:</strong> {{ price }}</li>
    </ul>
  </div>
</template>

Adding Default Values with withDefaults

TypeScript-only defineProps doesn't support inline defaults. Use withDefaults to provide them without losing type inference:

<script setup lang="ts">
interface ProductProps {
  id: string;
  name: string;
  price: number;
  in_stock: boolean;
  category: string;
  thumbnail_url: string;
  discount_pct?: number;
  variant?: 'grid' | 'list' | 'featured';
}

const props = withDefaults(defineProps<ProductProps>(), {
  discount_pct: 0,
  variant: 'grid',
});
</script>

<template>
  <div :class="['product-card', `product-card--${props.variant}`]">
    <img :src="props.thumbnail_url" :alt="props.name" />
    <h3>{{ props.name }}</h3>
    <p>
      <span :class="{ 'line-through text-gray-400': props.discount_pct > 0 }">
        ${{ props.price }}
      </span>
      <span v-if="props.discount_pct > 0" class="text-green-600">
        ${{ (props.price * (1 - props.discount_pct / 100)).toFixed(2) }}
      </span>
    </p>
    <span v-if="!props.in_stock" class="text-red-500">Out of stock</span>
  </div>
</template>

Emits and Two-Way Binding

Props flow down, events flow up. Define emits alongside your props for a complete component contract:

<script setup lang="ts">
const props = defineProps<{
  id: string;
  name: string;
  price: number;
  quantity: number;
}>();

const emit = defineEmits<{
  'add-to-cart': [productId: string, quantity: number];
  'update:quantity': [value: number];
}>();

function handleAddToCart() {
  emit('add-to-cart', props.id, props.quantity);
}
</script>

<template>
  <div>
    <!-- v-model support via update:quantity emit -->
    <input
      type="number"
      :value="quantity"
      @input="emit('update:quantity', Number(($event.target as HTMLInputElement).value))"
    />
    <button @click="handleAddToCart">Add to Cart</button>
  </div>
</template>

Composing with defineExpose

By default, <script setup> components are closed — parent components can't access internal state via template refs. Use defineExpose to selectively expose methods:

<script setup lang="ts">
import { ref } from 'vue';

defineProps<{ initialValue: number }>();

const count = ref(0);
const reset = () => { count.value = 0; };

// Parent can call: productRef.value.reset()
defineExpose({ reset, count });
</script>

Vue Props vs React Props: Key Differences

• Syntax: Vue uses defineProps<{}>() in <script setup>; React uses an interface passed to FC<Props> or a plain function parameter.
• Reactivity: Vue props are reactive by default — changes from the parent automatically re-render the child. In React, props are immutable snapshots per render.
• Defaults: Vue uses withDefaults(); React uses default parameter values or defaultProps.
• Two-way binding: Vue supports v-model via the update:modelValue emit pattern; React uses controlled components with explicit callbacks.

Frequently Asked Questions

Can I use this with Vue 2 Options API? The generated output uses Vue 3 Composition API syntax (defineProps, <script setup>). For Vue 2 or Options API, use the props: {} object syntax instead.

How do I handle nested object props? Nested JSON objects generate Record<string, any>. For production code, define a separate interface for the nested type and reference it in the props definition.

Is my JSON sent to a server? No. TypeMorph runs entirely in your browser — none of your data leaves your machine.