Vue 3 Bootstrap 5 Forms

A collection of reusable Bootstrap 5 form components built with Vue 3. Designed to help you rapidly build clean and consistent forms in your Vue applications.

✨ Features

• Fully compatible with Vue 3
• Styled with Bootstrap 5 classes
• Built-in multilingual support via vue-i18n and laravel-vue-i18n
• Includes inputs like:
  • Text
  • Email
  • Password
  • Number
  • File Upload
  • Base64 Image
  • Select
  • Checkbox
  • Radio
  • Time
  • Date
  • Color
  • Phone
  • Submit buttons

📦 Installation

Install the package with its requirements:

npm --save-dev install vue3-bootstrap5-forms locales-manager laravel-vue-i18n

🚀 How to Use

Example setup with Vue 3, laravel-vue-i18n, and locales manager:

import { createApp } from "vue";
import { i18nVue } from 'laravel-vue-i18n';

import BootstrapForms from 'vue3-bootstrap5-forms';

import supportedLocales from "../data/supported-locales";
import Locales from "locales-manager";

let locales = new Locales(supportedLocales);

const App = createApp({})
  .use(i18nVue, {
    lang: Locale.getCode(),
    resolve: lang => import(`../../../lang/${lang}.json`),
  });

App.use(BootstrapForms, {
  phoneCountries: ['SA', 'EG', 'AE', 'QA', 'KW', 'OM', 'BH', 'YE'],
  registerComponents: true, // Automatically register all components globally, Default: false
});

App.mount('#app');

📚 Components & Usage

BsInputText

Props:

• resource (String, required): Resource key for translation.
• name (String, required): Input name/id.
• label (String, optional): Custom label.
• note (String, optional): Note below the input.
• placeholder (String, optional)
• error (String, default: '')
• modelValue (default: '')
• id (String, optional): Custom id.
• mode (String, default: 'default')

Usage:

<BsInputText
  resource="user"
  name="first_name"
  v-model="form.first_name"
  :label="'First Name'"
  :note="'Enter your first name'"
  :error="errors.first_name"
/>

BsInputEmail

Props:

• Same as BsInputText, but for email input.

Usage:

<BsInputEmail
  resource="user"
  name="email"
  v-model="form.email"
  :label="'Email Address'"
  :note="'We will never share your email.'"
  :error="errors.email"
/>

BsInputPassword

Props:

• Same as BsInputText, with password visibility toggle.

Usage:

<BsInputPassword
  resource="user"
  name="password"
  v-model="form.password"
  :label="'Password'"
  :note="'Choose a strong password'"
  :error="errors.password"
/>

BsInputNumber

Props:

• Same as BsInputText, but for number input.

Usage:

<BsInputNumber
  resource="user"
  name="age"
  v-model="form.age"
  :label="'Age'"
  :note="'Enter your age'"
  :error="errors.age"
/>

BsInputFile

Props:

• Same as BsInputText, but for file input.
• multiple (Boolean, optional): Allow multiple file selection.

Usage:

<BsInputFile
  resource="user"
  name="resume"
  :multiple="false"
  :label="'Upload Resume'"
  :note="'PDF or DOCX only'"
  :error="errors.resume"
/>

BsInputBase64Image

Props:

• resource (String, required): Resource key for translation.
• name (String, required): Input name/id.
• label (String, optional): Custom label.
• note (String, optional): Note below the input.
• placeholder (String, optional)
• error (String, default: '')
• modelValue (default: '')
• defaultPreview (String, default: placeholder image)
• uploadLabel (String, optional)
• resetLabel (String, optional)
• uploadColor (String, default: 'primary')
• resetColor (String, default: 'danger')
• mode (String, default: 'default')

Usage:

<BsInputBase64Image
  resource="user"
  name="avatar"
  v-model="form.avatar"
  :label="'Profile Image'"
  :note="'JPG or PNG, max 2MB'"
  :error="errors.avatar"
/>

BsSelect

Props:

