Fresh app receives error "Cannot read property 'install' of undefined"

[danieljsummers]

Steps to reproduce

1. Create new Vue app (vue create md-test)
2. Add Vue Material (cd md-test/src and yarn add vue-material)
3. Copy code from "The last toolbar row fixed" heading and place it in App.vue (may be an unnecessary step, but this was what I was trying to isolate/implement)
4. In main.js, add import { VueMaterial } from 'vue-material' and Vue.use(VueMaterial)
5. Run yarn serve
6. Navigate to http://localhost:8080 and open developer tools
7. Observe error

Which browser?

Browsers:

• Chrome 76.0.3809.100 (64-bit)
• Microsoft Edge 44.18362.267.0

Others:

• Vue Material 1.0.0-beta-11
• Vue 2.6.10
• Vue CLI 3.10.0

What is expected?

The app should load and display something.

What is actually happening?

No rendering occurs due to the JavaScript error.

Other Information

I ran into this while working another project, trying to implement that style toolbar. I get the same thing when I try to import/use MdAppToolbar or MdAppDrawer (along with MdApp, of course); if I import MdDrawer and MdToolbar instead, something renders, but the console has another error, Cannot read property 'offsetHeight' of null, pointing to the MdAppSideDrawer component.

[amoliski]

Do import VueMaterial from 'vue-material' instead of import { VueMaterial } from 'vue-material'

[danieljsummers]

That worked; but, when I tried to import the components using the import { Md* } fromvue-material/dist/components(with*beingApp,AppToolbar`, etc.), it's back to the same error. Bringing the whole thing in seems to be a workaround, advised against in the documentation. If webpack is smart enough to shake out the parts the app doesn't use, though, that's probably fine. Is that the case?

[amoliski]

The documentation kinda sucks for importing piecemeal, for example, MdAppToolbar comes along with MdApp, so you don't need to import it on its own.

Here's what it took to get the App > Fixed + Waterfall example to run with piecemeal imports:

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

//import VueMaterial from 'vue-material'; Vue.use(VueMaterial);
import {MdApp, MdContent, MdTabs, MdDrawer, MdIcon, MdToolbar, MdList } from 'vue-material/dist/components'

import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'

Vue.use(MdApp);
Vue.use(MdContent);
Vue.use(MdTabs);
Vue.use(MdDrawer);
Vue.use(MdIcon);
Vue.use(MdToolbar);
Vue.use(MdList);

new Vue({
  render: h => h(App),
}).$mount('#app')

[danieljsummers]

Nice! I appreciate the help.

When you're looking at the source, is there a way to tell which ones should be imported vs. which ones come along with others? Or is it simply all the top-level ones that are listed in the docs? I'm brainstorming a possible doc PR, but as I was the one whose knowledge was lacking, I wouldn't want to write something inaccurate. I can certainly follow a pattern, though. :)

I was thinking something simple, maybe a component: MdApp under the API - md-app heading or at the bottom of pages that describe functionality that is part of that component; just something to help the next person fall into the pit of success.

[amoliski]

The console log will tell you what components are missing- ex if you don't have MdList imported in that example, it'll complain about missing MdList and MdListItem

I popped over to vue-material/src/components and found MdList - checking the index.js file in its directory, I saw that it included both MdList and MdListItem in the default export.

I'm not sure if there's a better way to find what you need, I was just in your position yesterday and after floundering around for a while, I got it working. Figured I'd pass along the info. Contributing to the docs would be awesome- I'd have done it myself, but the repo owner doesn't appear to be maintaining the project, so I decided to avoid putting in the work until he makes another commit.

[danieljsummers]

Ah - that sounds like a good way to identify them; the choices are probably all the directory names. I'll mull it over and see what I can do. Now that I've gotten past that block, though, I want to do a bit more with the app I'm modifying. That'll help increase my experience with the project as well.

(FWIW, there was a commit June 24th on the dev branch, roughly two months ago.)

[danieljsummers]

Still fighting that offsetHeight issue, but closing this one...