Configuration

#Configuration

A configuration object can be passed upon initalizing 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'
})

#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: 'horizontal',

  /**
  * 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: 2,
    field: 10,
  },

  /**
   * Whether errors should be displayed above form.
   */

  formErrors: true,

  /**
  * Available languages for translatable elements.
  *
  * Learn more at: /internalization#translating-elements
  */ 
  languages: {
    en: {
      label: 'English'
    }
  },

  /**
  * Default language for multilingual forms.
  *
  * Learn more at: /internalization#translating-elements
  */ 
  language: 'en',

  /**
  * Default locale.
  * 
  * Learn more at: /internalization#locales
  */
  locale: 'en_US',

  /**
  * Timezone of the application.
  * 
  * Learn more at: /internalization#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: /internalization#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',

  /**
  * 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.
  */
  urls: {
    process: null,
    elements: {
      trix: {
        attachment: null
      }
    },
    validators: {
      active_url: null,
      exists: null,
      unique: null
    }
  },

  /**
  * 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')