Components

Props

Props are the input of a component. They are used to pass data to the component. These props are immutable and can't be changed by the component itself (unless you configure them as model props).

Typescript constructor

Use the Typescript constructor to define your props. This will give you the best intellisense and type checking.

const props = defineProps<{
  name: string,
  age: number,
  address: Address,
}>();

With default values

When using the typescript constructor, you can define default values.

const props = withDefaults(defineProps<{
    age: number,
    name: string,
    address: Address,
}>(), {
    name: 'John Doe',
    age: 18,
    address: {
        street: 'Main street',
        number: 123,
        city: 'New York',
    },
});

Boolean props should be prefixed

Prefixing props with is or has makes it clear that the prop is a flag that expects a boolean value.

const props = defineProps<{
  isDisabled: boolean,
  hasError: boolean,
  isVisible: boolean,
  hasContainer: boolean,
}>();

Optional flags should always be false by default

When you have an optional boolean prop, it's good practice to set it default to false.

• This will prevent you from having to write inverted logic.
• This makes it clear for the user of your component that the prop is optional and that it's default value is false.

const props = defineProps<{
  isDisabled?: boolean,
  hasError?: boolean,
}>();