vue-material mdAutocomplete inside electron-vue app - setup problems - vue-material

Question

I am experimenting with electron-vue seed app and have upgraded electron to 8 and vue to the latest versions. I am installing vue-material components in my src/renderer/router/index.js:
import Vue from 'vue'
import Router from 'vue-router'
import { MdButton, MdContent, MdTabs, MdAutocomplete } from 'vue-material/dist/components'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default-dark.css'
Vue.use(Router)
Vue.use(MdButton)
Vue.use(MdContent)
Vue.use(MdTabs)
Vue.use(MdAutocomplete)
I then have src/renderer/App.vue with
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'pdq-app'
}
</script>
<style>
#import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght#400;600&display=swap|Roboto:400,500,700,400italic|Material+Icons');
html {
font-family: 'Source Code Pro', monospace;
}
</style>
I'm drawing the autocomplete on the CommandLine.vue template, with the Command.vue component:
<template>
<main>
<main-menu></main-menu>
<command></command>
</main>
</template>
<script>
import MainMenu from './MainMenu'
import Command from './CommandLine/Command'
export default {
name: 'command-line',
components: { MainMenu, Command },
methods: {
open (link) {
this.$electron.shell.openExternal(link)
}
}
}
</script>
<style>
</style>
The autocomplete component is thus:
<template>
<div>
<md-autocomplete v-model="selectedCountry" :md-options="countries">
<label>Country</label>
</md-autocomplete>
<md-autocomplete v-model="selectedEmployee" :md-options="employees" md-dense>
<label>Employees</label>
</md-autocomplete>
</div>
</template>
<script>
export default {
name: 'AutocompleteStatic',
data: () => ({
selectedCountry: null,
selectedEmployee: null,
countries: [
'Algeria',
'Argentina',
'Brazil',
'Canada',
'Italy',
'Japan',
'United Kingdom',
'United States'
],
employees: [
'Jim Halpert',
'Dwight Schrute',
'Michael Scott',
'Pam Beesly',
'Angela Martin',
'Kelly Kapoor',
'Ryan Howard',
'Kevin Malone',
'Creed Bratton',
'Oscar Nunez',
'Toby Flenderson',
'Stanley Hudson',
'Meredith Palmer',
'Phyllis Lapin-Vance'
]
})
}
</script>
The issue is I am not sure what I am missing to display the input control - it's rendering invisible. There exists an md-input tag in the rendered HTML, but it seems I'm missing some dependency to draw stuff:
What am I missing to draw the full autocomplete?

Answer 1

Looks like I needed to add some dependencies: MdField, MdMenu, and MdList. It's difficult to see this in the documentation; I guess if I was importing the entirety of VueMaterial it wouldn't be an issue.
import Vue from 'vue'
import Router from 'vue-router'
import {
MdButton,
MdCard,
MdContent,
MdTabs,
MdAutocomplete,
MdField,
MdMenu,
MdList
} from 'vue-material/dist/components'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default-dark.css'
Vue.use(Router)
Vue.use(MdAutocomplete)
Vue.use(MdField)
Vue.use(MdMenu)
Vue.use(MdList)
Vue.use(MdButton)
Vue.use(MdCard)
Vue.use(MdContent)
Vue.use(MdTabs)
// export default new Router({
// ...