Customized bootstrap vue form inputs for BS 5 and Vue 3

Wrapper components over the most commonly used bootstrap input components with support for vuelidate, vue i18n and vue 3 datepicker. Originally based on bootstrap-vue-next components, but since version 4 without this dependency.

Main goal is to simplify common bootstrap form design in my own projects.

Install

1npm install @tvaliasek/vue-form-inputs
2
3# peer dependencies
4npm install bootstrap
5# for datepicker
6npm install @vuepic/vue-datepicker

1import { createApp } from 'vue'
2
3import { FormInputsPlugin } from '@tvaliasek/vue-form-inputs'
4import '@tvaliasek/vue-form-inputs/dist/vue-form-inputs.css'
5import 'bootstrap/dist/css/bootstrap.css'
6
7const app = createApp(App)
8
9app.use(FormInputsPlugin())
10
11// or import individual components
12
13/*
14    FormInput
15    FormInputDatePicker
16    FormInputTextarea
17    FormInputSelect
18    FormInputRadioGroup
19    FormInputCheckbox
20    FormInputCheckboxGroup
21    FormInputFile
22*/

Usage, props and slots

Basic usage example:

1<template>
2    <!-- Common text input with validation -->
3    <FormInput
4        id="htmlId"
5        label="Common text input"
6        :validation="validations.example"
7        v-model="example"
8    />
9</template>
10
11<script setup>
12import useVuelidate from '@vuelidate/core'
13import { ref, computed } from 'vue'
14import { required } from '@vuelidate/validators'
15
16const example = ref('')
17const validations = useVuelidate(computed(() => ({ example: { required } })), { example })
18</script>
19

Props

Common props for all components

prop	type	required	default	description
label	string	false	empty string	Input label text
size	string	false	undefined	Size of input - sm, lg or not set
validationMessages	object	false	empty object	key - value pairs for validation messages
validation	object	false	empty object	vuelidate validation entry instance
disabled	boolean	false	false	Input html disabled attribute
modelValue	undefined	false	undefined	v-model value
hint	string	false	undefined	hint text for input displayed under form input
id	string	false	undefined	Input html id attribute
readOnly	boolean	false	false	toggle for readonly attribute

Text

prop	type	required	default	description
type	string	false	'text'	Input html attribute type
placeholder	string	false	undefined	input placeholder html attribute
formatter	function	false	undefined	function to apply on value as formatter
renderAsGroup	boolean	false	false	toggle for input group rendering, use slots default / append and prepend
lazyFormatter	boolean	false	true	control behaviour of formatter function

Textarea

prop	type	required	default	description
placeholder	string	false	undefined	input placeholder html attribute
formatter	function	false	undefined	function to apply on value as formatter
lazyFormatter	boolean	false	true	control behaviour of formatter function

Select

prop	type	required	default	description
options	array	true	undefined	[{ value: 'someValue', text: 'Some value' }]
multi	boolean	false	false	toggle for multiselect rendering
selectSize	number	false	undefined	set number of rows for multiselect
placeholder	string	false	undefined	input placeholder html attribute
renderAsGroup	boolean	false	false	toggle for input group rendering, use slots default / append and prepend

Radio group, Checkbox group

prop	type	required	default	description
options	array	true	undefined	[{ value: 'someValue', text: 'Some value' }]
stacked	boolean	false	true	toggle to render inputs side by side

Checkbox

prop	type	required	default	description
renderAsSwitch	boolean	false	false	toggle to render input as switch

Datepicker

Datepicker is wrapped @vuepic/vue-datepicker

prop	type	required	default	description
locale	string	false	cs-CZ	language code for Intl
minDate	Date	false	undefined	minimal date for calendar
maxDate	Date	false	undefined	maximal date for calendar
enableTime	boolean	false	false	toggle for date and time selection
ignoreTimeValidation	boolean	false	true	validate only date part
dateFormat	function	false	undefined	custom date formatter function
placeholder	string	false	undefined	input placeholder html attribute
enforceUtc	boolean	false	undefined	enforces UTC format
defaultTime	{ hours: string | number, minutes: string | number, seconds: string | number }	false	undefined	sets default time

File

prop	type	required	default	description
multiple	boolean	false	false	set to true to enable multiple file selection
accept	string or string[]	false	[]	define list of extensions or mime type patterns allowed for selection, model value is automatically filtered using these patterns

i18n

If you want to automatically translate validation messages, you can use vue i18n, or custom function. Just add translations to your i18n instance and provide "t" function as below:

1import { provide } from 'vue'
2import { useI18n } from 'vue-i18n'
3import { TRANSLATE_INJECTION_KEY } from '@tvaliasek/vue-form-inputs'
4
5const { t } = useI18n()
6provide<((message: string, params: Record<string, any>) => string)>(TRANSLATE_INJECTION_KEY, (message: string, params?: Record<string, any>) => t(message, params)) 
7
8// for automatic translation of custom messages you could use $t: prefix
9const v$ = useVuelidate({
10    textInput: {
11        required,
12        minLength: minLength(4),
13        custom: helpers.withMessage('$t:some.message', (value: string) => {
14            return value === 'custom'
15        })
16    },
17}, { textInput })
18

Add default translations to your i18n instance:

1{
2    "cs": {
3        "vueFormInputs": {
4            "feedback": {
5                "required": "Toto pole je nutné vyplnit.",
6                "minLength": "Hodnota musí být minimálně {minLength} znaků dlouhá.",
7                "maxLength": "Hodnota musí být maximálně {maxLength} znaků dlouhá.",
8                "minValue": "Hodnota musí být minimálně {minValue}.",
9                "maxValue": "Hodnota musí být maximálně {maxValue}.",
10                "between": "Hodnota musí být mezi {betweenMin} a {betweenMax}.",
11                "alpha": "Jsou povoleny pouze písmena.",
12                "alphaNum": "Jsou povoleny pouze písmena a čísla.",
13                "numeric": "Jsou povoleny pouze čísla.",
14                "integer": "Jsou povolena pouze celá čísla.",
15                "decimal": "Jsou povolena pouze desetinná čísla.",
16                "email": "Chybný formát emailové adresy.",
17                "ipAddress": "Chybný formát IP adresy.",
18                "macAddress": "Chybný formát MAC adresy.",
19                "sameAs": "Hodnota není shodná.",
20                "url": "Chybný formát URL adresy.",
21                "validatedEmail": "Nefunkční nebo chybná emailová adresa.",
22                "invalidValue": "Chybně vyplněná hodnota."
23            }
24        }
25    },
26    "en": {
27        "vueFormInputs": {
28            "feedback": {
29                "required": "This field must be filled.",
30                "minLength": "The value must be at least {minLength} characters long.",
31                "maxLength": "The value must be at most {maxLength} characters long.",
32                "minValue": "The value must be at least {minValue}.",
33                "maxValue": "The value must be at most {maxValue}.",
34                "between": "The value must be between {betweenMin} and {betweenMax}.",
35                "alpha": "Only letters are allowed.",
36                "alphaNum": "Only letters and numbers are allowed.",
37                "numeric": "Only numbers are allowed.",
38                "integer": "Only whole numbers are allowed.",
39                "decimal": "Only decimal numbers are allowed.",
40                "email": "Incorrect email address format.",
41                "ipAddress": "Incorrect IP address format.",
42                "macAddress": "Incorrect MAC address format.",
43                "sameAs": "The values are not identical.",
44                "url": "Incorrect URL address format.",
45                "validatedEmail": "Broken or incorrect email address.",
46                "invalidValue": "Incorrectly filled value."
47            }
48        }
49    }
50}
51