Feedback Laraform is now in maintenance mode. Read more on our GitHub.

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
  • configuration object : 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
  • store object : 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
  • type string : element type's name
  • element object : 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
  • elements object : 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

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
  • name string : name of the theme
  • theme object : 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

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
  • path string : path to translation tag
  • value string : value of tag

Registers a translation tag.

Example
import Laraform from '@laraform/laraform'

Laraform.tag('en_US.messages.required', 'Please fill in the field')