Internalization

#Translating Elements

There's a form option, called multilingual which is if set true a language selector appears above the form similarly to tabs or wizard. This selector will list all the languages configured at the form or in the global configuration and when clicked, certain elements will display their values in the choosen language.

export default {
  mixins: [Laraform],
  data: () => ({
    multilingual: true,
    languages: {
      en: {
        label: 'English'
      },
      de: {
        label: 'German'
      }
    },
    schema: {
      // ...
    }
  })
}

Not all the elements of the form should be translated, as for example selects or checkboxes values are not differentiated by languages. Elements with their type property starting with t- will however accept different values according to the choosen language:

export default {
  mixins: [Laraform],
  data: () => ({
    multilingual: true,
    languages: {
      en: {
        label: 'English'
      },
      de: {
        label: 'German'
      }
    },
    schema: {
      // this will be translated
      title: {
        type: 't-text',
        label: 'Title'
      },

      // this will NOT be translated
      category: {
        type: 'select',
        label: 'Category',
        items: {
          'audiobooks': 'Audiobook',
          'paperback': 'Paperback',
        }
      }
    }
  })
}

Look at how title element receives a 't-text' type.

See the example in action:

// Form data:

        
          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      multilingual: true,
      languages: {
        en: {
          label: 'English'
        },
        de: {
          label: 'German'
        }
      },
      schema: {
        // this will be translated
        title: {
          type: 't-text',
          label: 'Title',
          rules: 'required'
        },

        // this will NOT be translated
        category: {
          type: 'select',
          label: 'Category',
          items: {
            'audiobooks': 'Audiobook',
            'paperback': 'Paperback',
          }
        }
      }
    })
}
</script>
        

Translated Data

As you've seen from the previous example elements with translated data will output an object instead of a single value, which contains different values for each language code.

{
  "title": {
    "en": "...",
    "de": "..."
  },
  "category": "..."
}

Validation

When translatable elements are being validated all of their inputs are validated separately. If an input has error in any language which is not the currently selected language it's messages will be shown above the form in the errors list.

Error messages coming from translatable elements will have a (${languageCode}) prefix when shown in the error collector above the form.

errors: [
  "The Title field is required. (en)",
  "The Title field is required. (de)"
]

Translatable Elements

As we've previously mentioned translation does not make sense with all kind of element types. Currently the followings are supported:

  • t-text
  • t-textarea
  • t-trix

#Locales

A locale file is an object which contains various translation tags in groups like elements, messages, etc. You can check out locale files in laraform/src/locales and see what tags are in use.

The form's selected locale object is available in all Laraform components under locale property.


// ./path/to/locales/en_US.js

export default {
  elements: {
    date: {
      format: 'Y-m-d',
      dataFormat: 'YYYY-MM-DD',
    },
    // ...
  },
  messages: {
    accepted: 'The :attribute must be accepted.',
    active_url: 'The :attribute is not a valid URL.',
    after: 'The :attribute must be a date after :date.',
    // ...
  },
  // ...
}

// ./path/to/FormInstance.vue

export default {
  mixins: [Laraform],
  data: () => ({
    schema: {
      name: {
        type: 'text',
        created() {
          // Ouputs: 'Y-m-d'
          console.log(this.locale.elements.date.format)
        }
      }
    }
  }),
  created() {
    // Ouputs: 'Y-m-d'
    console.log(this.selectedLocale.elements.date.format)
  }
}
In the main Laraform component the locale is available as selectedLocale because locale is already reserved for choosen locale name.

Each component has a common translation method used as __(tag, params) which accepts the name of the translation tag with dot . syntax and parameters if there's any. Translation tags can define variables starting with : like The :attribute must be accepted..

Based on the previous example the same tags can be reached using __() method:


// ./path/to/FormInstance.vue

export default {
  mixins: [Laraform],
  data: () => ({
    schema: {
      name: {
        type: 'text',
        created() {
          // Ouputs: 'Y-m-d'
          console.log(this.__('elements.date.format'))
        }
      }
    }
  }),
  created() {
    // Ouputs: 'Y-m-d'
    console.log(this.__('elements.date.format'))
  }
}

#Switching Locale

To choose a locale you may either set a default one in the Configuration or specify it at a form instance, using locale property:

export default {
  mixins: [Laraform],
  data: () => ({
    locale: 'fr_FR',
    schema: {
      // ...
    }
  })
}

#Adding Locale

To add a locale you may call Laraform installer's .locale() method before installing the Laraform plugin:

import Vue from 'vue'
import Laraform from '@laraform/laraform'
import fr_FR from './path/to/fr_FR'

Laraform.locale('fr_FR', fr_FR)

Vue.use(Laraform)

const app = Vue({
  el: '#app'
})

#Extending Locale

You may also extend an existing locale by simply merging two objects:

import Vue from 'vue'
import Laraform from '@laraform/laraform'
import en_US from '@laraform/laraform/src/locales/en_US'

en_US = Object.assign({}, en_US, {
  myLocaleTag: '...'
})

Laraform.locale('en_US', en_US)

Vue.use(Laraform)

const app = Vue({
  el: '#app'
})

#Creating Locale

To create a locale check out existing tags at laraform/src/locales/en_US/index.js and create your own locale object using the same structure.

#Available Locales

Here's the list of available locales:

  • en_US - English (US)

We are working toward extending are locales and we are happy receiving help. If you would like to participate in translation of Laraform drop up a line at hello@laraform.io.

#Dates

You may notice translation date token tags like:

date: {
  format: 'Y-m-d',
  dataFormat: 'YYYY-MM-DD',
}

The format refers to the date input's format using flatpickr's formatting tokens, while dataFormat sets the format of the element's value using momentjs tokens.

#Timezones

#App Timezone

You may specify your application's timezone in Configuration under timezone property:

  // configuration

  export default {
    timezone: 'America/Los_Angeles'
    // ...
  }

Now if a user enters a date in a datetime element it's value will be transformed from the user's timezone to application's timezone.

For example if user have Europe/Berlin timezone and enters 2019-03-01 18:00:00 the actual value of the element which gets submitted will be 2019-03-01 09:00:00.

#User Timezone

By default the user's timezone is guessed by momentjs, but you may also set a specifiy timezone for your users using userTimezone property in configuration:

  // configuration

  export default {
    userTimezone: 'Berlin/Europe'
    // ...
  }
Be cautious when using userTimezone property and only use it if your application is intended for use only in a specific timezone.

If both timezone and userTimezone are left blank or have the same values no timezone transformation will occur.