@matatrek/vue3-form-inputs

A Vue plugin designed to simplify the creation of interactive and accessible forms. It includes built-in validations and supports translations (en, es).

Install

NPM

npm install @matatrek/vue3-form-inputs

Global Import

You can register the plugin globally in your Vue application as follows:

import { createApp } from 'vue'
import FormInputsPlugin from "@matatrek/vue3-form-inputs";

const app = createApp(App)
app.use(FormInputsPlugin, {
  i18n, // Optional
  theme: {
    input: 'bg-white text-gray-800',
    label: 'text-blue-600 font-semibold',
    wrapperInput: 'border-gray-400'
  } // Optional
});
app.mount('#app')

Optional Parameters

■ i18n: Pass your Vue I18n instance if you're using internationalization.

■ theme: Pass an object with CSS class overrides for default form elements. If omitted, default styles are used. If partial, the provided classes are merged with the defaults.

If you prefer, you can import the theme from another file:

import myCustomTheme from './my-theme'
app.use(FormInputsPlugin, { theme: myCustomTheme })

You can even pass custom classes like:

theme: {
  input: 'mi_input', // Your own global CSS class
}

Default Theme Structure

You can pass any of the following keys in the theme:

{
    wrapper: '',
    label: '',
    required: '',
    readonly: '',
    disabled: '',
    wrapperInput: '',
    wrapperInputError: '',
    input: '',
    inputIcon: '',
    iconRight: '',
    iconPassword: '',
    error: '',
    form: '',
    formButton: '',
    formButtonIcon: '',
}

Usage

<script setup lang="ts">
import { ref } from 'vue';
import { required, email } from "@matatrek/vue3-form-inputs";

const form = ref({
  email: '',
  name: '',
});

const rules = {
  email: { required, email },
  name: { required },
};

const submitForm = (response: Boolean) => {
  //true is when there are no errors in the validations
  //false is when there are errors in the validations
};
</script>

<template>
  <form-container :form="form" :rules="rules" @submit="submitForm">
    <input-text 
      title="Email"
      validation="email"
      v-model="form.email"
      :type="'text'"
    />
    <input-text 
      title="Name"
      validation="name"
      v-model="form.name"
      :type="'text'"
    />
  </form-container>
</template>

Components

FormContainer

Props

Props	Type	Description	Default
form	object	Reactive object with form data (required)	{}
rules	object	Validation rules compatible with Vuelidate	{}
titleButton	string	Submit button text. Rendered using i18n, if available	"send"
iconButton	component	Optional icon component for the submit button	null

Slots

Name	Description
default	Form content (inputs, selects, etc.)
options	Optional section below the form, useful for replacing or extending the default submit button

If the options slot is not used, a default submit button will be rendered automatically.

Events

Name	Return	Description
submit	boolean	When the form is submitted, it indicates whether it is valid (true) or not (false)

Methods

You can access the methods using ref in the component

Name	Parameters	Return	Description
validate	void	boolean	Validates the form and returns true if it is valid or false if there are errors. It also triggers the submit event.

InputText

Props

Props	Type	Description	Default
modelValue	string	The value bound to the input	""
title	string	Label text for the input. Rendered using i18n, if available	""
validation	string	Key for the validation rule in Vuelidate.	""
type	string	Input type (e.g., "text", "password", "email")	text
icon	component	Optional icon component displayed inside the input	null
disabled	boolean	Whether the input is disabled	false
readonly	boolean	Whether the input is read-only	null
placeholder	string	laceholder text. Rendered using i18n, if available	"Enter field"

Slots

Name	Description
error	Custom error message slot

Events

Name	Return	Description
update:modelValue	string	Emitted when the input value changes

License

@matatrek/vue3-form-inputs is open-sourced software licensed under the MIT license.