Property 'material' does not exist on type 'typeof Vue'.

[mjknight50]

Perhaps this is related to #662, but when I try to use Vue Material in my boot.ts, I get this:

TS2339: Property 'material' does not exist on type 'typeof Vue'.

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

var VueMaterial = require('vue-material')
Vue.use(VueMaterial)


const routes = [
    { path: '/', component: require('./components/home/home.vue.html') },
    { path: '/inventory', component: require('./components/inventory/inventory.vue.html') },
];

Vue.material.registerTheme('default', {
    primary: {
        color: 'indigo',
        hue: 'A200'
    },
    accent: {
        color: 'grey',
        hue: 300
    }
})

new Vue({
    el: '#app-root',
    router: new VueRouter({ mode: 'history', routes: routes }),
    render: h => h(require('./components/app/app.vue.html'))

});

[d3radicated]

Maybe because of require? Try using import for vue-material.

import Vue from 'vue';
import VueMaterial from 'vue-material';
import VueRouter from 'vue-router';

Vue.use(VueMaterial);
Vue.use(VueRouter);

[mjknight50]

That is a good suggestion, but I had tried that with no luck.

If I change from typescript to javascript, everything works fine, but that isn't really a solution.

[Morgul]

@mjknight50 You correctly identified that this is related to #662. The problem comes in that we need a TypeScript language changes in order to support this. Currently, you cannot extend a class definition in another type definition file:

• Make variable declarations open ended microsoft/TypeScript#819
• http://stackoverflow.com/questions/23217334/how-do-i-extend-a-typescript-class-definition-in-a-separate-definition-file

So, this means that Vue.material.registerTheme will never work inside of typescript at the moment. That is (currently) a fundamental limitation of Typescript definition files.

I'm not a TypeScript expert by any means, but at the moment, I believe your options are limited. The first would be to put your VueMaterial registration into a separate initVueMaterial.js file, and then call that from your TypeScript.

A second options would be to declare your own Vue type that inherits from the base Vue type, and adds .material, and then case Vue to that inside your app.ts. Frankly, I'm not sure if that would work correctly or not, but some reading around seems to suggest it might.

[mjknight50]

@Morgul Thanks for your time in responding...
The easiest work-around for me was to just change my boot.ts to a JS file, leaving in place all the rest of my typescript.

[MichaelFedora]

@mjknight50 due note that while it errors it's just a type error; it will still compile. If you want to "ignore" it, you can do (Vue as any).material.registerTheme(/* ... */);.

It would be beneficial if Vue changed their class definition to an interface so that it could be extended, but oh well.

[elbow-jason]

my workaround (it's a hack, but it works):

let VuePatch: any = Vue

VuePatch.use(VueMaterial)

VuePatch.material.registerTheme('default', {
  primary: 'blue',
  accent: 'red',
  warn: 'red',
  background: 'grey'
})

let appMain = new VuePatch({
  el: '#app-main',
  router,
  store,
})

Notice the instantiation of the app uses the VuePatch variable.

[Morgul]

I'm going to close this, as any typescript support will be tracked in #622. 😄

[MichaelFedora]

@Morgul it seems you referenced the wrong issue 😉 #662 seems to be the right one