vue-ts-types

import { defineComponent, createApp } from 'vue'; import { arrayProp, booleanProp, functionProp, isPositive, numberProp, oneOfProp, stringProp } from 'vue-ts-types'; const MyComponent = defineComponent({ props: { disabled: booleanProp().withDefault(false), // resulting prop type: boolean title: stringProp().optional, // resulting prop type: string | undefined description: stringProp().nullable, // resulting prop type: string | null items: arrayProp<string>().required, // resulting prop type: string[] callback: functionProp<() => void>().optional, // resulting prop type: (() => void) | undefined color: oneOfProp(['red', 'green', 'blue'] as const).withDefault('red'), // resulting prop type: 'red' | 'green' | 'blue' timeout: numberProp(isPositive).required, // resulting prop type: number }, template: ` <div> <h1 v-if="title">{{ title }}</h1> <p v-if="description">{{ description }}</p> <button :disabled="disabled" @click="callback">Click Me</button> <ul> <li v-for="item in items" :key="item">{{ item }}</li> </ul> <p>Selected color: {{ color }}</p> <p>Timeout (ms): {{ timeout }}</p> </div> `, setup(props) { // console.log(props.timeout); return { }; } }); // To run this in a browser, you would typically mount it: // const app = createApp(MyComponent); // app.mount('#app'); // Example usage if you were creating a root app: const app = createApp({ components: { MyComponent }, template: `<MyComponent title="Hello Vue Props" :items="['Apple', 'Banana']" :timeout="100" />` }); // In a real application, you'd mount this to an element in your HTML // app.mount('#app'); // Assuming you have <div id="app"></div> in your HTML