PHPackages                             z1lab/laravel-vue-form - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [API Development](/categories/api)
4. /
5. z1lab/laravel-vue-form

ActiveLibrary[API Development](/categories/api)

z1lab/laravel-vue-form
======================

A PHP package for generate VueJS forms.

v0.0.6(7y ago)182MITVuePHP >=7.1.3

Since Nov 2Pushed 6y ago2 watchersCompare

[ Source](https://github.com/z1lab/laravel-vue-form)[ Packagist](https://packagist.org/packages/z1lab/laravel-vue-form)[ Docs](https://github.com/z1lab/laravel-vue-form)[ RSS](/packages/z1lab-laravel-vue-form/feed)WikiDiscussions master Synced yesterday

READMEChangelog (1)Dependencies (5)Versions (12)Used By (0)

Introduction
------------

[](#introduction)

Laravel Vue Form is a package developed for make agile forms using Json:API response and VueJS components.

License
-------

[](#license)

Laravel Vue Form is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).

Installation
------------

[](#installation)

```
composer require z1lab/laravel-vue-form

```

Publish Vue Components and JS files
-----------------------------------

[](#publish-vue-components-and-js-files)

```
php artisan vendor:publish --tag=form-components

```

### Properties

[](#properties)

PropertyRequiredInputDefaultDescriptionaction**true**StringRoute to submit the form.headerfalseStringtitle and sub-title for creating the form's card header.methodfalseStringPOSTMethod of submitting the form.selffalseStringForm root route.callbackfalseStringReturn route after submitting the form.return**true**Padronizando retorno para utilizar formVue.jscreate**true**\*Input,FieldsetEmit value with mask chars, default is raw.createMany**true**\*Input,FieldsetEmit value with mask chars, default is raw.\*Create is mandatory if you do not have a createMany being used and vice versa.

### Example Simple

[](#example-simple)

\#####HomeController.php

```
$form = new \Z1lab\Form\Models\Form;
$form->action('resource/to/send/form');

$name = new \Z1lab\Form\Models\Inputs\Text;
$name->value('Name');
$name->name('name');

$form->create($name);

return $form;
```

\#####home.blade

```

        Laravel

@routes

```

### Fieldset

[](#fieldset)

PropertyRequiredInputDefaultDescriptionlegendfalseStringUse this property to titrate the fieldset component.subtitlefalseStringSubtitle for description of the component Fieldset.create**true**\*InputEmit value with mask chars, default is raw.createMany**true**\*InputEmit value with mask chars, default is raw.\*Create is mandatory if you do not have a createMany being used and vice versa.

```
$form = new \Z1lab\Form\Models\Form;
$basic = new \Z1lab\Form\Models\Fieldset;

$name = new \Z1lab\Form\Models\Inputs\Text;
$name->value('Name')->name('name');

$basic->create($inputs_basic);
$basic->legend('title');

$form->create($basic);

return $form;
```

### PostalCode

[](#postalcode)

PropertyRequiredInputDefaultDescriptionlegendfalseStringUse this property to titrate the fieldset component.subtitlefalseStringSubtitle for description of the component Fieldset.colfalseStringcol-md-3Use if you want to change the grid size of the postal code.validatefalseStringrequired,cepUse if you want to change the default validation of the postal code.maskfalseString\#####-###Use if you want to modify the default masking of the postal code.valuefalseStringUse if you want to modify the initial value of the postal code.inputs**true**Array\[\]Use to add other fields in the address fieldset, if you do not add any, only the portal code will be displayed because it is created by default.```
$form = new Form;

$address = new PostalCode;
$address->legend('Address')->subtitle('Description');

$inputs_address['street'] = new Text;
$inputs_address['district'] = new Text;
$inputs_address['city'] = new Text;
$inputs_address['state'] = new Text;
$inputs_address['number'] = new Text;
$inputs_address['complement'] = new Text;

$inputs_address['street']->name('address[street]')->col('col-md-6')->validate('required');
$inputs_address['district']->name('address[district]')->col('col-md-3')->validate('required');
$inputs_address['number']->name('address[number]')->col('col-md-2')->validate('required');
$inputs_address['complement']->name('address[complement]')->col('col-md-4');
$inputs_address['city']->name('address[city]')->col('col-md-4')->disabled();
$inputs_address['state']->name('address[state]')->col('col-md-2')->disabled();

$form->action(route('test.post'));
$form->header('Test', 'description');
$form->callback(route('home'));

$form->createMany([$address->inputs($inputs_address)]);

return $form->return();
```

### Inputs

[](#inputs)

PropertyRequiredInputDefaultRestrictedDescriptionname**true**StringName to assign to input.colfalseStringcol-12Size of the component in the grid.validatefalseStringValidation, use the [VeeValidate](https://baianat.github.io/vee-validate/) package for use.typefalseStringtextInput type.keyfalseStringIf you need to use a key other than name in js.placeholderfalseStringDescription/Example of input.valuefalseInput value.disabledfalseBoolFALSEDisable input for editing.readonlyfalseBoolFALSEEnable read mode for input.removeLabelfalseFALSEIf you want your component does not have a label.conditionfalseCondition for certain fields to be displayed if certain inputs have a certain value.checkboxs**true**ArrayCheckboxReceives a checkbox array for component creation. It receives two values within this label and value array.formatfalseDate, DateFlatpickrUse to identify the format that will arrive for the component, the function may undergo changes in different components.exhibitionfalseString'##/##/####'DateUse to create masks for UX.timefalseStringFALSEDateFlatpickrEnables time picker.time\_24hrfalseStringTRUEDateFlatpickrDisplays time picker in 24 hour mode without AM/PM selection when enabled.alt\_inputfalseStringTRUEDateFlatpickrShow the user a readable date (as per format), but return something totally different to the server.rangefalseDateFlatpickrUse to create a minimum or maximum date.mask**true**StringMaskUse to create masks for your components to have a friendly UX.maskedfalseBoolFALSEMask, MoneyUse if you want the component return to come with the mask.percentagefalseFALSEMoneyUse if you want to use percentage in the component.datafalseArraySelectedUse to populate the selected component.keyfalseStringSelectedUse to tell the key to be returned when selecting an option.labelfalseString, ArraySelectedUse to enter the title to be displayed in the option.options**true**SelectedFunction for complete creation of the selected component. See the Example below for more details.typeInputfalseStringFALSESelectedIf you want a more advanced select, used in cases where the component has many options. You only get 2 "search" or "helper" options.onfalseFALSECheckSwitchSet switch value to TRUE.- [checkbox](#checkbox)
- [date](#date)
- [date-flatpickr](#date-flatpickr)
- [default](#default)
- [editor](#editor)
- [mask](#mask)
- [money](#money)
- [radio](#radio)
- [selected](#selected)
- [selected-helper](#selected-helper)
- [selected-search](#selected-search)
- [switch](#switch)
- [textarea](#textarea)

#### `checkbox`

[](#checkbox)

```
$form = new \Z1lab\Form\Models\Form;

$name = new \Z1lab\Form\Models\Inputs\Checkbox;

$input->name('test')->col('col-md-4')->checkboxs([
    [
        'label' => 'test1',
        'value' => TRUE
    ], [
        'label' => 'test2',
        'value' => FALSE
    ]
]);

$form->action(route('post'));
$form->header('Test', 'Description');
$form->callback(route('home'));

$form->create($input);

return $form->return();
```

#### `date`

[](#date)

This component uses [vue-the-mask](https://vuejs-tips.github.io/vue-the-mask/) for its construction, if you want to modify the display exhibition see your doc.

```
$form = new \Z1lab\Form\Models\Form;

$name = new \Z1lab\Form\Models\Inputs\Date;

$input->name('test')->col('col-md-4')->exhibition('##/##/####')->format('YYYY-MM-DD', 'YYYY-MM-DD', 'DD/MM/YYYY');

$form->action(route('post'));
$form->header('Test', 'Description');
$form->callback(route('home'));

$form->create($input);

return $form->return();
```

#### `date-flatpickr`

[](#date-flatpickr)

This component uses the [flatpickr](https://flatpickr.js.org/) package for its construction, if you want to create any modification see your doc.

```
$form = new \Z1lab\Form\Models\Form;

$name = new \Z1lab\Form\Models\Inputs\DateFlatpickr;

$input->name('test')->col('col-md-4')->validate('required|today')->value('2019-12-20 12:30:50')->format('Y-m-d H:i:S')->time()->time_24hr()->alt_input()->range('today');

$form->action(route('post'));
$form->header('Test', 'Description');
$form->callback(route('home'));

$form->create($input);

return $form->return();
```

#### `default`

[](#default)

```
$form = new \Z1lab\Form\Models\Form;

$name = new \Z1lab\Form\Models\Inputs\Text;

$input->name('test')->col('col-md-4');

$form->action(route('post'));
$form->header('Test', 'Description');
$form->callback(route('home'));

$form->create($input);

return $form->return();
```

#### `editor`

[](#editor)

This component uses the [Vue2Editor](https://www.vue2editor.com/examples/) package for its construction, if you want to create any modification see your doc.

```
$form = new \Z1lab\Form\Models\Form;

$name = new \Z1lab\Form\Models\Inputs\Editor;

$input->name('test')->col('col-md-4');

$form->action(route('post'));
$form->header('Test', 'Description');
$form->callback(route('home'));

$form->create($input);

return $form->return();
```

#### `mask`

[](#mask)

This component uses [vue-the-mask](https://vuejs-tips.github.io/vue-the-mask/) for its construction, if you want to modify the display exhibition see your doc.

```
$form = new \Z1lab\Form\Models\Form;

$name = new \Z1lab\Form\Models\Inputs\Mask;

$input->name('phone')->col('col-md-12')->mask('(##) ####-####')->mask('(##) #####-####');

$form->action(route('post'));
$form->header('Test', 'Description');
$form->callback(route('home'));

$form->create($input);

return $form->return();
```

#### `money`

[](#money)

This component uses [v-money](https://github.com/vuejs-tips/v-money) for its construction, if you want to modify the display exhibition see your doc.

```
$form = new \Z1lab\Form\Models\Form;

$name = new \Z1lab\Form\Models\Inputs\Mask;

$input->name('money')->col('col-md-12');

$form->action(route('post'));
$form->header('Test', 'Description');
$form->callback(route('home'));

$form->create($input);

return $form->return();
```

#### `radio`

[](#radio)

```
$form = new \Z1lab\Form\Models\Form;

$name = new \Z1lab\Form\Models\Inputs\Mask;

$input->name('test')->col('col-md-4')->radios([
    [
        'label' => 'test1',
        'value' => 'test-one'
    ], [
        'label' => 'test2',
        'value' => 'test-two'
    ]
]);

$form->action(route('post'));
$form->header('Test', 'Description');
$form->callback(route('home'));

$form->create($input);

return $form->return();
```

#### `selected`

[](#selected)

```
$form = new \Z1lab\Form\Models\Form;

$name = new \Z1lab\Form\Models\Inputs\Selected;

$input->name('test')->col('col-md-4')->options([['id' => '1', 'name' => 'Test 1' ], ['id' => '2', 'name' => 'Test 2' ]], 'name', 'id');

// or

$input->name('test')->col('col-md-4')->options(['Option 1', 'Option 2', 'Option 3']);

// or

$input->name('test')->col('col-md-4')->data([['id' => '1', 'name' => 'Test 1' ], ['id' => '2', 'name' => 'Test 2' ]])->label('name')->key('id');

// or

$input->name('test')->col('col-md-4')->data(['Option 1', 'Option 2', 'Option 3']);

$form->action(route('post'));
$form->header('Test', 'Description');
$form->callback(route('home'));

$form->create($input);

return $form->return();
```

#### `selected-helper`

[](#selected-helper)

```
$form = new \Z1lab\Form\Models\Form;

$name = new \Z1lab\Form\Models\Inputs\Selected;

$input->name('test')->col('col-md-4')->options([['id' => '1', 'name' => 'Test 1' ], ['id' => '2', 'name' => 'Test 2' ]], 'name', 'id')->typeInput('helper');

$form->action(route('post'));
$form->header('Test', 'Description');
$form->callback(route('home'));

$form->create($input);

return $form->return();
```

#### `selected-search`

[](#selected-search)

```
$form = new \Z1lab\Form\Models\Form;

$name = new \Z1lab\Form\Models\Inputs\Selected;

$input->name('test')->col('col-md-4')->options([['id' => '1', 'name' => 'Test 1' ], ['id' => '2', 'name' => 'Test 2' ]], 'name', 'id')->typeInput('search');

$form->action(route('post'));
$form->header('Test', 'Description');
$form->callback(route('home'));

$form->create($input);

return $form->return();
```

#### `switch`

[](#switch)

```
$form = new \Z1lab\Form\Models\Form;

$name = new \Z1lab\Form\Models\Inputs\CheckSwitch;

$input->name('test')->col('col-md-4')->description('Test 1');

$form->action(route('post'));
$form->header('Test', 'Description');
$form->callback(route('home'));

$form->create($input);

return $form->return();
```

#### `textarea`

[](#textarea)

```
$form = new \Z1lab\Form\Models\Form;

$name = new \Z1lab\Form\Models\Inputs\TextArea;

 $input->name('test')->col('col-md-4');

$form->action(route('post'));
$form->header('Test', 'Description');
$form->callback(route('home'));

$form->create($input);

return $form->return();
```

###  Health Score

26

—

LowBetter than 43% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity11

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity53

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 83.3% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~23 days

Recently: every ~43 days

Total

10

Last Release

2539d ago

Major Versions

v0.1.0-rc3 → v1.0.0-rc12019-05-30

### Community

Maintainers

![](https://www.gravatar.com/avatar/f0b43cb681daed29217ea5ff945e0c211b74012050045002d365c848f8fd4b3b?d=identicon)[webmaster-z1lab](/maintainers/webmaster-z1lab)

---

Top Contributors

[![olimarferraz](https://avatars.githubusercontent.com/u/6013739?v=4)](https://github.com/olimarferraz "olimarferraz (10 commits)")[![AlissonRA](https://avatars.githubusercontent.com/u/14985714?v=4)](https://github.com/AlissonRA "AlissonRA (2 commits)")

---

Tags

laravelJSON-APIVue.js

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/z1lab-laravel-vue-form/health.svg)

```
[![Health](https://phpackages.com/badges/z1lab-laravel-vue-form/health.svg)](https://phpackages.com/packages/z1lab-laravel-vue-form)
```

###  Alternatives

[andreaselia/laravel-api-to-postman

Generate a Postman collection automatically from your Laravel API

1.0k586.2k3](/packages/andreaselia-laravel-api-to-postman)[essa/api-tool-kit

set of tools to build an api with laravel

52680.5k](/packages/essa-api-tool-kit)[mll-lab/laravel-graphiql

Easily integrate GraphiQL into your Laravel project

683.2M9](/packages/mll-lab-laravel-graphiql)[simplestats-io/laravel-client

Client for SimpleStats!

4515.5k](/packages/simplestats-io-laravel-client)[laravel-json-api/core

Contracts and support classes for Laravel JSON:API packages.

101.5M8](/packages/laravel-json-api-core)[ryangjchandler/bearer

Minimalistic token-based authentication for Laravel API endpoints.

8129.8k](/packages/ryangjchandler-bearer)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)