• resource (String, required)
• name (String, required)
• options (Array, required): List of options.
• label (String, optional)
• note (String, optional)
• placeholder (String, optional)
• error (String, default: '')
• modelValue (default: '')
• id (String, optional)
• mode (String, default: 'default')

Usage:

<BsSelect
  resource="user"
  name="country"
  :options="countryOptions"
  v-model="form.country"
  :label="'Country'"
  :note="'Select your country'"
  :error="errors.country"
/>

BsCheckbox

Props:

• resource (String, required): Resource key for translation.
• name (String, required): Checkbox name/id.
• label (String, optional): Custom label.
• note (String, optional): Note below the checkbox.
• error (String, default: ''): Error message.
• modelValue: Bound value (Boolean or Array).
• value (default: true): Value when checked.
• falseValue (default: false): Value when unchecked.
• id (String, optional): Custom id.
• mode (String, default: 'default'): 'default' or 'horizontal'.

Usage:

<BsCheckbox
  resource="user"
  name="terms"
  v-model="form.terms"
  :label="'Accept Terms'"
  :note="'Required to proceed'"
  :error="errors.terms"
/>

BsRadio

Props:

• resource (String, required)
• name (String, required)
• label (String, optional)
• note (String, optional)
• error (String, default: '')
• modelValue (default: '')
• value (required): Value for this radio option
• id (String, optional)
• mode (String, default: 'default')

Usage:

<BsRadio
  resource="user"
  name="gender"
  v-model="form.gender"
  :value="'male'"
  :label="'Male'"
/>
<BsRadio
  resource="user"
  name="gender"
  v-model="form.gender"
  :value="'female'"
  :label="'Female'"
/>

BsInputTime

Props:

• Same as BsInputText, but for time input.

Usage:

<BsInputTime
  resource="user"
  name="appointment_time"
  v-model="form.appointment_time"
  :label="'Appointment Time'"
  :note="'Select a time'"
  :error="errors.appointment_time"
/>

BsInputDate

Props:

• Same as BsInputText, but for date input.

Usage:

<BsInputDate
  resource="user"
  name="birthdate"
  v-model="form.birthdate"
  :label="'Birthdate'"
  :note="'Select your birthdate'"
  :error="errors.birthdate"
/>

BsInputColor

Props:

• Same as BsInputText, but for color input.

Usage:

<BsInputColor
  resource="user"
  name="favorite_color"
  v-model="form.favorite_color"
  :label="'Favorite Color'"
  :note="'Pick your favorite color'"
  :error="errors.favorite_color"
/>

BsInputPhone

Props:

• resource (String, required)
• name (String, required)
• label (String, optional)
• note (String, optional)
• error (String, default: '')
• modelValue (default: '')
• id (String, optional)
• mode (String, default: 'default')
• countries (Array, optional): List of country objects for phone input

Usage:

<BsInputPhone
  resource="user"
  name="phone"
  v-model="form.phone"
  :label="'Phone Number'"
  :note="'Include country code'"
  :error="errors.phone"
/>

BsButtonSubmit

Props:

• resource (String, required): Resource key for translation.
• name (String, required): Button name/id.
• className (String, default: 'btn btn-danger'): Bootstrap classes.
• label (String, optional): Custom label.
• id (String, optional): Custom id.
• mode (String, default: 'default'): 'default' or 'horizontal'.

Usage:

<BsButtonSubmit
  resource="user"
  name="submit"
  :className="'btn btn-primary'"
  :label="'Save User'"
  :mode="'horizontal'"
/>

🌐 Multilingual Forms Example

You can use <BsMultilingualFormTabs> to easily create multilingual forms. The slot exposes the current locale object for each tab.

Example:

<BsMultilingualFormTabs v-slot="{ locale }">
  <BsInputText
    resource="users"
    name="name"
    :error="form.errors.get(`name:${locale.getCode()}`)"
    v-model="form[`name:${locale.getCode()}`]"
  />
</BsMultilingualFormTabs>