@baloise/web-app-form-vue v3.11.4

@baloise/web-form-vue

Delivers utility components to create forms that follow the guides of the Baloise Design System. Moreover it extends the useField function to work as smooth as possible with the Baloise Design System and defines Baloise specific yup schema validations.

Installation

For Vue we use the library VeeValidate together with the Yup Schema Validation.

npm install @baloise/web-app-form-vue vee-validate@next yup

import { baloiseForm } from '@baloise/web-app-form-vue'
import App from './App.vue'

createApp(App).use(baloiseForm).mount('#app')

Define Form Field

Instead of using the useField from Vee-Validate use the wrapper useBalField. This extends the Vee-Validate implementation with the property invalid and message from the yup schema validations.

• Vee-Validate useField API

<script setup lang="ts">
import { BalInput, BalField, BalFieldLabel, BalFieldControl, BalFieldMessage } from '@baloise/design-system-components-vue'
import { useBalField } from '@baloise/web-app-form-vue'

const { value, message, invalid } = useBalField<string>('firstname')
</script>

<template>
  <BalField :invalid="invalid">
    <BalFieldLabel>My Label</BalFieldLabel>
    <BalFieldControl>
      <BalInput v-model="value" />
    </BalFieldControl>
    <BalFieldMessage>{{ message }}</BalFieldMessage>
  </BalFie>
</template>