Vue
Table of Contents
Porsche Design System form components can be integrated into Vue using different techniques based on your state
management and form handling preferences. Each component automatically keeps its internal value in sync, similar to
native form elements.
All form components support:
Automatic Data Binding (v-model) using v-model:property directive (e.g. v-model:value or v-model:checked)
Manual State Management (Props + Events) using value/checked properties and change/input/blur event
listeners
Native form submission using form-associated custom elements
Form Integration Demo#
A complete example of how to integrate form components with Vue can be explored here:
Automatic Data Binding (Preferred)#
All custom form components support v-model for seamless two-way data
binding with your model. Because our components don’t use the default modelValue property, you need to explicitly
specify which property should be bound to the model by using an argument — for example, v-model:value or
v-model:checked.
<PInputText v-model:value="myInputText" :name="'myInputText'" :label="'Some Label'" />
...
const myInputText = ref('');
Manual State Management#
While all custom form components update their internal state automatically, you can manage their values externally using
the value or checked props along with input, change, and blur events. This approach allows flexible
integration with any form library.
<PInputText :name="'myInputText'" :label="'Some Label'" :value="value" @input="onInput" />
...
const value = ref<string>('');
const onInput = (e: InputTextInputEventDetail) => {
value.value = (e.target as HTMLInputElement).value;
};
Native Form Submission#
All custom form components are form-associated custom elements that integrate seamlessly with forms. Leveraging the
ElementInternals API, They will work like their
native counterparts, ensuring compatibility with form behaviors.
<form @submit.prevent="onSubmit">
<PInputText :name="'myInputText'" :label="'Some Label'" />
<PButton type="submit">Submit</PButton>
</form>
...
const onSubmit = (e: Event) => {
console.log(e);
};
