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

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({
// ...