Vue JS Vuetify menu named slot “activator” is not binding to the template, but going to “default”

Question

I cannot seem to get the example code for a Vuetify v-menu to work inside my PWA app, but it works normally in a Fiddle (e.g. https://jsfiddle.net/tjw13yz4/27/)

The problem is: the activator slot content doesn't appear.

By debugging the vuetify source code, I have found that the activator template turns up under the "default" slot (where all the hidden content is), not in the named activator slot (where the visible button/click area should be).

I have simplified my app to the bare bones (originally I had dynamic components, forms, APIs etc) so I've reduced it down to just a v-menu inside the top-level v-app element, and removed all the routers, stores and other plugins. It's as simple as I can get it, but still doesn't work. the only difference left between the fiddle and my local app is the build system.

I have also tried changing/removing the slot props and the on binding through to the button, which does modify how the named slot is internally represented in Vuetify (or Vue). However neither verison with or without props binds the named-slot properly.

I also npm updated and rebuilt (suggested in another SO), so I'm on the latest Vue 2.6.10 and Vuetify 1.5.14.

I have also ensured I am wrapping in <v-app></v-app> (but that happened when I installed the Vuetify plugin) as noted in other SO's.

I also read this SO which I found useful in debugging.

I've tried putting slot=activator directly on HTML tag, rather than using the template.

And I probably tried a dozen other things, (initially I just had a problem with the on for v-on not being defined, but it was due to this underlying problem).

These are my simplified files - it's all pretty standard:

App.vue (with/out props for on-event binding)

<template>
  <v-app>

    <v-menu offset-y>
      <template v-slot:activator>
        <v-btn color="primary" dark>Dropdown</v-btn>
      </template>

      <p>The menu content</p>
    </v-menu>

    <v-menu offset-y>
      <template v-slot:activator="{ on }">
        <v-btn color="primary" v-on="on" dark>Dropdown2</v-btn>
      </template>

      <p>The menu2 content</p>
    </v-menu>

  </v-app>
</template>

main.js

import Vue from "vue";
import "./plugins/vuetify";
import App from "./App.vue";
new Vue({
  render: h => h(App)
}).$mount("#app");

plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'

Vue.use(Vuetify, {
  iconfont: 'md',
})

index.html

When it runs, I set a breakpoint in node_modules/vuetify/src/components/VMenu/mixins/menu-generators.js and it returns null here because neither type of slots are set:

    genActivator: function genActivator() {
        if (!this.$slots.activator && !this.$scopedSlots.activator) return null;

In my app, the Chrome debug inspector shows the v-btn is next to the p tag under the default $slot, but it should be under its own one.

In the working Fiddle by contrast, when debugging the same function, I see the activator node under $scopeSlots when I include the v-on=on event binding, and under the $slots if not. And it works fine.

Why might the v-slot=activator statement not take effect?

Answer 1

After reading this answer: https://stackoverflow.com/a/55268990/209288 I found that the older (pre Vue v2.6) syntax worked OK, both in my stripped-down app, and then also in place in my original component.

<template slot="activator" slot-scope="{ on }">

Therefore I realised my app must have still been running an older version, even though I'd used the "Build" option in the Vui UI after doing the npm update.

I just stopped and re-started the vue-cli-service serve command (in the UI) and now it all works as expected!

So I guess I was still running Vue v2.5.22 and the build from VSCode was just hot-reloading some parts.

So the lesson is: after doing an npm update, shut down and restart everything, the build server, VSCode debugger, chrome instance.