Configuration
#Configuration
After publishing Laraform's assets with php artisan vendor:publish you'll find the configuration file at config/laraform.php. You'll find the following configuration variables there:
<?php
return [
/*
|--------------------------------------------------------------------------
| Forms' path
|--------------------------------------------------------------------------
|
| Namespace where form classes can be found.
|
*/
'path' => 'App\\Forms',
/*
|--------------------------------------------------------------------------
| Vue component
|--------------------------------------------------------------------------
|
| Default Vue component.
|
*/
'component' => 'laraform',
/*
|--------------------------------------------------------------------------
| Store
|--------------------------------------------------------------------------
|
| Default location to store uploaded files.
|
*/
'store' => [
'disk' => 'public',
'folder' => 'files',
],
/*
|--------------------------------------------------------------------------
| Trix store
|--------------------------------------------------------------------------
|
| Default location to store files uploaded via Trix.
|
*/
'trix' => [
'disk' => 'public',
'folder' => 'media',
],
/*
|--------------------------------------------------------------------------
| Rate limit
|--------------------------------------------------------------------------
|
| Rate limit for `unique` and `exists` validator rules.
|
*/
'throttle' => '60,1',
/*
|--------------------------------------------------------------------------
| Theme
|--------------------------------------------------------------------------
|
| Default theme.
|
*/
'theme' => 'default',
/*
|--------------------------------------------------------------------------
| Theme
|--------------------------------------------------------------------------
|
| Default form layout. If `false` no layout will be used.
|
*/
'layout' => false,
/*
|--------------------------------------------------------------------------
| Labels
|--------------------------------------------------------------------------
|
| Determines if the elements which do not have a `label` option defined
| should have a label DOM element rendered.
|
*/
'labels' => false,
/*
|--------------------------------------------------------------------------
| Form Errors
|--------------------------------------------------------------------------
|
| Determines if errors should be displayed above form.
|
*/
'formErrors' => true,
/*
|--------------------------------------------------------------------------
| Form Steps
|--------------------------------------------------------------------------
|
| Determines whether form steps should be enabled/completed when loading data.
|
*/
'enableStepsOnLoad' => true,
'completeStepsOnLoad' => true,
/*
|--------------------------------------------------------------------------
| Columns
|--------------------------------------------------------------------------
|
| Default column settings.
|
*/
'columns' => [
'element' => 12,
'label' => 12,
'field' => 12
],
/*
|--------------------------------------------------------------------------
| Languages
|--------------------------------------------------------------------------
|
| Available languages for translatable elements.
|
*/
'languages' => [
'en' => [
'code' => 'en',
'label' => 'English'
],
],
/*
|--------------------------------------------------------------------------
| Language
|--------------------------------------------------------------------------
|
| Default language for multilingual forms.
|
*/
'language' => 'en',
/*
|--------------------------------------------------------------------------
| Default translator
|--------------------------------------------------------------------------
|
| The default translator class to be used when using multilingual elements
|
*/
'translator' => Laraform\Translator\Json::class,
/*
|--------------------------------------------------------------------------
| Locale
|--------------------------------------------------------------------------
|
| Default locale.
|
*/
'locale' => 'en_US',
/*
|--------------------------------------------------------------------------
| App timezone
|--------------------------------------------------------------------------
|
| Timezone of the application.
|
*/
'timezone' => null,
/*
|--------------------------------------------------------------------------
| User timezone
|--------------------------------------------------------------------------
|
| Forced timezone of the user. Only define it if you are 100% sure that
| your users will be from this timezone.
|
*/
'userTimezone' => null,
/*
|--------------------------------------------------------------------------
| Validate On
|--------------------------------------------------------------------------
|
| When user inputs should be validated.
|
| Possible values:
| submit: upon form submission
| change: instantly upon user input
| step: before moving to the next step when using Wizard
|
*/
'validateOn' => 'submit|change|step',
/*
|--------------------------------------------------------------------------
| Endpoint
|--------------------------------------------------------------------------
|
| Default endpoint where the form should submit.
|
*/
'endpoint' => '/laraform/process',
/*
|--------------------------------------------------------------------------
| Method
|--------------------------------------------------------------------------
|
| Default method how the form should be submitted.
|
*/
'method' => 'POST',
/*
|--------------------------------------------------------------------------
| Elements
|--------------------------------------------------------------------------
|
| A list of custom elements to be added to Laraform.
|
| eg. [
| 'custom' => App\Elements\CustomElement::class,
| ]
|
*/
'elements' => [],
];
#Configuration On Frontend
If you are not using Laraform's backend package or you'd like to add further configuration on the frontend, you can do so. A configuration object can be passed upon initializing Laraform plugin and will be merged with default configuration.
import Laraform from '@laraform/laraform'
const config = {
// configuration here
}
// Install Vue plugin
Vue.use(Laraform, config)
const app = Vue({
el: '#app'
})Laraform backend configuration will overwrite anything you define on the frontend. If you are using Laraform's backend package you should always use that as the primary configuration source.
#Default Configuration
The following object represents the default configuration of Laraform.
{
/**
* Default theme.
*
* Learn more at: /style-and-theme#using-themes
*/
theme: 'default',
/**
* Default form layout. If false no layout will be used.
*
* Learn more at: /style-and-theme#theme-file
*/
layout: false',
/**
* Determines if the elements which does not have a `label`
* option defined should have a label DOM element rendered.
*
* Learn more at: /rendering#element-layout
*/
labels: false,
/**
* Default column settings.
*
* Learn more at: /rendering#defining-column-sizes
*/
columns: {
element: 12,
label: 12,
field: 12,
},
/**
* Whether errors should be displayed above form.
*/
formErrors: true,
/**
* Whether form steps should be enabled when loading data.
*/
enableStepsOnLoad: true,
/**
* Whether form steps should be enabled & completed when loading data.
*/
completeStepsOnLoad: true,
/**
* Available languages for translatable elements.
*
* Learn more at: /internationalization#translating-elements
*/
languages: {
en: {
label: 'English'
}
},
/**
* Default language for multilingual forms.
*
* Learn more at: /internationalization#translating-elements
*/
language: 'en',
/**
* Default locale.
*
* Learn more at: /internationalization#locales
*/
locale: 'en_US',
/**
* Timezone of the application.
*
* Learn more at: /internationalization#app-timezone
*/
timezone: null,
/**
* Forced timezone of the user. Only define it if you
* are 100% sure that your users will be from this
* timezone.
*
* Learn more at: /internationalization#user-timezone
*/
userTimezone: null,
/**
* When user inputs should be validated.
*
* Possible values:
* submit: upon form submission
* change: instantly upon user input
* step: before moving to the next step when using Wizard
*/
validateOn: 'change|submit|step',
/**
* Default headers for axios requests.
*
* Learn more at: /submission#request-headers
*/
headers: [],
/**
* API endpoints to use by asynchronous requests.
*
* - process:
* Form submits to this endpoint.
*
* - elements.trix.attachment:
* Files uploaded to trix will be handled by this endpoint.
*
* - validators:
* Validation endpoints.
*
* Note: these are available out-of-the box when using backend lib.
*/
endpoints: {
process: null,
elements: {
trix: {
attachment: null
}
},
validators: {
active_url: null,
exists: null,
unique: null
}
},
method: 'POST',
/**
* Third party data.
*/
services: {
placesjs: {
appId: null,
appKey: null
}
}
}#Configuration Methods
Beside using .config() method Laraform's installer has some other methods which make configuration smoother.
# .config(configuration)
Parameters
configurationobject : configuration object
Deeply merges the given configuration with default configuration.
Example
import Laraform from '@laraform/laraform'
Laraform.config({
theme: 'bs4',
endpoints: {
process: '/process-form'
}
})# .store(store)
Parameters
storeobject : Vuex store object
Make Vuex store available for Laraform so forms which use external store will .commit() LARAFORM_UPDATE_STORE mutations instead of modifying Vuex state directly.
Example
import Vue from 'vue'
import Laraform from '@laraform/laraform'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = Vuex.Store({
//...
})
Laraform.store(store)# .element(type, element)
Parameters
typestring : element type's nameelementobject : element's Vue component
Makes an element globally available.
Example
import Laraform from '@laraform/laraform'
import CustomCheckboxElement from './path/to/CustomCheckboxElement.vue'
import MyCustomElement from './path/to/MyCustomElement.vue'
// overriding existing element type
Laraform.element('checkbox', CustomCheckboxElement)
// creating new element type
Laraform.element('my-custom-element', MyCustomElement)# .elements(elements)
Parameters
elementsobject : an object of elements to add
Makes an element globally available in batch. It's important that contrary to .element() method, the element names should follow this pattern: '${Type}Element'.
Example
import Laraform from '@laraform/laraform'
import CustomCheckboxElement from './path/to/CustomCheckboxElement.vue'
import MyCustomElement from './path/to/MyCustomElement.vue'
Laraform.elements({
'CheckboxElement': CustomCheckboxElement,
'MyCustomElement': MyCustomElement
})
In this case checkbox and my-custom element types will be available.
# .rule(name, rule)
Parameters
namestring : name of validator ruleruleobject : validation rule
Makes a validator rule globally available.
Example
import Laraform from '@laraform/laraform'
import UsPhoneValidator from './path/to/UsPhoneRule.vue'
Laraform.rule('us_phone', UsPhoneRule)# .theme(name, theme)
Parameters
namestring : name of the themethemeobject : theme file
Makes a theme available.
Example
import Laraform from '@laraform/laraform'
import CustomTheme from './path/to/CustomTheme.vue'
Laraform.theme('custom', CustomTheme)# .locale(name, locale)
Parameters
namestring : name of the localelocaleobject : locale object
Registers a locale.
Example
import Laraform from '@laraform/laraform'
import fr_FR from './path/to/fr_FR.js'
Laraform.locale('fr_FR', fr_FR)# .tag(path, value)
Parameters
pathstring : path to translation tagvaluestring : value of tag
Registers a translation tag.
Example
import Laraform from '@laraform/laraform'
Laraform.tag('en_US.messages.required', 'Please fill in the field')