vue-inputs v0.1.2

Menu

• Introduction
• Usage
• Components
  • Input
  • Select
  • Textarea
  • Checkbox
  • Radio

Introduction

Vue Inputs is a package that bundles common form inputs using Bootstrap 4 framework. Each component acts as a wrapper, making it much easier to use form elements without the need to repeat labels, validation and other classes, help blocks.

Installation

npm install vue-inputs --save

Usage

Including this plugin in your VueJS application is very simple. This will register all available components globally, so you can use them anywhere in your application.

import FormInputs from 'vue-inputs'

Vue.use(FormInputs)

Components

All components have validator injected into them from parent component, so you don't need to worry about checking for errors. If error with same name as name property is found, validation error will be show on component.

Available props

Input

<form-input
    label="First Name"
    name="first_name"
    v-model="user.firstName"
></form-input>

Select

<form-select
    label="Role"
    name="role_id"
    v-model="user.roleId"
    :options="roles"
></form-select>

Select component accepts array of objects as options:

roles: [
  { text: 'Select Role', value: null },
  { text: 'Administrator', value: 1 },
  { text: 'Subscriber', value: 2 }
]

Textarea

<form-textarea
    label="Content"
    name="content"
    v-model="post.content"
></form-textarea>

Checkbox

<form-checkbox
    label="I agree to terms and conditions"
    name="terms_and_conditions"
    v-model="user.terms_and_conditions"
></form-checkbox>

Radio

<form-radio
    label="Blue"
    name="color"
    value="blue"
    v-model="product.color"
></form-radio>