Configuration - Vue Material

Global configuration

Vue Material is providing some global options for customization. These options are reactive, you can change it anytime, anywhere:

Via Vue global object  
import Vue from 'vue'

// change single option
Vue.material.locale.dateFormat = 'dd/MM/yyyy'

// change multiple options
Vue.material = {
  ...Vue.material,
  locale: {
    ...Vue.material.locale,
    dateFormat: 'dd/MM/yyyy',
    firstDayOfAWeek: 1
  }
} Code copied!

or you can change it via this.$material in a vue component:

In Vue components  
export default {
  name: 'ChangeDateFormat',
  computed: {
    dateFormat: {
      get () {
        return this.$material.locale.dateFormat
      },
      set (val) {
        this.$material.locale.dateFormat = val
      }
    }
  }
} Code copied!

Here are options Vue Material provide for customization:

Options  
{
  // activeness of ripple effect
  ripple: true,

  theming: {},
  locale: {
    // range for datepicker
    startYear: 1900,
    endYear: 2099,

    // date format for date picker
    dateFormat: 'yyyy-MM-dd',

    // i18n strings
    days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    shortDays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    shorterDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
    months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
    shorterMonths: ['J', 'F', 'M', 'A', 'M', 'Ju', 'Ju', 'A', 'Se', 'O', 'N', 'D'],

    // `0` stand for Sunday, `1` stand for Monday
    firstDayOfAWeek: 0,

    cancel: 'Cancel',
    confirm: 'Ok'
  }
} Code copied!