Vuetify v-menu component not visible

Question

So I've been following the first example on how to create a dropdown menu on Vuetify. I basically copy pasted the entire code to ensure it was done right and added the necessary variables referenced in that example.

The problem I have is that the v-menu and everything within that tag doesn't show up at all. The menu I have for example is using v-btn, and it's visible as long as it's outside the v-menu tag. 'npm run build' and chrome debugger doesn't generate any errors either. I can use other Vuetify components but v-menu doesn't behave as documented...

Any help would be much appreciated.

Answer 1

I managed to make it work.

It is strongly advised to use vue-cli when you create vue projects.

I did the following in the command line:

$> yarn global add @vue/cli
$> vue create vuetify
$> yarn add vuetify

I added Vuetify in main.js:

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

Vue.config.productionTip = false

Vue.use(Vuetify)

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

Then I replaced the content in components\HelloWorld.vue with the example:

<template>
  <div class="text-xs-center">
    <v-menu offset-y>
      <template v-slot:activator="{ on }">
        <v-btn
          color="primary"
          dark
          v-on="on"
        >
          Dropdown
        </v-btn>
      </template>
      <v-list>
        <v-list-tile
          v-for="(item, index) in items"
          :key="index"
          @click="test"
        >
          <v-list-tile-title>{{ item.title }}</v-list-tile-title>
        </v-list-tile>
      </v-list>
    </v-menu>
  </div>
</template>

<script>
  export default {
    data: () => ({
      items: [
        { title: 'Click Me' },
        { title: 'Click Me' },
        { title: 'Click Me' },
        { title: 'Click Me 2' }
      ]
    }),
    methods: {
      test() {

      }
    }
  }
</script>

Then run yarn serve

And the dropdown button behaves as expected, minus the css.