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

Question

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

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

to:

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

Answer 1

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'))
  },
  // ...
}