vue.jsvue-material

How to change the HTML5 “md-” prefix in Vue Material?


I want to change this Vue Material prefix tags "md-":

<md-button>{{title1}}</md-button>

to:

<custom-button>{{title1}}</custom-button>

Solution

  • After looking at the vue-material source code, All the components specify the 'name' attribute manually. You can see an example of that in the code for MdAutocomplete.

    You could change the name: 'MdAutocomplete', to name: 'CustomAutocomplete', for each of the files.


    There's also a bit of a messier approach that you could take using Vue's async components system. After doing the normal vue-material setup process:

    import Vue from 'vue'
    import VueMaterial from 'vue-material'
    
    Vue.use(VueMaterial)
    

    You can specify custom component aliases like so:

    import Vue from "vue"
    
    export default {
      components: {
        CustomButton: () => Promise.resolve(Vue.component('MdButton'))
      },
      // ...
    }